When Dimitris said in a Twitch stream that people weren’t making much use of the possibilities for containers, it clicked for me. Challenge accepted. I wanted to learn to use CSS more to change the look of my world in World Anvil.

You cannot make me confess the exact amount of time since I did programming professionally, even under duress. Suffice it to say, it’s been long enough that I remember the hey day of CSS’s flashing text. shudder I’m not a CSS expert, or even a computer science major, just someone who loves to tinker and figure out puzzles. If something can be done, I’ll research and keep trying until I get it.

This is what makes World Anvil so cool. WA provides the perfect playground for guild members to learn about and see how CSS (Cascading Style Sheets) work for your worlds and characters. Once you start playing, I’m betting you’ll find yourself addicted to putting as much attention to beautifying and customizing your world as you do to your world building. So I offer this invitation:

Join me in dabbling with and customizing the look of our worlds in World Anvil.

Today I’ll be sharing a few basics on how to do this. If you’re already familiar with CSS in WA – stay tuned for future articles. There are some fun things coming up.

But My World Might Blow Up!?!?

No it won’t. Really! The worst that happens is that you take out the CSS elements you were trying to add. No detonations involved. But what if it does work? Then you did something cool. Huzzah!

Good Practices

Before I share how you how to fiddle with your world’s CSS, let’s talk about some good practices:

Setup a test world. Try things out there first. If you’re tinkering in your world and someone is trying to read there, it could be a little disorienting.
If you already have custom CSS, make a copy for safe keeping before editing or adding. Backups are good! If you accidentally edit over a section, you can retrieve it again. (I’m a big fan of Notepad++ for this – because I can tell it to highlight the language specific terms to make it easier for debugging. But there are other good ones out there. I’ve heard several recommendations of Visual Code Studio.)
If your CSS isn’t working, make sure all BBcode tags are properly closed. In other words make sure you have brackets ([ and ]) on either end of your BBcode tags and that each [tag name] has a [/tag name]. Broken BBCode leads to broken articles. In a future article I’ll share an easy way to check this.
Comment your code, so you can remember what each section did.
/* comments look like this */

Notes for Advanced Users Grandmaster +

You’re allowed to use the BBCode:

[container:your-class-name-here] [/container]

[section:your-class-name-here] [/section]

If you’re studying CSS you’ll find HTML in examples instead of BBCode. These BBCode tags basically correspond to <div> and <span> tags in HTML.

How to Add Custom CSS

How do you add custom CSS? The easiest way is to view an article you’ve already written and saved. Then click the little palette icon in the upper left of the window.

That will open the CSS editor, where you can select a theme for your world (or leave it blank to get the default theme) and paste your CSS code.

The page will update on the fly for you as you change your CSS code. When you get it how you like it, make sure to save!

When you save, the CSS will be stored in your world’s configuration, under Styling.

The Rules

FYI, we’re limited in what we can edit. See the Rules and Security sections of the CSS page of the WA Codex for detailed info.
It boils down to the things we can and can’t change and the characters/words we can use in our code.

The classes that we can change include:

.user-css-presentation is the furthest background. (Behind the article)

.user-css is the article itself. (Where all your writing is AND the cover.)

.user-css-extended is everything below the article. (Referred to often as “below the meta data”)

Using .page Is a big no no, as it affects everything on, well, the page.

There’s also .user-css-worldmenu which targets that dropdown world summary block that appears if you click the button on the upper right

–(Oneriwien from the #guild-css-help channel)

Now if you create a class (I.e. a container or section), that’s of course different. That’s your own CSS. Go ahead and modify that.

Things not to include in your CSS include single quotes, double quotes, “<“, “>”, “body”, “container”, or “script”. These are banned for security purposes.

Tools

You may want to learn about a few tools that will come in handy as you play with CSS in WA.

Inspect – This is one you already have. In a browser, right click on a page and choose Inspect (Different browsers have different wording. Try Inspect Element or similar wording if you don’t see ‘Inspect’ exactly.) For more info here’s a tutorial.
Color Picker – There’s a few tool options here. Often colors are described in hexadecimal format (#rrggbb <- they look like this, but with 0-9 or A-F). Don’t worry too much about that. You can copy and paste the values. If you want to know more about the hex codes for colors, read here. (Scroll down a little more than half way and read the section ‘What are HTML color codes?’)
- The first tool is an extension or add-on that allows you to use a dropper to find the color code for an item on a web page. I use one called ColorZilla.
- Another is an online color chooser that helps you pick colors that harmonize with each other. My fave of late is this one.

There are other tools we’ll talk about later on, but these should get you started.

Help! My CSS Didn’t Affect the Page After I Reloaded It or Went To Another Page

Did you include the banned characters or words that are listed in the link above to the Codex?

People often deal with this when pasting the code to use a specific font – which always has quotes in it when initially pasted. (This is one of the most common questions asked in #guild-css-help.)

Remove those characters, save, and try again. Next, check your BBCode for broken or unclosed tags. ([tag] needs [/tag].)

A Taste of CSS

Here’s a little project to get you started.

For Journeyman +

Let’s try changing the aloud box.

Open up the WA CSS editor and paste the following. Feel free to change the values.

.user-css  .aloud{ 
   font-size: 12pt; /* size of the font */
   border: 0; /* no border, if you want you can change it to say 2px */
   border-radius: 10px; /* round the corders of the box */
   background: #c9c9c9;; /* a light grey color */
   color: #333; /* text color - almost black in this example. You can use #rgb or #rrggbb format */
   padding: 10px; /* space around the contents of the aloud box */
   box-shadow: none; /* added to make it work with the Stranger World theme - 
       the shadow messed with the color otherwise - welcome to the finickiness of CSS */
}

Now if you add

[aloud] with some text inside [/aloud]

to your aticle, you’ll see your spiffy customized aloud box.

It should look like this.

Note: As of the writing of this article, the above code works with all themes.

For Grandmaster +

Let’s make our own container.

Open up the WA CSS editor and paste the following. Feel free to change the values.

.HLBox { /* I named my container Highlight Box for text I want to draw attention to */
   background: #173D54; /* the background color of the box - I liked this blue */
   color: #ddd; /* almost white text */
   border-radius: 10px; /* round the corders of the box */
   padding: 9.5px; /* space around the contents of the aloud box */
   margin: 0 0 10px; /* margin makes space around elements. In this case, I liked it 
                     to have a little more space at the bottom */
}

Now if you add

[container:HLBox]some cool text[/container]

to your aticle, you’ll see your spiffy container box.

It should look like this:

** If your CSS code changes don’t work for some reason, don’t be shy – ask in the Discord’s #guild-css-help channel. The people are friendly and I’ve learned so much from them.

Upcoming

In future articles, we’ll talk about fun CSS tricks you can do with your world and it’s contents. My posts will often focus on playing with containers and sections for Grandmasters on up. But there will be tweaks sprinkled here and there for all guild members.

And just an FYI – future articles should be much shorter. We just had to get the basics out of the way first. (I hear those sighs of relief!)

Go forth and tinker!

Go ahead. Try playing with CSS. Come hang out in the #guild-css-help channel to learn and ask questions, check out the World Anvil Codex, or read more about CSS.

Until next time fellow tinkers.

P.S. A more detailed container/section codex page is planned.