Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

    • 75 views Last updated

      • Posted in Staff Templates
      • Responsive
      • Type: HTML
      • Description:

        Tabbed categories save your members the hassle of scrolling through long index pages, but most tabbed category scripts are often inaccessible and don't work well on mobile or smaller screens.

        Well, once again I've fixed those issues. This script will degrade gracefully if js isn't enabled, reverting back to a normal display of categories and forums. The tabs are focusable with a keyboard and can be navigated with the arrow keys as well as the normal mouse clicks. It's supported in all major browsers, and on mobile/thin screen widths it will turn itself into an accordion for ease of use.

         

        Usage - HTML:

        This can be modified. I've added the .maintitle and .row2 classes to give this a bit of style that will match with your board automatically, but they can be changed. The .catname class is there so the script can properly find the name of your categories, and the cat_name key is the only thing that should be inside of anything with that class.

        This goes in Skins & Templates -> HTML Templates -> Category Headers

         

        Usage - CSS:

        If you're already using my CSS tabs, the CSS should be familiar, and you won't need to include another copy of it. Otherwise, place this into your CSS (Skins & Templates -> Stylesheet). The CSS is commented with explanations on what each class does, and I highly recommend styling it to suit your needs. The styles have been deliberately left barebones.

        preview.png

    • 158 views Last updated

      • Posted in Staff Templates
      • Responsive
      • Type: HTML
      • Description:

        Modals, or dialogs, are a good way to store information. Unfortunately, most of the currently available scripts for them are completely inaccessible and have other limitations.

        This script will let you use multiple modals on the same page without hassle, and will trap focus for keyboard/screen reader users. Focus is automatically switched to the dialog when opened, and shifted back to the button that opened it when closed. The dialog can be navigated through the use of tab/shift tab, and the escape key can be used to get out of it as well as the mouse.

        Major credit goes to Hidde de Vries for his focus trapping function. I've modified it for use with this code and without it, it simply wouldn't be possible. The Get Next Sibling Matching Selector function is by Chris Ferdinandi and is what enables a relatively hassle-free implementation of being able to use this multiple times on the same page. Please do not remove their credits from within the code!

         

        A Note on Browser Compatibility:

        This will work in all major browsers, however if you or your users uses Firefox, the use of the dialog element must be enabled manually. To enable it, go to about:config and search for dom.dialog_element.enabled, which must be set to true. The backdrop will not show in firefox, but the code will work as intended.

        Does not work in IE or the non-Chromium-based Edge browsers. Will work on mobile browsers, once again with the exception of firefox where the above steps must be taken first.

         

        Usage:

        Please note that in order for this code to function properly, the dialog must come AFTER the corresponding button to open it. You should not have 2 buttons in a row, then the 2 corresponding dialog modals. This code was designed with the ability to use multiple modals per page, and the js was set up with classes in mind rather than IDs. I've included IDs so that you may style things individually (see the CSS) but they are not required.

        The .closedialog button must be present within its proper form; this allows the dialog to actually be closed once it is opened.

        Repeat the HTML as necessary for however many modals you need. The aria-controls attribute should match the ID of the dialog element. The aria-labelledby and aria-describedby attributes should also match with those found inside the modal. The IDs can be changed without affecting the code, but the class of the buttons and dialog elements should stay the same.

         

        No changes to the javascript need to be made unless you are changing the classes of the .opendialog and .closedialog buttons found in the HTML. If for whatever reason you do change them, remember that they should stay as class names and that the class identifier (.) must be included. The dialogelement variable should not be changed under any circumstances. The open/close button variables can be found towards the BOTTOM of the script as the following:

        var openclass = '.opendialog';
        var closeclass = '.closedialog';
        
        

        The javascript only needs to be included once on your webpage/board wrappers. Jcink users, place it under the copyright.

    • 532 views Last updated

      • Posted in Thread Trackers
      • Responsive
      • Type: HTML
      • Description:

        Simply provide this tracker with a list of threads that you want to track, and it will automatically stay up to date and show you who posted last and whether it's your turn. Note that it will only show threads that the person viewing the list is allowed to see, so you can safely use this tracker to track faction threads in a public ooc area, for example. You can post this tracker multiple times in the same thread for different characters, or you can list all your character's threads in a single instance of the tracker.

         

        The settings for your character/site are all in the first <script></script> block, to configure the way it works or adjust it to work on a specific site/skin - you may need to edit those but you shouldn't need to touch anything else (if you're comfortable with css you can fiddle with those bits). Feel free to PM me if you can't get it working on your site.

         

        This uses the skin's default link and text colours, so it works on both light and dark themes. It will adjust to any screen width, and will work in jcink's default mobile mode as well.

         

        Settings:

         

        Thread List - This is where you tell it which threads to track by listing the thread IDs (eg if the url of the thread includes showtopic=73 or t=73 then the Thread ID is 73). You can have any number of sections in the tracker, each specified as "Section Name": [threadID, threadID, threadID], and the sections separated by commas inside the {}. You might like to organize your threads by character, or by event threads vs 1-on-1, or whatever works for you.  If any section name contains the words "On Hold" or "Closed", it will not include the last poster for that thread or flag whether it is your turn.

         

        Character Names - When not using the Previous Poster setting below, the tracker will assume that it is your turn if the last poster is not any of the characters in this list. If you leave this blank, it will use the name of the account you use to post this.

         

        Previous Poster - if your site does strict posting order, you can use the Thread ID and the name of the character who posts before you; the tracker will only show that it is your turn if the last poster in that thread is the one who specified here. If you leave this commented out, or for any threads not in this list, the tracker will show it is your turn any time you are not the last poster.

         

        Classes - for themes/skins not based on the jcink default theme, you will likely need to change some or all of these. If any of the sections of the tracker don't show up (It should show thread title, forum/location, thread description, last poster's name, and last post date), then right click on that element of the actual page/post, and click Inspect Element. Find the closest wrapping element with a class or an id, and change the appropriate line to that. For class names, include a period in front of the class name, if you are referencing an id, you will need to put "[id=whatever_it_is]" instead.

         

        For example:

        1467800567_ScreenShot2019-09-25at12_44_49PM.png.1b47297c1795a29a3b1202a91662834b.png

        Here, the post date is wrapped in an <a> tag that does not have a class, but that is inside a <span> with class="ttPost_date", so  you would need to change const Post_Date_Class = ".postdetails"; to const Post_Date_Class = ".ttPost_Date";

         

        Note: for the forum/location, use the navigation bar's class or id rather than the <a> tag's if it has one, because the script is looking for the last link inside the specified element.

    • 410 views Last updated

      • Posted in Thread Trackers
      • Responsive
      • Type: HTML
      • Description:

        This will automatically show all the threads that you have participated in (with a single account), and show you who posted last and whether it's your turn. Note that it will only show threads that the person viewing the list is allowed to see, so you can safely use this tracker to track faction threads in a public ooc area, for example. The person looking at the tracker also needs permission to use the site search, so e.g. if guest searching is turned off the tracker will not show anything if you are logged out.

         

        On the jcink default theme, or skins based on it, this requires NO configuration if you post it from the account you want tracked. However, there are settings for your character/site are all in the first <script></script> block, to configure the way it works or adjust it to work on a specific site/skin - you may need to edit those but you shouldn't need to touch anything else (if you're comfortable with css you can fiddle with those bits). You can post this tracker multiple times in the same thread with different characters. Feel free to PM me if you can't get it working on your site.

         

        This uses the skin's default link and text colours, so it works on both light and dark themes. It will adjust to any screen width, and will work in jcink's default mobile mode as well (though it won't show the thread descriptions there).

         

        Settings:

         

        Character Name - if you are posting the tracker from an ooc account, put in the account name of the character you want to track. If you leave this blank, it will track the threads posted by the post author. Depending on your site theme, though, you may need to specify this regardless.

         

        Previous Poster - if your site does strict posting order, you can use the Thread ID (eg if the url of the thread includes showtopic=73 or t=73 then the Thread ID is 73) and the name of the character who posts before you; the tracker will only show that it is your turn if the last poster in that thread is the one who specified here. If you leave this commented out, or for any threads not in this list, the tracker will show it is your turn any time you are not the last poster.

         

        Ignore Forums - you can use this to remove threads in ooc forums from the tracker, if you wish.

         

        Locked Thread Definition - this may need to be changed if the skin has has changed the locked thread icon/macro. If the tracker isn't properly sorting threads into the open/closed section, do any search on your site that you know will turn up at least one locked thread (make sure to show results as threads not as posts). Then, right-click on the locked thread icon/indicator, and hit Inspect Element. You are looking for what type of tag it is, and one unique attribute that will distinguish it from other thread status icons.

         

        Here's the default jcink template:

        95668098_ScreenShot2019-09-25at3_48_28PM.jpg.d992a18c5571f6044b133e6bcf02fd04.jpg

        The lock icon is an <img> tag with a pretty unique title="Closed", so the default setting is:  Locked_Thread_Definition = "img[title=Closed]";

        We could just as easily use the alt text instead: Locked_Thread_Definition = "img[alt=Closed]";
        If there were no thing else usable, we could also also use the src attribute.

         

        Here's a theme that uses fontawesome icons:

        1900934438_ScreenShot2019-09-25at3_27_09PM.jpg.aae90b9042ef0b48ef028fffdf5e0e64.jpg

        The lock icon is an <i> tag with class="fas fa-lock", so we change the setting to: Locked_Thread_Definition = "i[class='fas fa-lock']"; (there's a space, so we have to put it inside single quotes.)

        Since we're using a class name, we can also use a plain css selector: Locked_Thread_Definition = "i.fa-lock";

         

        Next Tracker Delay - avoids search flood control when using this multiple  times in the same thread. This sets the delay in seconds for the second tracker to run the search, the third tracker will wait twice this number from the time the page loads, etc. If you get a flood control error, it should hopefully tell you how long you need to wait between searches, or you can just play around with it until it works.

         

    • 437 views Last updated

      • Posted in Staff Templates
      • Responsive
      • Type: HTML
      • Description:

        A simple top menu box thing with space for pop up modals, staff, events, announcements and links. As ever, use it however you like, edit however you like, and it sure would be nice if you provided a link back to RPG-I so that other people can use the code if they want 🙂

    • 598 views Last updated

      • Posted in Other
      • Not Responsive
      • Type: HTML
      • Description:

        CSS dropdown menu that is accessible to screen readers and keyboard users. Tab through the dropdown link and the links will show up as if hovered over. Shift-tabbing will always tab to the previous top-level link if already focusing a top-level link.

         

        I've only coded in support for the first level of a dropdown, though duplicating the structure of the nested list and adding appropriate CSS should be fairly straightforward as the CSS is labeled. Too lazy to code in a specific mobile style for this, may update later.

         

        The dropdown will work in all major browsers. IE lacks :focus-within support, but the hover will still work. Edge will need the dropdown links hovered over in order to tab through them, otherwise it will skip to the next top-level link. Nothing to be done about either case except to use a modern browser that supports the newest CSS standards.

         

        Working example and code can also be found on my codepen, here.

    • 540 views Last updated

      • Posted in Other
      • Responsive
      • Type: HTML
      • Description:

        Makes use of tabindex, z-index/opacity and :focus-within for a hover that is responsive on mobile and accessible to screen readers and keyboard users. Add your own styling to the .container and .hover classes.

         

        Aside from typical hover usage, the hover can be tabbed onto (for keyboard/screen reader users) and the content will remain showing until tabbed out of. Clicking inside the hover area will produce the same effect, and allow you to move the cursor on or off the hover area without losing sight of what's contained within.

         

        Working, more styled version on my codepen, here.

    • 464 views Last updated

      • Posted in Other
      • Responsive
      • Type: HTML
      • Description:

        These CSS radio-button tabs will turn into an accordion at lower screen widths. They are accessible to screen readers and keyboard users as well via the tab key (tab onto and off of the active tab), and arrow keys to switch between tabs.

         

        DoHTML friendly, multiple instances can be used on the same page. No javascript used. Follow the comments in the CSS to change styles. Codepen is here.

    • 790 views Last updated

      • Posted in Application Templates
      • Responsive
      • Type: HTML
      • Description:

        This is a basic Application template with special details off on the left and the big details on the right. Can be very free-form. This is a more basic alternative to the Summertime Fun template.

    • 731 views Last updated

      • Posted in Application Templates
      • Responsive
      • Type: HTML
      • Description:

        A simple application template with a cover photo. The recommended size for the cover photo is about 500 tall. 300 will show on desktop and more on mobile but can be adjusted with help.

    • 500 views Last updated

      • Posted in Post Templates
      • Responsive
      • Type: HTML
      • Description:

        A summer colors post template for the Summertime Fun Challenge.  You can modify text size pretty easily.  The title should be kept to two lines.  If it's short enough it will stay within the circle.  Works on mobile as well with a slightly different format.  Works nicely with or without an image.  If you do not want the image, just take away the <img> tag.    Make sure to place images within the <p>.  All images will be max 100px and rounded.  They will resize automatically and constrain to proportions.  Create line breaks using <br>.

    • 278 views Last updated

      • Posted in Staff Templates
      • Responsive
      • Type: HTML
      • Description:

        A colourful guidebook with a list of links on the left that you click on to display the relevant information on the right. Includes a space for additional links if necessary. As always, you're welcome and encouraged to edit anything!

    • 571 views Last updated

      • Posted in Staff Templates
      • Responsive
      • Type: HTML
      • Description:

        This application is designed with profile apps in mind. It's kind of scary looking from an end user perspective! Remember to replace hard coded information with the appropriate variable for your site!

         

        JCINK

        Custom Profile Field: <!-- |field_X| -->

        Other variables can be found here.

         

        MYBB

        The template you need to edit is Member Templates > member_profile

        Custom Profile Field: {$userfields['fidX']}

        Name: {$formattedname}

        All posts/threads links: {$findposts}/{$findthreads}

        Avatar: {$avatar}

         

        You are more than welcome to change things up! Check the code to see where you should put variables and other instructions.

    • 447 views Last updated

      • Posted in Plotters
      • Responsive
      • Type: HTML
      • Description:

        This shipper includes a sidebar for you to keep track of your current relationships with characters, including silly little icons that appear automatically. The mark up includes a description on how to add more relationship categories.

         

        You are free to edit however you like or adapt for other uses.

    • 463 views Last updated

      • Posted in Staff Templates
      • Responsive
      • Type: HTML
      • Description:

        Pretty basic Who's Who list with user's avatar and the ability to color each character name row with the characters colors. Can be used on both dark and light themes without problems. All colors can be changed and so can the font.

    • 377 views Last updated

      • Posted in Staff Templates
      • Not Responsive
      • Type: HTML
      • Description:

        A who' who template.  Click on the player's name to expand or hide their list of characters.  Both the character names and images include a link to the player's application/history or whatever you would like.  The images are automatically converted to black and white and turn to color on hover so will work best with color images.  The template resizes depending on browser & window size.

         

        Javascript modified from W3Schools.

         

        Please note that despite the preview, the formatting for the button font should remain the same as in the attached images that show it in use on a jcink forum.

    • 379 views Last updated

      • Posted in Staff Templates
      • Not Responsive
      • Type: HTML
      • Description:

        For the admin that wants something easily customisable and likes a list that's just that, a list.

         

        Edit to match your theme!

    • 604 views Last updated

      • Posted in Staff Templates
      • Responsive
      • Type: HTML
      • Description:

        This responsive top box comes with many links, many places to put your information, and space for image links - such that you might have for "for the month" winners or for your staff.



×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.