Guide to CSS Formatting

Contributors: LieutenantDebug, Damion Otter, TJ Trewin, Xanthuss, and Ademal

CSS customisation is a Guild Feature!
If you want to use it, please consider supporting World Anvil!

How To Use This Guide

Not everyone will need or want everything in this guide. It is intended as an exhaustive point of reference for the usage of CSS in World Anvil, so read the core information section, and then look for the section in the outline that seems most relevant to what you’re looking for. Using Ctrl+F to find what you’re looking for is also encouraged.

If you are new to CSS, be sure to read through the What Is CSS? section to get a primer on CSS. Alternatively, you can simply choose one of the premade themes to give your world a whole new look without having to touch the CSS yourself. Find the list of themes in your World Configuration settings, under the "Themes & Styling" tab.

If you're already familiar with at least the basics of CSS and are here to learn ways to use it in World Anvil, skip ahead to the Core Information section.


What Is CSS?

Cascading StyleSheets (CSS) is how webpages are styled. It’s a simple language that defines style rules that change how elements on a webpage look. A CSS sheet may have several rule sets defined in it. A rule set can be thought of as a section of text with two main parts: the selector and declaration block. The selector specifies which element(s) on a page are to be affected by this rule set, and the declaration block is a set of declarations that define what parts of those elements we want to change (things like the font color, height, border, etc).

There are several online resources you can reference to learn more about CSS and how to use it. I suggest starting with W3Schools, it does an excellent job of incrementally introducing each step in learning CSS, and you can go as far as you would like in the lessons. They also have an excellent CSS Reference section too for simply looking up properties and such.


Core Information

Inputting CSS

Any CSS that you write or copy from this guide can be placed in either of the following locations:

  1. In your world configuration, under the "Themes & Styling" tab, in the World Presentation text box.
  2. In the presentation view of your world, there should be a floating palette icon in a white square on the left side of the screen. Click or tap that, and a CSS editing box will slide out.

Both of these locations affect the Presentation view of your world (i.e. the public-facing, rendered view of your articles, timelines, etc). There is an additional box in the world configuration for placing CSS that you want to use in the editing view of your world. These changes are only visible to you while on a editing or configuration screen, and this option is available so you can make tweaks to improve your workflow as you see fit. Any CSS snippets in this guide that are intended for editor changes (as opposed to the aforementioned presentation view) will be marked as such.

The Rules

There are just a couple things to keep in mind when playing around in the fun sandbox that is CSS. Certain elements of the site are off-limits to user CSS manipulation, primarily World Anvil-specific assets. These include but are not limited to:

  • Any elements not contained within ".user-css", ".user-css-presentation",  ".user-css-extended", ".map-context-user-css", ".user-css-secret", or ".user-css-rpgblock". The exception being that you may change the background only of ".user-css-presentation".
  • The main navigation bar
  • Comments and metadata may not be hidden or drastically altered in readability
  • World Anvil assets within ".user-css" (and the related classes) such as the Follow button or social media buttons.

If you have any question about what is allowed to be modified, please ask a Development Gremlin on Discord


Some characters or words will get removed from user-inputted CSS for the purpose of security. This is to fully safeguard against any possibility of script injection. We recognize this can be a little inconvenient when trying to accomplish very specific things with CSS, but it is done so for the peace of mind of all World Anvil users.  

  Words and characters to avoid:
    • single quotes and double quotes
    • "<" and ">"
    • "body"
    • "container"
    • "script"
    • "footer"

Using the Examples

Most of this guide will present examples of CSS. Some will be empty rule sets (with just a selector and no declaration block) that just show you how to target a certain kind of element, while others may have some declaration blocks in addition to the selector. Most of these latter examples will indicate which of the properties you can or should change to your taste.

There are also a small handful of CSS snippets that are provided as-is, not so much as examples but are intended to be copied wholesale into your CSS configuration to achieve a specific effect. If you are unfamiliar with CSS, it is recommended that you not try to tweak these snippets if you want to achieve their stated effect.

Working With themes

World Anvil provides a handful of free themes that you can apply to your world. Themes are a premade set of CSS rules created by community members. The examples in this guide assume that you do not have a theme applied. If you do have a theme, these examples may not work as expected, and the selectors or declarations may need to be changed to correctly override the theme's default styling. Oftentimes themes will make use of CSS Variables, so it is recommended for ease of modification that you modify the value of the variable to achieve your desired effect rather than override where the variable is used.

Additional Information

For those of you familiar with CSS frameworks, World Anvil uses Bootstrap 3.3.


CSS Guide



One of the most common ways to give your world a little of your own visual flavor is to adjust the body text of your world. This can involve changing size, color, and font.

Body Text

To target the basic text shown in your articles, use the following CSS selector. Substitute your own values to the right of the colon on each property.

Body Text - Click to Expand
.user-css p,
.user-css-extended p {
    color: #333333;
    font-size: 16px;
Special Text

There are many other types of text found in World Anvil articles, such as bold text, italicized text, or link text. Headings are covered in the next section.

Each of the following types of text are provided with their default values, so when you copy them into your world CSS, change the properties you wish to change, and remove the rest.

[b]: Bold Text - Click to Expand
.user-css b {
    font-weight: 700;

[i]: Italicized Text - Click to Expand
.user-css em {
    font-style: italic;

[u]: Underlined Text - Click to Expand
.user-css u {
    font-decoration: underline;

[sub]: Subscript - Click to Expand
.user-css sub,
.user-css sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
.user-css sub {
    bottom: -0.25em;

[sup]: Superscript - Click to Expand
.user-css sub,
.user-css sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
.user-css sup {
    top: -0.5em;

[small]: Small Text - Click to Expand
.user-css small {
    font-size: 85%;

[url]: Links - Click to Expand
.user-css a,
.user-css a:focus {
    color: #962626;
.user-css a:hover {
    text-decoration: underline;
    color: #d80b07;


Headings can be slightly confusing at first to work with in CSS, since a BBcode [h1] will actually be rendered as an HTML <h2>, a BBcode [h2] will be rendered as an HTML <h3>, and so on down the line.
The reason for this is that the HTML <h1> is reserved for the article title itself, and well-formed HMTL pages should only have one <h1> element on the page. Thus, the other headings all get effectively bumped down.

Article Header - Click to Expand
.user-css .article-title h1 {
    font-family: Alegreya SC, serif;
    font-weight: 700;
    font-size: 42px;
    padding-top: 10px;
    padding-bottom: 15px;
    line-height: 0.9em;
    margin-top: 20px;
    margin-bottom: 5px;

[h]/[h1]: Header - Click to Expand
.user-css h2 {
    color: #900b0b;
    font-family: Alegreya, serif;
    font-weight: 700;
    font-size: 28px;
    padding-bottom: 2px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #a08264;
    text-transform: uppercase;
    line-height: 1.3em;

[h2]: Header2 - Click to Expand
.user-css h3 {
    color: #591717;
    font-family: Alegreya SC, serif;
    font-weight: 700;
    font-size: 26px;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 1.3em;

[h3]: Header3 - Click to Expand
.user-css h4 {
    color: #4e392ffc;
    font-family: Alegreya SC, serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0;
    line-height: 1.3em;

[h4]: Header4 - Click to Expand
.user-css h5 {
    color: #4e392ffc;
    font-family: Alegreya SC, serif;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 0px;
    line-height: 1.3em;


Changing the font of your article text or headings is a popular way to more radically change your world's look and feel. There are two methods by which you can import fonts for use in your CSS. The first is to use Google Fonts, which is generally more straightforward, but can be limited in selection. The second, using your own fonts uploaded to GitHub, allows for unlimited font potential—so long as you own the font yourself.

Method 1: Google Fonts

Importing Fonts is a bit more complicated than it normally would be doing CSS on your own.
As we are not allowed to use apostrophes ( ' ) or quotation marks ( " ) we had to make some adjustments.

Step-by-step instructions can be found below. For this example we will be using Cinzel, which is used in all the headings on the site’s default theme. You can use any font found on Google Fonts.

  1. Finding the font you want

    You can use the filters and search field on the right side of the page to help narrow down your search to find the right font.
    IMPORTANT NOTE: Using this method, any fonts with the word "script" in their name will most likely not work on World Anvil. The word "script" will actually be in their google font URL, which will get stripped out as explained in the section on security above.

    Google Fonts Step 1
  2. Find the link

    Hit the + button next to a font to add it to your "cart". Then click on the floating box in the bottom right that says "1 Family Selected" to expand it. Copy the URL as seen in the screenshot below.

    Google Fonts Step 2
  3. Paste that link into a new tab

    Google Fonts Step 3
  4. Copy the "LATIN" version

    font-face {
        font-family: 'Cinzel';
        font-style: normal;
        font-weight: 400;
        src: local('Cinzel Regular'), local('Cinzel-Regular'), url( format('woff2') ;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
  5. Delete the parts in bold

    Remove the quotes around the font name, the two "local" references in the "src" property, and the "format" reference also in the "src" property.

    font-face {
        font-family: 'Cinzel';
        font-style: normal;
        font-weight: 400;
        src: local('Cinzel Regular'), local('Cinzel-Regular'), url( format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;

    The end result should look like this:

    font-face {
        font-family: Cinzel;
        font-style: normal;
        font-weight: 400;
        src: url( ;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
  6. Paste this result into the CSS field in your world's Configuration

    Google Fonts Step 4
  7. Using your new font

    To use your new font, it's now a simple matter of setting the "font-family" property of any element to the name of the new font. This should match the "font-family" property in the bit of code you just pasted in.

    .user-css h2 {
        font-family: Cinzel, serif;
Credit: Damion Otter and LieutenantDebug
  Method 2: Hosting Fonts on Github
This option is particularly useful for Asian fonts, that tend to have large CSS font-face sets. (Some can be more than 1000 lines of code.) Using the Google Fonts option may make the little CSS editor in WA slow. Hosting your font on github, can help with that.
What you'll need:
A legally obtained font file
A github account
A link from
A bit of CSS

Our example:

Codex - github hosted font example.png
You can see the Japanese symbols for the character's name highlighted in blue.  


- Sign up for a github account   - Create a repository (Basically a folder for your stuff. See link for more info.) And upload your font files. (It won't hurt to upload any license files for proof you have the right to use the font.)   Here's how to create a repository.   If you want a folder in that repository, here's how to do that.   - Go to the github page for your file. It should look like this:
Codex - font on github.png
  - Open a text file. Past this CSS code into it:
font-family: YOUR FONT NAME;
font-style: normal;
font-weight: 400;
You can change the options in the code above for say bold if you like. For more information on the font-face options see this W3 Schools page.   - Copy the URL at the top of the github page and paste it into the page.
Codex - raw.githack url
This allows the file to be retrieved as the proper type, in our case a font file, instead of a plain text file.   - Copy the url under 'Use this URL in production' from   - Paste it into the text file with the font-face CSS code, replacing 'YOUR RAW.GITHACK URL'. Also replace the 'YOUR FONT NAME' with a name that makes sense to you, usually the name of the font. (Times, Helvetica, Noto, etc.)   Ensure you don't have any illegal characters such as quotes. (See Security for more info.)   - Copy the code into your world's CSS.
Codex - pasting font-face css into CSS editor for github hosted font.png
Now you're ready to use your font!  

Using your new Font

To use your new font, it's now a simple matter of setting the "font-family" property of any element to the name of the new font. This should match the "font-family" property in the bit of code you just pasted in.  
.user-css h2 {
  font-family: Cinzel, serif;

Sunrunner4kr's Notes

FYI 86% of modern browsers support WOFF so that's your safest option. If you want to cover everything, then you need a few different types for the different browsers: WOFF, OTF/TTF   And you should have a web safe font as a fall back in case the user's browser doesn't render the font you supplied.   WOFF is compressed for the web, which is why it's better.   Bear in mind every time you call a font over CDN(GitHub) it takes time. So the more fonts you call, the slower the web page will render.
Credit: Amy Winters-Voss and Simon Edge
  Additionally, you can find a selection of fonts almost every computer has on this page.


Article Elements

World Background

To change the background of your world (specifically the area to the left and right of your article), simply place the direct URL of an image (that you've uploaded to World Anvil) inside the parentheses in the following code example. The direct link should end in ".jpg" or ".png", depending on the type of image you uploaded.

Please note that this will affect all pages on your world.

World Background - Click to Expand
.user-css-presentation {
    background: url(*DIRECT LINK TO IMAGE GOES HERE*) ;

If you would like this image to stay static as viewers scroll, use this snippet instead:

Static World Background - Click to Expand
.user-css-presentation {
    background-image: url(*Direct link to an image*) ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
Credit: Arka  
Page Background

You may also change the background of the "pages" of your article. This is the background of the center column on which your article text and sidebar sit, as well as the metadata and comment sections.

As above, place the direct URL of an image (that you've uploaded to World Anvil) inside the parentheses in the following snippet.

Page Background - Click to Expand,
.user-css-extended .page {
    background: url() ;


The best background images are small images, .jpg or .png, that are seamless texture images. Though single picture images may look great as the background behind your articles they often come out looking terrible when viewed on small screens such as phones or other handhelds. Luckily for us, a quick google search for something like "Gray Seamless Texture" or "Paper Seamless Texture" comes up with large amounts of copy-right free results.


This is the default styling for sidebar panels. As with the text snippets, if you paste this into your CSS, remove any properties you don't change. Of course, you can always add your own properties if you wish.

Sidebar Panel - Click to Expand
.user-css .panel,
.user-css-extended .panel {
    background-color: rgba(255, 255, 255, 0.5) ;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05) ;
    box-shadow: 0 1px 1px rgba(0,0,0,.05) ;

The following is a snippet of code that causes your sidebar to follow the reader down the page, potentially useful for longer articles so that readers don't need to scroll back and forth to access the reference information in the sidebar when needed.

NOTE: This snippet also adds a few properties to visually contain the content that floats, namely a border, background, and box-shadow. You are encouraged to customize this or remove it to match your world's theme if you so wish.

"Sticky" Sidebar - Click to Expand
media only screen and (min-width:992px {
  .user-css .article-content .row .col-md-8 + .col-md-4 {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    max-height: 100vh;
    overflow-y: auto;
    border: 1px solid gray;
    background: lightgray;
    box-shadow: 2px 2px 6px rgba(50, 50, 50, 0.5) ;
    z-index: 1050;
Credit: LieutenantDebug
Back To World Button

This is the link in the top left of an article that takes the reader back to your world's homepage. Again, the CSS provided here is the default, so remove any properties you don't change.

Back to World Button - Click to Expand
.user-css div .backtoworld a {
    position: absolute;
    padding: 7px 10px;
    padding-left: 13px;
    background: #b30000;
    color: #fff;
    box-shadow: 3px 2px 1px #000000;
.user-css div .backtoworld a:hover {
        background-color: *Choose a color slightly lighter or darker than the above background color for best effect.*
Menu Ribbon

This is an example snippet of how you can customize the ribbon in the top right of an article that brings down the menu.

Menu Ribbon - Click to Expand
.user-css .menu-control {
    background: green;
    height: 60px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: filter 0.2s, color 0.2s, box-shadow 0.2s;
.user-css .menu-control:hover,
.user-css .menu-control:focus {
    filter: brightness(0.85) ;
    color: #000000;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.5) ;

World Homepage

World Vignette

This selector is for the paragraph of text that appears on your world's homepage.

World Vignette - Click to Expand
.user-css .heading .subheading {
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
Article Boxes

These selectors are for customizing the appearance of the article panels on your world's homepage or on category pages, such as your recent or featured articles.
The second ruleset here is for controlling the appearence of the boxes on hover.

Article Boxes - Click to Expand
.user-css .article-panel,
.user-css-extended .article-panel {
    padding: 10px;
    background-color: #f9f9f7;
    border: 1px #d4d2c5 solid;
    margin-bottom: 15px;
.user-css .article-panel:hover,
.user-css-extended .article-panel:hover {
Map Boxes

This works the same as the article boxes, but for the maps on your front page and category pages.

Map Boxes - Click to Expand
.user-css .map-box,
.user-css-extended .map-box {
    padding: 10px;
    background-color: #f9f9f7;
    border: 1px #d4d2c5 solid;
    margin-bottom: 15px;
.user-css .map-box:hover,
.user-css-extended .map-box:hover {
Book Covers

Book covers can be a little bit complicated when it comes to CSS. In this section we'll break down the covers into their five individual parts. We'll also address how the covers appear when a user hovers over them.

1. Wrapper Element

This is the element that holds the other three. This is where the size and positioning of the cover as a whole is defined.

The default CSS is provided below, but as always you should remove any properties you don't change. It is recommended that you don't change the height or width unless you know what you're doing.

Book Cover Wrapper - Click to Expand
.user-css .bookcover {
    margin: 10px;
    width: 300px;
    text-align: center;
    position: relative;
    height: 400px;
    background: black;

2. Link Wrapper

This element also wraps over the other three, but it defines where the user is directed when the cover is clicked. By default, the text color of the contained elements is defined here.

Book Cover Link Wrapper - Click to Expand
.user-css .bookcover a {
    color: black;
.user-css .bookcover a,
.user-css .bookcover a:hover {
    text-decoration: none; 

3. Image

This is of course the image itself of the cover. The only special thing done here by default is that the opacity of the image is reduced on hover. This is what effectively "darkens" the image, since the background color of the wrapper element is black. So if you would like to instead give the image a blue hue on hover, for example, you would change the background color on the wrapper element (shown above). If you want to make the effect stronger or lighter, adjust the opacity fraction shown in the snippet below.

Book Cover Image - Click to Expand
.user-css .bookcover a:hover img {
    opacity: 0.35;

A common thing to add to hover effects here is to add a transiion, so that the image darkens (or changes to whatever color you chose for the background) gradually, rather than instantaneously. Simply copy in the below CSS to add this. NOTE: We recommend adding identical transitions to the excerpt and booktitle so the effect matches.

Book Cover Image Transition - Click to Expand
.user-css .bookcover a img {
    transition: opacity 0.25s linear;

4. Excerpt

This is the bit of text that appears over the image when you hover over it. The default CSS is provided below for tweaking if you so desire.

Book Cover Excerpt - Click to Expand
.bookcover .excerpt {
    display: none;
.bookcover a:hover .excerpt {
    display: block;
    position: absolute;
    top: 10%;
    width: 200px;
    left: 50px;
    color: white;
    text-align: center;

5. Title

This is the ribbon towards the bottom with the book's title on it.

Book Cover Title - Click to Expand
.user-css .bookcover a .booktitle {
    position: absolute;
    left: 0;
    top: 75%;
    background-color: white;
    padding: 10px;
    text-transform: uppercase;
    font-weight: bold;
    max-width: 200px;
    text-align: left;
.user-css .bookcover a:hover .booktitle {
    background-color: #962626;
    color: white;



These are selectors for styling the scrollbars that appear on scrollable elements, including the entire page. NOTE: These only work in certain browsers (such as Chrome).

Scrollbar - Click to Expand
.user-css ::-webkit-scrollbar,
.user-css-extended ::-webkit-scrollbar {
.user-css ::-webkit-scrollbar-track,
.user-css-extended ::-webkit-scrollbar-track {
.user-css ::-webkit-scrollbar-thumb,
.user-css-extended ::-webkit-scrollbar-thumb {
.user-css ::-webkit-scrollbar-thumb:hover,
.user-css-extended ::-webkit-scrollbar-thumb:hover {
Credit: Ademal


Quote Boxes

The default CSS for quote boxes is provided below.

Quote Box - Click to Expand
.user-css blockquote {
    background: rgba(234, 233, 226, 0.97) ;
    padding: 20px;
    margin: 10px;
    border-left: 10px maroon solid;
    font-size: 1.2em;
    line-height: 1.5em;
    font-family: CrimsonText, serif;
.user-css blockquote .author {
    display: block;
    font-size: 0.8em;
    font-style: italic;
    text-align: right;
    color: rgba(0, 0, 0, 0.3) ;

Horizontal Dividers

A horizontal divider is what appears when you use [hr] in your BBCode. Typically it appears as a single solid line spanning the width of the page. To change its color, simply change the color in the CSS below.

Horizontal Divider - Click to Expand
.user-css hr {
    border-color: #906d13;

However, this element is quite configurable. Some prefer to hide the line altogether and use a custom image instead. Use the CSS below as a template, and be sure to change the height to match the vertical height of the image you choose. Also, you will usually want to pick an image with a transparent background.

Horizontal Divider (Image) - Click to Expand
.user-css hr {
    border: none;
    margin: 0;
    height: 50px;
    background: url(image-url.png) center no-repeat;
    background-size: contain;


This is the set of selectors to use for customizing your tooltips, which are the small blocks of text that appear when you hover over certain parts of an article, such as a link to another article.

Tooltip - Click to Expand
.user-css .tooltip-arrow,
.user-css-extended .tooltip-arrow,
.user-css-worldmenu .tooltip-arrow {
    border-top-color: #C9B800ee;
.user-css .tooltip.left .tooltip-arrow,
.user-css-extended .tooltip.left .tooltip-arrow,
.user-css-worldmenu .tooltip.left .tooltip-arrow {
    border-left-color: #C9B800ee;
.user-css .tooltip.bottom .tooltip-arrow,
.user-css-extended .tooltip.bottom .tooltip-arrow,
.user-css-worldmenu .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #C9B800ee;
.user-css .tooltip.right .tooltip-arrow,
.user-css-extended .tooltip.right .tooltip-arrow,
.user-css-worldmenu .tooltip.right .tooltip-arrow {
    border-right-color: #C9B800ee;
.user-css .tooltip .tooltip-inner,
.user-css-extended .tooltip .tooltip-inner,
.user-css-worldmenu .tooltip .tooltip-inner {
    background: #423C00ee;
    border-color: #C9B800ee;
    color: #EAE9DC;
Credit: Sierra Brown


Below is the default CSS for the boxes in which secrets are contained, when they are revealed on the page.

Secret - Click to Expand
.user-css-secret {
    padding: 10px 14px;
    background-color: #08080814;

Below is a change you can make if you wish to make your secrets appear seamlessly within the article.

Seamless Secret - Click to Expand
.user-css-secret {
    padding: 0;
    background-color: transparent;


By default, images appear as a block (meaning they create new lines before and after themselves), and with 10px of padding on all sides. There are a number of common ways to customize images, including giving them a border, a drop shadow, or removing the padding. Below is a sample set of CSS that does all three. Tweak the coloring and sizing to your liking, or remove parts of it if you only want one or two of those effects.

Tweaked Image - Click to Expand
.user-css-image-thumbnail {
    padding: 0;
.user-css-image-thumbnail img {
    border: 4px solid gray;
    border-radius: 2px;
    box-shadow: 3px 3px 7px #333;

A handy tool when changing the look of images is the fact that tags you assign to an image show up as CSS classes. This means you can target your CSS to change only images with a certain tag (the exception being the padding change, as that affects the image container, which does not receive the image's tags). So using the above example, we could split up our effects into two separate CSS rulesets, each targetting a specific tag. If we want an image to have just a border, we add the #border tag. If we want it to have a drop shadow, we give it the #drop-shadow tag. Of course, an image can have any combination of those tags, and will receive the appropriate CSS changes.

Tweaked Image Using Tags - Click to Expand
.user-css-image-thumbnail img.border {
    border: 4px solid gray;
    border-radius: 2px;
.user-css-image-thumbnail img.drop-shadow {
    box-shadow: 3px 3px 7px #333;


Panels are most often found in the sidebar. By default they appear as a light transluscent box with rounded corners. They are very customizable. The default CSS is provided below.

Panel - Click to Expand
.user-css .panel,
.user-css-extended .panel {
    border: 0px solid;
    border-radius: 10px;
    background: #ffffff60;
    box-shadow: 0 0 10px #44444420;
    -moz-box-shadow: 0 0 10px #44444420;
    -webkit-box-shadow: 0 0 10px #44444420;
.user-css .panel .panel-body,
.user-css-extended .panel .panel-body {
    padding: 15px;


If you would like to make credits appear on hover instead of by default, you can use this code. By inserting an image that can be hovered on, the appearance of a down arrow is created - prompting a viewer to read credits if they would like to know who made an image.   Panel - Click to Expand
.user-css .artist-credits {
background: transparent;
line-height: 0px;
.user-css .artist-credits:hover {
font-size: 17px;
line-height: 20px;
transition: all 0.3s;


"What does this button do, Dexter?" Well, Dee-Dee, that's a highly customizable piece of CSS equipment right there, you can change cool things like size, font, color, hover effects...NO DON'T PUSH THAT DEE-DEEEEE—

Below is the default CSS for .btn-primary, which is the base class for most, well, primary buttons. The first set of rules defines their normal appearance, the second set defines what changes when they're active, the third set is for when they're being hovered over, and the final set is for when they're both clicked on and hovered over (which is much more common than the second set).

Button - Click to Expand
.user-css .btn-primary,
.user-css-extended .btn-primary {
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    background: #8c0a0a;
    border: 0;
.user-css .btn-primary:active,
.user-css-extended .btn-primary:active {
    background-color: #691313;
.user-css .btn-primary:hover,
.user-css-extended .btn-primary:hover {
    background: #b4141e;
.user-css .btn-primary:active:hover,
.user-css-extended .btn-primary:active:hover {
    background-color: #000000;


Many of the above sections will or can apply to the Metadata section (found at the bottom of every article, before the comments). If you notice that some CSS is being applied to the main body but not the Metadata section, try using both .user-css and .user-css-extended as selectors instead of just the former. This section covers some metadata-specific CSS.

Below is the default CSS for the active tab of meta data. This is usually just the regular meta data, but if you have secrets for the article for example, that may be selected instead.

Metadata Active Tab - Click to Expand
.user-css-extended .nav-tabs a {
    font-family: Alegreya SC, serif;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 800;
    text-transform: uppercase;
    background: #b4141e;
    border: 0px solid #524242;
    color: #f0af32;
    border-radius: 0;
    margin-right: 0;
    box-shadow: none;

If you wish to change the look of all tabs here, not just the active tab, simply remove ".active" from next to "li" in the CSS selector, and then change the properties as you see fit.


Here is a list of handy selectors with their default CSS to make it easier for you to customize your timelines.

Timeline Title - Click to Expand h1 {
    font-family: Alegreya SC, serif;
    font-weight: 700;
    font-size: 42px;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 15px;
    line-height: 0.9em;
    margin-top: 20px;
    margin-bottom: 5px;

Timeline Event Panel - Click to Expand
.user-css .timeline li .timeline-panel {
    margin-top: 50px;
    width: 44.5%;
    float: left;
    background: #404e5d;
    border: 1px solid #13181d;
    padding: 20px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) ;

Timeline Milestone - Click to Expand
.user-css .timeline .milestone {
    background: rgb(234, 233, 226) ;
.timeline .milestone p {
    padding-top: 3px;

Timeline Center Line - Click to Expand
.user-css .timeline:before {
    background-color: #800000;

Timeline Center Line Markers - Click to Expand
.user-css .timeline li .tl-circ {
    background: #2d353d;
    color: #fff;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border: 2px solid #fff;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
.user-css .timeline li .tl-circ.important {
    border-top-right-radius: 0%;
    border-top-left-radius: 0%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;

For the following, its recommended that you change only the colors, unless you know what you're doing.

Timeline Arrows - Click to Expand
.user-css .timeline li .timeline-panel:before {
    border-top: 15px solid transparent;
    border-left: 15px solid #13181d;
    border-right: 0 solid #13181d;
    border-bottom: 15px solid transparent;
.user-css .timeline li .timeline-panel:after {
    border-top: 14px solid transparent;
    border-left: 14px solid #404e5d;
    border-right: 0 solid #404e5d;
    border-bottom: 14px solid transparent;
.user-css .timeline li .timeline-panel.noarrow:before,
.user-css .timeline li .timeline-panel.noarrow:after {
    display: none;
    border: 0;

Timeline Colors

This list of selectors is pared down to make it easy to change just the colors on your timeline. They are grouped by their default color, so you can change them a group at a time to tweak the color palette to your liking.

Timeline Reds - Click to Expand
.user-css .timeline .timeline-entry-milestone {
    border: 8px RGB(110, 110, 110) solid;
.user-css .timeline .timeline-entry-milestone .header-icon {
    border: 8px RGB(80, 90, 100) solid;
    color: RGB(80, 90, 100) ;
    background-color: #ffffff;
.user-css .timeline .major .timeline-panel{
    border-top: 8px #b93a3a solid;
.user-css .timeline .major .header-icon {
    border: 8px #b93a3a solid;
    color: #b93a3a;
    background-color: #ffffff;

Timeline Yellows - Click to Expand
.user-css .timeline .important .timeline-panel {
    border-top: 8px #e2b021 solid;
.user-css .timeline .important .header-icon {
    border: 8px #e2b021 solid;
    color: #e2b021;
    background-color: #ffffff;

Timeline Greens - Click to Expand
.user-css .timeline .minor .timeline-panel {
    border-top: 8px #0f800d solid;
.user-css .timeline .minor .header-icon {
    border: 8px #0f800d solid;
    color: #0f800d;
    background-color: #ffffff;

Timeline Teals - Click to Expand
.user-css .timeline .trivial .timeline-panel{
    border-top: 8px #148192 solid;
.user-css .timeline .trivial .header-icon {
    border: 8px #148192 solid;
    color: RGB(50, 50, 120) ;
    background-color: #ffffff;

Fixing event icons

If you have used CSS to change the font size of your worlds, the event icons might not be centered in their circle. In order to fix that and reset the font size of the icons only, you can use the following code:  
.user-css .timeline .header-icon {
    padding: 9px;
    font-size: 16px;
CSS snippet written by Xanthuss.  

Section and Container Tricks

Sections and containers are a Grandmaster Feature!
If you want to use it, please consider supporting World Anvil!

This section lists a few handy tips and tricks that the community has used to take advantage of the highly flexible [section] and [container] tools. If you're unfamiliar with sections and containers, they are BBCode that allow you to place any CSS class you wish on inline or block elements, respectively. Check the Guide to BBCode Commands for more information.

Inline Spoilers
Credit: Rinaldo Bijker

Change the colors as you wish to fit your theme. After inputting the following CSS, simply wrap a spoiler like so to make it in-line:

[section:inline-spoiler][spoiler]Hello World|Click to Expand[/spoiler][/section]
Inline Spoiler - Click to Expand
.user-css .inline-spoiler {
    background-color: black;
    color: transparent;
    margin: 0 3px;
    cursor: default;
.user-css .inline-spoiler:hover{
    background-color: transparent;
    color: #A00000;

Table of Contents

  1. How To Use This Guide
  2. What Is CSS?
  3. Core Information
    1. Inputting CSS
    2. The Rules
    3. Security
    4. Working With Themes
    5. Additional Information
  4. CSS Guide
    1. Text
      1. Basics
        1. Body Text
        2. Special Text
      2. Headings
      3. Fonts
    2. General
      1. Article Elements
        1. World Background
        2. Page Background
        3. Sidebar
        4. Back To World Button
        5. Menu Ribbon
      2. World Homepage
        1. World Vignette
        2. Article Boxes
        3. Map Boxes
        4. Book Covers
      3. Other
        1. Scrollbars
    3. Components
      1. Quote Boxes
      2. Horizontal Dividers
      3. Tooltips
      4. Secrets
      5. Images
      6. Panels
      7. Credits
      8. Buttons
    4. Metadata
    5. Timelines
      1. Timeline Colors
    6. Section and Container Tricks
      1. Inline Spoilers


I followed the instructions in CSS guide on how to change fonts, but Google Fonts page looks different (I.e. can't view latin versions or unicode ranges) what am I doing wrong? Users who don't use conventional browsers (Chrome, Firefox), might not be able to view unicode ranges thus the selected font won't read in CSS styles sheet. The simplest solution is to copypaste the unicode ranges from an example font given in this CSS Guide.

Articles under Guide to CSS Formatting


Please Login in order to comment!
19 Feb, 2018 02:20

I've made a regex pattern match and replacer on to easily prepare @font-face's:   Simply copy your font-face into the text box where the aldrich and exo2 ones are, then copy from the bottom text field.

20 Feb, 2018 14:30

Daaaammmmn! That's one amazing article <3 World Anvil Approves

1 Jun, 2018 20:18

Fantastic. Thanks so much for doing this!

31 Jul, 2018 22:49

super helpfull!

1 Aug, 2018 18:06

Glad to hear it!

23 Sep, 2018 08:02

How do i apply themes? Usefull article otherwise!

19 Oct, 2018 07:09

The custom font guide no longer works, due to rawgit closing down. I tried using, but the gets stripped and the url becomes instead of

11 Dec, 2018 03:53

This should be addressed in the new update! Thanks for letting us know.

21 Mar, 2019 22:24 does work, however. It circumvents the issue of the "js" chop. Just make sure you use the rawcdn version, as it doesn't have any traffic limits or throttling.   Happy worldbuilding!

23 Oct, 2018 04:12

Thanks for your work! Helped a lot.

24 Dec, 2018 06:12

Great article! Just an FYI, though. In step two of how to access the CSS editor you say to click on the cookie icon. The icon is actually a palette, not a cookie (like a painter's palette, ala Bob Ross: It's used in a lot of design applications and similar contexts to indicate design or customization related features.

3 Jan, 2019 21:11

Ah, great catch, thank you!

28 Dec, 2018 19:55

Is there a way to change the default header image? I like the WorldAnvil leather strip thing that every page defaults to, I just want it to be a different color to match the rest of my theme. I know I could just make the new image and do it under the Design section of my articles, but I'd like to just change it once for my entire world rather than having to do it for each individual article.

28 Dec, 2018 20:40

You don't need CSS for that, actually! Under your world's Configuration > Themes and Stylings there's a dropdown to set your default.

28 Dec, 2018 22:03

So prompt! Thanks for the heads up.

7 Mar, 2019 17:26

For some reasons the hr-snippet doesn't work any more. Otherwise: amazing article. Oh... article... the article-header wasn't working for article headers, but for your world title.

7 Mar, 2019 17:50

If you are working from a premade theme you may have to add an important! after the attribute to make it stick.   For example:  

.user-css hr {
  border-color: #906d13 !important;

7 Mar, 2019 17:52

I wish I did, but I'm trying to make my own from scratch. I had to play around with the fonts (which will change to standard if I refresh...) and the hr ist constantly trying to annoy me. It won't change it's color. With and without important... :(

7 Mar, 2019 18:01

Oh, I figured it out. You want to set both border-top instead, and if that doesn't work, both border-color and border-top!   If you open up the inspector on the <hr> tag you can see here that the color is being set in two spots, and it looks like the border-top setting takes higher presidence. Border-color works but it's being overwritten by bortder-top.

7 Mar, 2019 18:08

Thank you, that saved me some hours!

7 Mar, 2019 18:13

Well, at least it would, if it worked... doesn't help.

7 Mar, 2019 18:24

This might be easier with a live conversation. Care to hop over to the discord so we can figure this out together?

7 Mar, 2019 18:36

I'm at work right now, discord is disabled. But I'll be there on sunday evening, if I can't figure it out until then.

7 Mar, 2019 18:44

I found a way, as it seems. .user-css-presentation works.

19 Apr, 2019 19:37

First of all, a very helpful article! Thanks a lot for putting the works in. Second, a question: Does anyone know the pointer for the World Title (the name of my world), the category names (in the Table of Contents) and/or for the article titles inside the article boxes (the ones featured and recent articles are displayed in)? I've been refraining from using themes so all my CSS works without problems, but in the default "theme", these parts have this odd red-ish brown colour that is both hard to read and does not fit the style at all. Thanks in advance and again, thanks for making this <3

19 Apr, 2019 20:46

Here's the selectors;

.user-css .world-title {
  color: red;
.user-css .category-list li a {
  color: red;
.user-css .article-panel .heading
  color: red;
  We also have a CSS channel in the discord if you'd like to join us sometime!

19 Apr, 2019 21:30

That's exactly what I needed, thanks for the quick reply!

18 May, 2019 09:16

Hello! Thanks for the awesome guide!   I wonder if this a good place to ask, but I try to. I'm new here but I have done css for a good while (use to be a professional webdesigner). I've been putting my world pages of nice and fancy, when I figured I had a teensie issue with element ".worldmenu-inner" inside the "#topmenu". Since #topmenu is with .user-css call, I figured doing things with it would be a-ok, and if it is, please inform me and I fix it. xD Any way, it seems .worldmenu-inner has automatic background color that has been set by using the id of the parent element. Only way I seem to be able to do something about it is to give background color of .user-css .worldmenu-inner a !important rule.   As I'm still learning the rules of the land (and english isn't my first language) is there something I'm fundamentally breaking if I use important-rule in this case, or is it fine? Otherwise I edit my css to fit with the white background of the element. I just wanted to check I ain't breaking any rules!

18 May, 2019 17:34

From how you're describing it, you're fine. :)

13 Jul, 2019 05:02

The original article was wonderful and helped me greatly, but I love the additions here--especially seeing some of the things several of you helped me within #guild-css-help now showing up here!   Thanks so much.   You know, the platform itself is enough to keep most people here, but the support, encouragement and friendships I'm building is enough to make me a lifetime friend. You are all wonderful people. THANK you for this article...I hope it get's added to as time goes on and WA grows to be a world phenominon.   Cheers!

13 Jul, 2019 17:50

That's very sweet of you ♥ I'll pass that on to the rest of the codex team!

3 Sep, 2019 00:38

Thank you for the amazing article! If I might suggest one thing, it would be to clarify the fact that to modify the elements (headers, links...) in metadata and comments, you have to use the user-css-extended version, and the plain user-css version only takes effect in the main body, because I was confused for some time on how to target those elements. It's not clear for people lacking experience what exactly does the -extended part do, especially with how the metadata block seems to imply it should take effect automatically everywhere: "Many of the above sections will or can apply to the Metadata section (found at the bottom of every article, before the comments). This section covers some metadata-specific CSS." Perhaps just add the info there :) All in all though, great ressource!

3 Sep, 2019 17:29

Hi! Thank you for the feedback <3   I've added a small clarification in the section you suggested. How does it look?

3 Sep, 2019 17:35

Looks perfect, thank you! :)

17 Sep, 2019 21:44

Great article was a lot of help.   But I am still have a problem that I can't find anyway. Is there a way to ensure that all your Header pictures always has a set size no matter the original size of the img?

12 Oct, 2019 15:56

The list of words stripped from css should probably be updated to include `footer`

17 Oct, 2019 04:16

I can't seem to figure out how to change the world background image. Do you know if this is because I'm using one of the themes that was already available? I have copied the CSS from the section above and pasted the image I would like to use, including JPG, but I can't manage to get it working.

17 Oct, 2019 17:12

If you drop your code here wrapped in [code][/code] I can try to help. ^ _^

17 Oct, 2019 20:53

I actually figured it out, i wasn't getting the direct link from the images website. But thank you for responding to me!

15 Nov, 2019 22:20

Link in the fonts section leading to is broken. missing a dot after www

15 Nov, 2019 23:39

Good catch! Fixed. actually!

24 Nov, 2019 12:41

May we have a list of the CSS for the fonts that have already been incorporated to the default themes on this site? I'm assuming that those would be easier to access, right?

2 Dec, 2019 01:12

This is a great article that allowed me as a complete CSS noob to make significant changes to a theme, so thank you! One odd issue I'm having, though - the fonts change correctly when I use the editor to change them, but then when I load any new page, they revert back to the theme's fonts. Weirdly, as soon as I open the editor to make any change, the fonts update to display correctly - but it doesn't stick! Color and other changes are sticking, just not the fonts, and the !important tag does not help. Anyone have any idea what I'm doing wrong?

2 Dec, 2019 18:10

Nevermind, I figured it out! I somehow missed the part of the Google Fonts tutorial where you have to delete the single quotes around the font names. Once I fixed that it worked perfectly!

3 Dec, 2019 20:26

Great article! Are there some restrictions on how it accesses the font files?   If I reference an OFL font from e.g. -   it works. however if I upload the font file to my own bitbucket account, it doesn't -   If I run either url in my browser, the font is instantly downloaded..however on WA, the font doesn't seem to be set. Thanks!

4 Dec, 2019 12:38

the Timeline page, doesn't use the back to world button, instead it uses nav-strip, which I couldn't see in this article. So thought people might find this useful:   .user-css .nav-strip { background: #709c9e; }

8 Dec, 2019 13:40

Is there any way to use a theme for a specific page, like WorldEmber for pages I submit to that challenge, without changing my world's theme?

10 Dec, 2019 16:52

There is not

20 Dec, 2019 12:00

If I use the code above to change the body text, the changes are visible correctly. But if I insert an image in the text, the text after the image isn't formatted anymore. Do I have to add something else in this case?

20 Dec, 2019 21:39

Try wrapping the text in

and let me know if that fixes it.

20 Dec, 2019 21:44

Try wrapping the bad text in [p][/p]. Let me know if that fixes it.

29 Dec, 2019 01:13

I can't change my article/world title color, font, or anything. I know I've done it before, but I don't remember how, and I don't see anywhere on here how to do it.

29 Dec, 2019 01:56

Nevermind. Figured it out via inspect element.

29 Dec, 2019 02:58

Can anyone help me with organization relations? I've tried pasting exactly what I get from inspect element, but even then, it doesn't work. Sample below:   .user-css-presentation .relation .relationScore { background: rgba(0, 12, 35, 0.5 box-shadow: 0 0 1px 1px rgba(0, 12, 35, 0.5 }

30 Dec, 2019 16:31

For more detailed code help it would be easier if you joined the discord! Mind hopping over there?

24 Jan, 2020 04:47

Is there a way to manipulate the size of the global cover image and article cover images at the top of the page? Whenever I use an imported image as an article cover it conforms to the size of the image rather than the other way around.   Thanks!

17 Feb, 2020 09:04

A very helpful article, thank you!   Are there any tips for customizing the map presentation mode as well? I managed to set the background for ".map-context-user-css", but I would also like to make the rest of it match the overall style of my world. What classes am I allowed to use for that?

18 Feb, 2020 04:27

.user-css-map-sidebar might be what you're looking for for the sidebar! You can use anything contained within those.

18 Feb, 2020 20:11

Yes, that's exactly what I was looking for! Thank you!