Preamble:
I’m gonna get straight to the point. CSS is difficult. It doesn’t help that there isn’t a theme guide, on here or on the SCP wiki. It doesn’t help that there aren’t straightforward online CSS resources that don’t take hours and hours of work. It doesn’t help that when you ask how to write CSS people answer ‘it’s just trial and error, you’ll figure it out,’ resulting in you following their advice and ending up spending 10 hours scouring different themes’ code, trying to reverse-engineer the secret of changing the colour of your footnotes. It doesn’t help that Wikidot actively works against your efforts to create a theme, by stuttering, removing edits, lagging and being generally shitty.
All of these things don’t help, but hopefully, this will.
You’ll notice the title reads ‘Great’ rather than ‘Good’. This is because on The Wanderers’ Library, we don’t settle for mediocre themes that simply alter the look of the main site. We want themes that drip with vibes, enhancing the flavour of a page from a simple salty taste to a complex blend of sweet and sour with chilli undertones.
Jokes aside, you may be here from a different website or you may be a WL purist, but either way, the approaches to theme-making in this guide are not exclusive to this site and are written with the purpose of creating a great-looking CSS theme in general. Hopefully, it can be of use to everyone.
That being said, the following sections’ code have been written for this site — The Wanderers’ Library — where the site’s base theme (Dustjacket) is an offshoot of Black Highlighter, whilst the SCP wiki’s base theme is sigma-9. I’ve tested this code on the WL and it works, but I haven’t tested it for the SCP wiki so if you’re looking for coding guidance on your SCP theme here, be warned.
If you have any problems making the theme, I’d advise joining the Wanderers’ Library discord and asking in #the-workshop. It’s much faster and more efficient for code exchange than wikidot dms/forums so, yeah.
Table of Contents:
You can do this table of contents in any order, but I have ordered it in the way I personally find most useful for creating a theme. I’d also highly recommend looking through our site’s themes, the SCP wiki’s themes, and even the Backrooms’ themes, just to get a taste of what is already out there.
Colour Schemes:
Despite being manipulated by CSS code, a theme is ultimately focused on visuals and is thus a work of art. As such, it’s good to identify the purpose of your theme early on. Making a theme is a big time investment; some questions to ask yourself before you begin are: is it for a series you’re writing, a canon, a singular article, or purely for aesthetics? Why do you want to make a theme for that thing? How would a CSS theme benefit/suit such a thing? It’s important to understand the purpose of your theme, so you can build the theme to complement that purpose. This goes beyond just colour schemes, but that’s what we’ll be focusing on here.
For example, if I wanted to write a series on someone exploring a jungle, I could go for some dark and light greens, with an accent of pink to represent some exotic fruit. If I wanted to write an article about a magic school, then colours like dark purple, dark blue, yellow, and black come to mind. If I wanted to create an aesthetic theme for any article about multiversal travel, perhaps a variety of different colours would work, representing the infinite range of worlds and lifestyles in the multiverse. If I wanted to write a poem about a city, I could choose a black, white and grey colour palette to represent the concrete of the city, as well as emphasise the narrator’s feelings of nostalgia and distance.
Additionally, it’s important to think about whether you want your theme to be a Dark or a Light Theme. A dark theme is one which uses mostly, well, dark colours, with lighter ones on top, such as the Vitalis Theme or the “Once Upon A Time” Theme, whereas a Light theme does the opposite. Dark themes usually go for a more immersive, powerful or even suffocating vibe — lending themselves to dramatic or dark stories. Light themes can do anything, really. It’s up to you.
Sometimes it’s difficult to choose a colour scheme. Making mood boards, looking at book covers and film posters, or simply searching the internet for images you like can really help.
Once you’ve thought a bit about this, you can go ahead and choose the colours you want to use. You can use this website or any equivalent to pick your colours. This website is really good for trying out colour palettes, and also has a contrast checker to make sure your colours are readable. It might be tempting to choose a wide range of colours, but limiting your palette is something I’d really recommend to keep the theme tonally focused and avoid too many colour clashes. Most good themes only use two main colours (excluding white and black), with a third optional accent colour for flavour. Take a look at the theme index in Hall One if you don’t believe me.
Also, feel free to come back to this one later if you’re not sure about the exact colours you want to use. When I make themes I tend to fiddle with my colours as I progress, and usually I start with the header — even before I start on actually implementing the topbar or body colours. However, you should definitely decide whether your theme will be Dark or Light before progressing to another section of this guide.
If you are sure, or simply want to experiment with colour, then let’s continue!
This section will cover the code for changing the main body colour, the text colour, the top bar colour (including dropdown boxes), the footer and licence area colours, and the scrollbar colour. Things like the sidebar, tabs, blockquotes and other miscellaneous stuff will come later.
For reference, here are the colours for the dustjacket theme. They are defined by RGB colour values, which are the sets of three numbers you see below (though you can use hex colour values if you prefer).
The following colours are labelled according to Black Highlighter’s variables, which dustjacket is based on. Therefore, every variable that controls any element you can see the colour of, from very noticeable aspects such as the body colour to elements you’ll only see once such as the outline colour of the Page Saved popup box, will be affected by changing these values. Thus, it’s more efficient to make a theme by changing these variables into the general colour scheme you want and then tinkering with the parts that don’t fit, rather than choosing the colour of every individual element from the ground-up.
For reference, or if you want to get more specific, here’s the full list of variables.
Paste this following code into your edit box. It won’t do anything yet, but it’ll be useful to edit later.
/* ===STANDARD THEME COLORS=== */
--white-monochrome: 252, 252, 252;
--pale-gray-monochrome: 173, 193, 177;
--light-pale-gray-monochrome: 255, 250, 215;
--very-light-gray-monochrome: 220, 230, 220;
--light-gray-monochrome: 130, 160, 135;
--gray-monochrome: 45, 70, 45;
--dark-gray-monochrome: 30, 55, 30;
--black-monochrome: 12, 12, 12;
--bright-accent: 255, 219, 90;
--medium-accent: 228, 180, 28;
--dark-accent: var(--dark-gray-monochrome);
--alt-accent: 221, 102, 17;Background Colour:
First we’ll do the background.
If you want a background image instead of a flat colour, as seen in Wanderers’ Depths Theme or Ghost Record Theme, you should still read this part.
If this is a Light theme, any light colours will work. White is obviously the default, but other light colours such as pastel green-blue, light grey, or off-white will do the trick too.
If this is a Dark theme, the same goes. Black as default; colours like dark grey, dark brown/orange, or dark purple also work.
Sometimes, pure white and pure black are too strong. Moving very slightly towards grey can make the background colour softer and easier on the eyes.
In order to implement your chosen colour, put your colour value in place of the ‘h, h, h’ below, and paste the whole thing into the edit box.
[[module css]]
#content-wrap {
background-image:
linear-gradient(to bottom,
rgb(h, h, h) 0%,
rgb(h, h, h) 100%);;
}
[[/module]]Once you’ve done this, you’ll notice that there remains a white gradient underneath the top bar, preventing the body from being a singular colour. This is an in-built feature of dustjacket, and in order to make theme-making easier later, just set this gradient to the same colour as the body colour by adding the ‘background-gradient-color’ variable below your ‘white-monochrome-variable’, like so:
[[module css]]
:root {
--white-monochrome: h, h, h;
--background-gradient-color: var(--white-monochrome);
}
[[/module]]If you actually do want a gradient below the top bar, there’s a section on that here, so just go along with it for now.
Main Body Text:
If you’ve chosen a Light Theme, you can ignore this part. However, if you’ve chosen a Dark Theme, you need to change your body text to white, though off-white may be preferable if pure white hurts your eyes.
Since the variable ‘—black-monochrome’ controls the main body text colour, we’ll need to change its colour value. Your code should look something like this: (the letters are placeholders)
[[module css]]
:root {
--white-monochrome: h, h, h;
--black-monochrome: z, z, z;
--background-gradient-color: var(--white-monochrome);
}
[[/module]]In order to change the body font, go on this website, search for a font you like, click on it, scroll down and find the variation of it that you like.(I chose a Light 300 because it wasn’t too thin.) Then, click the plus arrow.
Next, click the top right button ‘View Selected Families’, then click ‘@import’.
When adding a font, you need to do to things. Firstly, you need to import the font from whatever website it’s hosted on (in this case, google fonts). Secondly, you need to specify the font name and family. Below you can see an example of me importing a font called Montserrat.
[[module css]]
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
:root {
--body-font: 'Montserrat', sans-serif;
}
[[/module]]As you can see, the @import statement is outside of the ‘root’ pseudo-class. I’ve also had to define Montserrat’s font-family in addition to its font name.
You should be looking at something like this:
meant to be an image here
Go ahead and paste the relevant details into your code, and your body font should now be changed.
Top Bar:
Onto the top bar. We’ll start with the top bar’s background.
The majority of themes have the top bar’s background as a darker colour, with the top bar text a lighter colour on top. This is because the top bar acts as a visual divider between the main body and the header, so to make it dark is to create a visible contrast between parts of the page that serve different functions.
However, if you want to make the top bar blend more naturally into the page for whatever reason, go for it. The Gathers’ Gatherings Theme uses this to good effect; since the top bar background is light, there is no clear contrast, making the entire page feel like the grey of a newspaper.
The variable controlling the top bar background colour is ‘—dark-gray-monochrome’, however this variable also controls many other things. You’ll see. Don’t worry about these other things being changed for now, you can always control them individually later.
Now, for the top bar text. This is controlled by the variable ‘—bright-accent’. Change that variable to a colour that contrasts well with your background colour.
Hopefully your top bar looks alright so far.
Here are all the variables controlling the topbar and dropdown boxes. I wouldn’t recommend changing too much unless you really like customising everything. Good top bars usually use two or three colours; they’re designed for functionality, and adding too many clashing colours can interfere with that.
[[module css]]
:root {
--swatch-topmenu-border-color: stuff;
}
#top-bar {
--topmenu-category-color: stuff;
--topmenu-category-hover-color: stuff;
--topmenu-hover-border-color: stuff;
--mobile-topmenu-sidebar-button-color: var(--swatch-text-secondary-color);
--dropdown-bg-color: stuff, 0.9; /* dropdown bg color */
--dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
--dropdown-links-color: var(--swatch-text-secondary-color);
--dropdown-links-bg-color: 0,0,0,0; /* Transparent */
--dropdown-links-hover-color: var(--swatch-text-secondary-color);
--dropdown-links-hover-bg-color: var(--swatch-primary);
}
[[/module]]All these variables are named pretty intuitively. You’ll see some have a fourth value: this is for opacity, where 0 is transparent and 1 is completely opaque.
When you’re happy with how your topbar looks, you’ll realise some elements you’ve chosen have the same or similar colours. This is where variables come in handy.
If you want two or more elements to have the same colour, or if you want to ‘save’ a colour you like for later without having to remember the exact hex or rgb value every time you want to use it, you can use sub-variables for that.
Let’s say I chose a bright green, represented by the value ‘73, 230, 21’, for four of the above topbar elements. I think I may like to use this green later to keep elements of my theme consistently coloured. In this way, I can create a variable called ‘neon-green’:
:root {
--neon-green: 73, 230, 21;
}Now whenever I need that for an element, I can input the variable ‘neon-green’ instead of searching around for the exact value, like so:
--swatch-topmenu-border-color: var(--neon-green);Black Highlighter has a few of these sub-variables already, but editing these often creates blanket changes, which is good for quick theme making, but bad for customizability.
For reference, here they are: (including the little tooltip the BHL writers put in)
:root {
/* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
/* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
--swatch-secondary-color: var(--swatch-menubg-light-color);
--swatch-tertiary-color: var(--swatch-menubg-medium-color);
--swatch-alternate-color: var(--swatch-menubg-dark-color);
/* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
--swatch-text-secondary-color: var(--swatch-menutxt-light-color);
--swatch-text-tertiary-color: var(--swatch-menutxt-dark-color);
}The variable for changing the top bar font is ‘—UI-font’. Remember to import your font and define the font-family too! Bear in mind, this will change the UI font for the whole page, which includes the Options Buttons Text and the Sidebar Text.
Additionally, you can change the Title font using the variable ‘—title-font’.
Scrollbar:
The scrollbar should already look alright but if you want a specific look keep reading. The first piece of code controls the background of the scrollbar, whilst the second controls the scrollbar thumb. I’m only testing this on Google Chrome; I’ve heard the scrollbar can be stubborn on other browsers, but if you have Chrome this should work fine.
[[module css]]
::-webkit-scrollbar,
#side-bar:hover::-webkit-scrollbar {
background-color: rgb(var(--dark-gray-monochrome));
}
::-webkit-scrollbar-thumb,
#side-bar:hover::-webkit-scrollbar-thumb {
background-color: rgb(var(--medium-accent));
}
[[/module]]Page Options Buttons:(the ones at the bottom of the page)
Like the scrollbar, these should already look decent, except for the frontmost background colour. The ‘pale-gray-monochrome’ variable controls this, as well as some other stuff.
I’d recommend a colour slightly darker than the one you chose for your ‘bright-accent’ variable, although you could also choose the same colour as your ‘dark-gray-monochrome’. Or… you could not listen to me. That’s probably a good idea for all of these sections. If my method works, then great! But chances are you’ll run into problems along the way, so experimentation is encouraged.
Anyways, here’s the specific code for those customisability nerds:
[[module css]]
:root {
--ui-button-bg: var(--swatch-secondary-color);
--ui-button-txt: var(--swatch-text-tertiary-color);
--ui-button-hover-bg: var(--swatch-primary);
--ui-button-hover-txt: var(--swatch-text-secondary-color);
--ui-button-hover-outline: var(--swatch-primary);
}
[[/module]]Okay, go ahead progress if you’re happy, or even if you’re not — I often do the colours last. Though, be warned: the next part is difficult.
Header:
Header Image:
In my opinion, the header image is the most important aspect of a theme (besides the colour scheme of course), because it’s the first thing you see upon opening a page. It’s the part of the theme with the most space for creativity; you can do whatever you want with the header and somehow, so many themes waste this space. For example, the majority of themes on the SCP wiki opt for a simple recolour of another theme’s header or just choosing to have the header as a flat colour or gradient. In contrast, my favourite themes’ headers always set the tone for the theme in a creative and fun way.
Some examples of successful header images include:
- The Ad Astra Theme uses a beautiful NASA image to set the tone for a space-faring canon.
- The Aesthetic Theme uses 3D topographic lines on a pink background — a staple of the vaporwave aesthetic.
- The Foundation Theme uses concentric circles and a massive ALL CAPS title to give the theme an imposing, almost hypnotic feel.
- The REDTAPE Theme, uses clean-cut red lines plastered on top of a topographic map layout, giving it an official and important, yet classified vibe.
- The custom theme on The Man In The White Suit Hub has this awesome header image of tight-layered red and black lines. Feels futuristic and dangerous.
- The Calamity Theme uses a 65-second gif as its header image, simulating the passing of time which gives it a more slice-of-life feel.
Now imagine all of these themes with a flat colour gradient instead. Removes the personality, right?
Likewise, on our own site:
- The Wanderers’ Station Theme uses a NASA image to much the same effect as the Ad Astra Theme.
- The Ghost Record Theme uses a stylised image of a person’s surroundings to set the feel for a person exploring a country changed by the magical.
- The Gathers’ Gatherings Theme uses newspaper clippings for a series about Duke Gathers, a journalist.
However, some themes work great with a more simple header image:
- The Ad Abyssum Theme removes the top bar entirely, extending an orange gradient down the screen.
- The Ex Officio Theme has three simple blue lines. Clean, clinical, classy.
- The Y2K Theme uses a turquoise gradient put through a 90s filter.
- The Shattered Thoughts Theme has an image of space slowly fading into grey.
- The Blankstyle Theme doesn’t even have a header image!
A lot of themes understand the importance of a header image, but miss the mark, in my opinion.
- The Smell Of Smoke Theme has some original art, distinguishing it from other plain-header themes, but it tells rather than shows. Themes are all about vibes, and simply giving us a picture of a bunch of factories isn’t enough to make us feel the harsh and smog-filled atmosphere.
- The Newspaper Theme’s header isn’t bad — it has a clean fade in with some cool imagery, however it tapers off on the left side for no reason. It’s asymmetric and thus the top-left corner feels empty and wasted.
- The Queen’s Gambit Theme opts for a simple black header. It has no title and the focus is purposefully placed on the Black Queen’s logo. However, I think the logo itself isn’t interesting enough to carry the header. They’ve extended the header length too, subsequently increasing the logo’s size, which places even more emphasis on the logo. Despite all this, it doesn’t land for me. It’s a cool idea, but to me it looks more rudimentary and simplistic than minimalist.
You may have different opinions than me on these themes, and that’s good — it indicates you already have your own idea of what a good theme looks like. My emphasis on the importance of a header image is not me saying you should choose a header image as carefully as possible — on the contrary, I’d recommend experimenting with many different header images until you find one you like.
If you want to make a custom image for your header, go ahead! Don’t underestimate the powers of photo editing software. When making the Dreamers’ Library theme, I ran this image of space through a bunch of different photoshop filters, eventually settling on the dark and dreamy version you see can see here.
Similarly, when making the Motherboard theme, I found this cyberpunk-esque image of the Hong Kong skyline, cropped it and put a colour gradient over the top, resulting in this header which looks like a neon city.
My general advice for choosing a header image is something that looks nice, but is unintrusive; it doesn’t have a lot of contrasting colours or shapes and is easy to digest. Some themes use simple textures, some themes use images, some use original art. If in doubt, look online for a recurring pattern, touch it up, and use it as a header image.
Once you’ve created a header image you’re happy with (or simply want to test it out), you need to crop it to the correct dimensions. Since Wikidot will automatically stretch the uploaded image to the size of the header displayed on your device, it’s best to create an image similar to Wikidot’s header size in order to guarantee your image won’t be stretched too badly.
An image 2500 pixels wide and 250 pixels tall is a good compromise. Download this image for a template of how large that is.
Then, you’ll want to upload it to your theme’s page by clicking ‘Files’ at the bottom of the page. Next, right-click on the uploaded file’s link, click ‘Copy link address’ and paste it into the following code:
[[module css]]
:root {
--gradient-header: url(“header.jpg”);
}
[[/module]]The header should now be set to your chosen image.
Header Title:
The next thing I like to do is the header title. This can be the name of your series, a cool phrase, or anything you want really.
The code to change this from the default “The Wanderers’ Library” is:
[[module css]]
:root {
--header-title: “stuff”;
}
[[/module]]However, this’ll only change the wording of the title. If you want to change the title font, follow the same set of steps outlined in changing the font for the Main Body Text, but with the ‘—header-title: “stuff”’;’ variable.
If you want to change the colour of the header title, or make it glow or whatever, that’s slightly harder. I’d recommend visiting this link. Some parts are faulty, but overall it provides a good tool for experimenting with text shadow.
I used it on The Dreamers’ Library Theme to create a white, glowing title. Here’s the code template.
#header h1 a::before {
content: var(--header-title);
color: rgb(p, p, p);
text-shadow: d, d;
}IMPORTANT: You have to put this block of code after the ‘root’ pseudo-element, otherwise your font will not be changed to the one you want.
Above, ‘color’ actually controls the header title’s outline colour. You’ll inevitably want to change the header title’s background colour. Here’s the code:
#header h1 a::after {
background: rgb(p, p, p);
}Header Logo:
The header logo is less important than the header image or title, but it's still essential. At worst, it can provide a good contrasting background for your header title, as well as filling up some header space, whereas great logo will be emblematic of the whole theme. Here are some examples of good logos:
logos here
I’m not going to list all of them out here, you probably know what a good logo looks like. Once again, I’d suggest looking at the SCP wiki’s collection of themes. Every theme has a unique logo, so it’ll be a useful exercise to identify which ones are better and why.
Creating a logo can be daunting. I always opt for the 'modify someone else's logo' option because I'm not an artist (in the traditional sense). For example, I made the Dreamers' Library logo by finding a CC logo I liked and slightly editing it in Photoshop. Though, a good logo doesn't have to be complex. It can be as simple as a three pronged shape, or a stylised eye(I think this is a good logo in itself, even if it does have a bad contrast with both the background and foreground). Ideally, a good logo should match the vibe of the theme, and be mostly symmetrical.
Once you've created your logo, upload it to the sandbox and paste its link into the following code:
--logo-image: url("logo.jpg");If the logo isn't the size you want it, I'd recommend just making it bigger or smaller in your image editing software, rather than fiddling with the wikidot code. (As this can lead to adverse effects on different size devices.)
You should be done with the header by now.
Sidebar
Fonts
Tabs, links, hover color, top stuff like account and search bar. miscellaneous, etc
Going the extra mile.
This is the real juicy stuff. Don't think you need to use all these things to make your theme good. Sometimes a good theme is one that's simple and sleek — case in point: the Vitalis LLC Theme. It only uses one of the following things and is still my favourite theme on-site. I think if it added any gradients the whole vibe would be ruined.
If you're a theme creator and want to add some cool stuff here, leave a comment or message me on discord.
Background image
Gradient background
Gradient module rate.
Gradient sidebar.
Shaped tabs
Shaped option buttons
Shaped module rate
custom hr and fancyhr
custom topbody gradient