The Gatekeeper's Planner

This is a blockquote, created by putting "> " at the start of each line.
More text


That's a horizontal rule

Nested blockquotes

And another1


a#history-button, a#files-button {
display: none !important;
}

So you've picked the aesthetic behind your theme or what story you want it to tell. You've decided if you want to have a light theme or dark theme. You've maybe even done some preliminary sketches of your design. Great! The next step is picking out specific colors to make a palette and your background and header images and stuff, right? Well, not quite.

There's more layers to why we pick out the color palette we do - color theory to pick out a palette that looks good, and accessibility to pick out colors and images that are accessible to all viewers to read. But what does it actually mean for colors to look good or for a page to be accessible? Let's take a deep dive into each.

"Good" Colors:

Colors have associations listed with them. These can compliment or hinder the message you're trying to tell with your theme. You would probably use green with a theme about nature, and grey with a color about technology or industry, right? Well, what if your nature theme was about mountains or your technology theme meant to look like the motherboard of a computer? Creative use of colors can "break" these common associations, but what colors are primarily associated with when you first think of them can be a good place to start when drafting up a theme palette from scratch. Here's a simple table with some more abstract ideas to get you started:

(table here)

Again, you don't have to abide by this list to a T, if you want to use a specific color, go for it! These are just to help you get started with some common vibes.

Okay, so you've picked some colors that match the associations that you want your theme to convey. Great! How do you make sure they go together?

Color theory comes into play here. Color schemes are common groupings of colors that tend to work well together.

(image here)

If you're struggling to pick a second color or an accent color, see what color scheme your palette is already falling under, and pick one that is apart of that scheme.

Some tools to help you out with this are the following websites (list here). Play around with them! Get used to looking at colors and note which groupings you like and why! Save them for future reference!

Accessibility:

So you have some palettes or colors in mind. The next step is how we put them together with the rest of our images and textures to make our theme. This is where accessibility comes into play.

Accessibility refers to how accessible your design is to the average viewer. What does that mean? Well, can your viewer read what's on the page? Is it an enjoyable experience, or a strained one? Are all navigational features present and viewable?

This might sound sort of silly, but remember, your theme is a compliment to things going on the site. While a work of art on it's own, aesthetics can not get in the way of having your page be readable. This means both the writing posted to the page, and the navigational site elements that make the site function.

The biggest thing to focus on here is contrast. Your text needs to be readable, and having colors with low contrast to their background (the colors are too similar to one another, either in hue or tone), creates accessibility issues and is not permitted on the site. Additional, too much contrast using neon or garish colors, can also create eye strain and be another accessibility issue.

Some tools to help you check the contrast of your colors are these websites. (List here.)

Other accessibility things, as pointed out on our sister site's guide, to consider are the following.
• Is this theme readable for colorblind people? (e.g. it employs bad color combinations like red + green which make it difficult for colorblind users to navigate the site)
• Does this theme hamper the ability to use screen readers? (e.g. it adds 'invisible' content which gets read by screen readers but not sighted users)
• Are the fonts it uses legible for all users? (e.g. the body font size is too small, the font itself is difficult to read)
• Could the theme induce a photosensitive epileptic seizure? (e.g. it has rapidly flashing colors or alternating patterns) If so, these elements must be removed.

In terms of site navigation, the page still needs to look like its apart of Library. Any navigational elements, the rating module, and translation module cannot be removed, hidden, or "broken". Do not break the structure or look of the site beyond realistic expectations - the site needs to be recognizable and readable.

Don't be afraid to change your colors or background textures or images or whatever to meet these accessibility requirements! In fact, you'll need to - usability needs to come before aesthetics. If you're really connected to an idea but don't know how to make it work functionally - feel free to ask! Workshop! Get feedback on your themes!

The Technical Side of Things:

Okay, you've learned the theory behind what makes a great theme. Here are the more technical considerations behind making your theme that you'll need to think about and include. A lot of this, again, comes from our sister site's css guide, which you should definitely give a read if you ever want to consider posting themes there as well!

Licensing:

All assets used in your theme have to be compatible with our site license. Additionally, the theme must be released under the same license as the rest of the site.

Basic functionality:

Your CSS theme must work well in the major browsers (Chromium, Firefox, Safari) and be at least functional in minor ones (IE 11 etc).

Your CSS theme must work well on mobile as well as desktop.

Bloat Code:

Every line of code should have a reason as to why it was included. You cannot have huge portions of code that do not do anything. So do not copy paste huge portions of our site's main Dustjacket theme and then just leave it there/don't do anything with it. Your code should contain very little except for what the theme is actually changing.

Hotlinking:

If uploading images to use on your theme page, they must be uploaded to the theme page itself. You cannot use discord links, imgur links, or even links to a sandbox to load the images. Localize everything to the theme page itself.

The exception to this is fonts - you can use Google Fonts for example. Ask a staff member when in doubt.

HTTPS

Your CSS theme must be completely functional on the HTTPS version of the site (https://wanderers-library.wikidot.com/). This means any internal @imports or url(…) references must refer to HTTPS URLs. For Wikidot, this means that the link takes the form https://wanderers-library.wikidot.com/local--files/SLUG-OF-PAGE/FILENAME.

Approval, Posting, and Deletion of Theme Pages:

Once you've gotten everything built, everything reviewed, and everything polished up, the next step is to present your theme sandbox to staff. Do your best to format it like other theme pages - show off the custom assets you've made, what tables and tabs look like, anything that commonly comes up or is used often. And tell us a little bit about your theme too! What inspired it, what it is for, anything like that.

Staff will then work with you to give you any final pieces of feedback, and will then walk you through the actual posting process. You will need to contact staff for the full instructions past that point - see how to contact staff in the orientation's meet the staff section, or through our discord chat's #help-desk channel. Staff will also let you know if it is best to create a theme component page (if the theme is going to be used more than once), or if it's best to host it locally on a page (if it's only going to be used on that page).

Similarly, for deleting themes already on the site, please contact staff for assistance on that process.

Other things to add later:

credit css policy page from wiki in author notes
create image examples
link websites
fix formatting
fonts?
patterns?

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License