Codex

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 🙂

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.

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.

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.

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.

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.

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

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!

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.

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.

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.

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.

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

Edit to match your theme!

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.

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.

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

A tabbed code, originally made to show off old threads in an easy way! If you have other ideas for it, it can be used for those too! ❤️ Please review!

Two images, tabbed posting template! ❤️ Please review!