Guide to CSS Formatting

Contributors: LieutenantDebug, Damion Otter, TJ the WorldbuildingWizard, and Ademal The Narrator

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

Security

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. These can include characters or words such as single quotes, double quotes, "<", ">", "body", "container", or "script".

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

Text

Basics

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,
.user-css p,
.user-css-extended,
.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

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;
}

Fonts

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(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2) 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(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2) 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(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.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;
    }
  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
  [Second method temporarily redacted while under reconstruction. Mind the mess.]  

General

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.page,
.user-css-extended .page {
    background: url() ;
}

Tips

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.

Sidebar

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;
}

Other

Scrollbars

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 The Narrator

Components

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;
}

Tooltips

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.top .tooltip-arrow,
.user-css-extended .tooltip.top .tooltip-arrow,
.user-css-worldmenu .tooltip.top .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

Secrets

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;
}

Images

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

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;
}

Buttons

"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;
}

Metadata

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.

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

Timelines

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
.user-css.page-timeline 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 {
    top:0;
    right:0;
    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;
}

Section and Container Tricks

NOTE: Sections and Containers are a Grandmaster+ feature. If you would like to upgrade your membership to take advantage of these amazing highly flexible BBCode elements, please visit the Guild Membership page.

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;
}


Comments

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

I've made a regex pattern match and replacer on www.regexr.com to easily prepare @font-face's: https://regexr.com/3kvq6.   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 jsdelivr.net, but the gets stripped and the url becomes cdndelivr.net instead of cdndelivr.net

11 Dec, 2018 03:53

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

21 Mar, 2019 22:24

raw.githack.com 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: https://i.redd.it/74dvwxgjr5lz.jpg). 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. :)