Jump to content

    • 6,730 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.

    • 5,796 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.

         

    • 3,630 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 🙂

    • 3,255 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.

    • 2,517 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.

    • 2,711 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.

    • 3,084 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.

    • 4,183 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.

    • 2,249 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>.

    • 2,358 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!

    • 4,502 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.

    • 3,299 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.

    • 3,931 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.

    • 3,166 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.

    • 2,906 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!

    • 3,878 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.

    • 4,086 views Last updated

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

        Have multiple site banners and don't want to create a code block for each one? This JavaScript adds a click event to each banner image that updates the bcg-code block with a new image url and alt text. The included CSS is very minimal and the HTML can be altered, though you should keep the bcg-banner and bcg-code wrappers as is. Images from Unsplash. Note:  As the preview and code tabs here parse differently, the preview might not look correct, but the code to copy will be right.

    • 3,296 views Last updated

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

        Entry for Coding Challenge Aqua. Mobile friendly template adjusts for no hover on smaller screens. 

×
×
  • 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.