Guide to CSS Formatting

Contributors: LieutenantDebug, Damion Otter, , Xanthuss, Ademal, and Amy Winters-Voss
rank-journeyman
 
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

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.  

  Words and characters to avoid:
  • single quotes and double quotes
  • "&lt;" and "&gt;", "<" and ">"
  • "body"
  • "container"
  • "script"
  • "footer"
  • "style" (can't be used in blocks)
  • Custom classes beginning with .sh are removed.
  •  

    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 &lt;h2&gt;, a BBcode [h2] will be rendered as an HTML &lt;h3&gt;, and so on down the line.
    The reason for this is that the HTML &lt;h1&gt; is reserved for the article title itself, and well-formed HMTL pages should only have one &lt;h1&gt; 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;
      }
      Important: don't forget the @ character before font-face!
    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 https://raw.githack.com/
    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.  

    Steps

    - 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-face{
    font-family: YOUR FONT NAME;
    font-style: normal;
    font-weight: 400;
    src: url(YOUR RAW.GITHACK URL) ;
    }
    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 https://raw.githack.com/ 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 raw.githack.com.   - 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.

    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;
      }
    }
    Important note: whan pasting the above code in your CSS, make sure to replace "[{]" for "{". Otherwise, it won't work.
    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

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

    Credits

    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;
    font-size:0px;
    line-height: 0px;
    padding:10px;
    margin:auto;
    content:url(https://www.worldanvil.com/uploads/images/838028c34d1bd01d4f908fa3e6582f6b.png)
    }
     
    .user-css .artist-credits:hover {
    content:normal;
    font-size: 17px;
    line-height: 20px;
    transition: all 0.3s;
    padding:20px;
    margin:auto;
    color:#000;
    }
    
     

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

    Tables

    You can use the following CSS code as a template to style your tables.

    Table CSS template - Click to Expand
    .user-css .table{
      background-color: pink;
    }
    .user-css .table td {
      background: transparent !important; 
    }
    .user-css table th,
    .user-css .table-striped th {
      
    }
     
    .user-css table tr,
    .user-css .table tr {
      
    }
    .user-css table tr:nth-child(odd),
    .user-css .table tr:nth-child(odd
      
    }
    
     

    Metadata

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

    Family Trees

    Below is the parent for the classes, where the variables used in all of them are set. You can change the variables for easy updates to the style of your family tree.

    Family Tree Variables and Parent for Classes - Click to Expand
    .user-css .rhea-family-tree {
      --rootNodeHeight: 600px;
      --rootNodeBg: #e1d9c03d;
      --rootNodeBorder: 2px solid #a296374f;
      --loaderBgColor: #a296374f;
      --loaderBorder: 1px solid #ccc;
      --loaderFont: 'PT Sans', sans-serif;
      --loaderTransition: all .8s ease-out;
      --minimumContainerSize: 3000px;
      --containerBg: transparent;
      --containerCursor: grab;
      --containerTransition: all .3s ease-in-out;
      --charRootNodeCursor: pointer;
      --charRootNodeSize: 120px;
      --charRootNodeBottomSize: 5rem;
      --lineWidth: 2px;
      --lineColor: black;
      --characterPortraitPadding: 5px;
      --characterPortraitOuterBorder: 1px solid #777;
      --characterPortraitInnerBorder: 1px solid #777;
      --characterPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
      --characterPortraitAnimation: portrait-frame 200s infinite;
      --characterPortraitBg: transparent;
      --characterPortraitWidth: 100%;
      --characterPortraitBorderRadius: 50%;
      --characterNamePadding: 6px;
      --characterNameBg: #aaa;
      --characterNameBorder: 1px solid #999;
      --characterNameBorderRadius: 5px;
      --colorRed: #D5382A;
      --colorDarkRed: #5C3A31;
      --colorRedBrown: #46271E;
      --colorBrown: #674534;
      --colorYellow: #AF945C;
      --colorCream: #FAF7EA;
      --colorDarkCream: #EFE6D4;
      --mainCharWidth: 120px;
      --mainCharPortraitPadding: 7px;
      --mainCharPortraitBg: transparent;
      --mainCharPortraitOuterBorder: 1px solid #777;
      --mainCharPortraitFrameBg: linear-gradient(90deg, rgb(197, 176, 38) 0%, rgb(222, 197, 15) 18%, rgba(244,243,220,1) 35%, rgb(228, 197, 10) 65%, rgb(236, 194, 100) 100%) ;
      --mainCharPortraitAnimation: portrait-frame 200s infinite;
      --mainCharSpouseWidth: 120px;
      --mainCharSpousePortraitPadding: 5px;
      --mainCharSpousePortraitBg: transparent;
      --mainCharSpousePortraitOuterBorder: 1px solid #777;
      --mainCharSpousePortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
      --mainCharSpousePortraitAnimation: portrait-frame 200s infinite;
      --mainCharChildWidth: 120px;
      --mainCharChildPortraitPadding: 5px;
      --mainCharChildPortraitBg: transparent;
      --mainCharChildPortraitOuterBorder: 1px solid #777;
      --mainCharChildPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
      --mainCharChildPortraitAnimation: portrait-frame 200s infinite;
      --mainCharGrandchildWidth: 120px;
      --mainCharGrandchildPortraitPadding: 5px;
      --mainCharGrandchildPortraitBg: transparent;
      --mainCharGrandchildPortraitOuterBorder: 1px solid #777;
      --mainCharGrandchildPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
      --mainCharGrandchildPortraitAnimation: portrait-frame 200s infinite;
      --mainCharParentWidth: 120px;
      --mainCharParentPortraitPadding: 5px;
      --mainCharParentPortraitBg: transparent;
      --mainCharParentPortraitOuterBorder: 1px solid #777;
      --mainCharParentPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
      --mainCharParentPortraitAnimation: portrait-frame 200s infinite;
      --mainCharGrandparentWidth: 120px;
      --mainCharGrandparentPortraitPadding: 5px;
      --mainCharGrandparentPortraitBg: transparent;
      --mainCharGrandparentPortraitOuterBorder: 1px solid #777;
      --mainCharGrandparentPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
      --mainCharGrandparentPortraitAnimation: portrait-frame 200s infinite;
      --mainCharGreatgrandparentWidth: 120px;
      --mainCharGreatgrandparentPortraitPadding: 5px;
      --mainCharGreatgrandparentPortraitBg: transparent;
      --mainCharGreatgrandparentPortraitOuterBorder: 1px solid #777;
      --mainCharGreatgrandparentPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
      --mainCharGreatgrandparentPortraitAnimation: portrait-frame 200s infinite;
    }
    
     

    If you wish to change the look of the different sections here are examples of how to do that with the associated classes. Change the properties as you see fit.

    Family Tree Lines - Click to Expand
    .user-css .rhea-family-tree{
      --lineWidth: 2px;
      --lineColor: black;
    }
    

    Family Tree Name Boxes - Click to Expand
    .user-css .rhea-family-tree {
      --characterNameBorder: 1px solid black;
      --characterNamePadding: 5px;
    }
    .user-css .rhea-family-tree .rhea-character-node .character-data .character-label{
      background-color: var(--colorCream) ;
    }
    

    Family Tree Frames - Click to Expand
    .user-css .rhea-family-tree{
      --mainCharPortraitFrameBg: linear-gradient(90deg, rgb(197, 176, 38) 0%, rgb(222, 197, 15) 18%, rgba(244,243,220,1) 35%, rgb(228, 197, 10) 65%, rgb(236, 194, 100) 100%) ;
      --characterPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
    }
    

    Family Tree (all of the above options together) - Click to Expand
    .user-css .rhea-family-tree{
      --lineWidth: 2px;
      --lineColor: black;
      --characterNameBorder: 1px solid black;
      --characterNamePadding: 5px;
      --mainCharPortraitFrameBg: linear-gradient(90deg, rgb(197, 176, 38) 0%, rgb(222, 197, 15) 18%, rgba(244,243,220,1) 35%, rgb(228, 197, 10) 65%, rgb(236, 194, 100) 100%) ;
      --characterPortraitFrameBg: linear-gradient(90deg, rgba(87,87,88,1) 0%, rgba(213,213,213,1) 18%, rgba(94,94,94,1) 35%, rgba(213,213,213,1) 65%, rgba(87,87,88,1) 100%) ;
    }
    .user-css .rhea-family-tree .rhea-character-node .character-data .character-name{
      background-color: var(--colorCream) ;
    }
    

    Interactive Tables

    Below is the list of supported variables for Interactive Tables. These are defined in the root, but can be set as per the first example.

    Interactive Tables Variables
    .user-css .thales-render {
       --ComponentBorder: 1px solid transparent;
       --ComponentPadding: 1em 1em;
       --ComponentBackground: transparent;
       --ComponentSplashBackground: rgba(0,0,0,0.4
       --TableContainerBackground: transparent;
       --TableContainerBorder: 0px solid rgba(99,99,99,0.5
       --TableBorder: 1px solid #999;
       --TableBackground: #fff;
       --TableHeaderBackground: #a83427;
       --TableHeaderBorder: 1px solid #222;
       --TableHeaderFontColor: #fff;
       --TableHeaderFontSize: 1.2em;
       --TableHeaderFontWeight: 700;
       --TableHeaderControlsColor: #ddd;
       --TableHeaderPadding: 10px 10px;
       --TableHeaderButtonBackground: #4f6d88;
       --TableHeaderButtonIconColor: #fff;
       --TableRowBorder: 1px solid #c0c0c0;
       --TableRowHoverBackground: #efefef;
       --TableRowRollBackground: #c9f2ff;
       --TableCellBackground: transparent;
       --TableCellFontColor: #222;
       --TableCellPlaceholderColor: #a0a0a0;
       --TableCellPadding: 10px 10px;
       --TableCellBackgroundHover: transparent;
       --TableCellBorder: 1px solid #ddd;
    }
    

    If you'd like, you can adjust some other properties of various elements, such as the Search, Roll Buttons, and the Table elements themselves (rows, cells, headers). Do note that some adjustments made to these elements have the potential to break the layout of the tables.

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

    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

    rank-grandmaster
     
    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
        9. Tables
      4. Metadata
      5. Family Trees
      6. Timelines
        1. Timeline Colors
      7. Section and Container Tricks
        1. Inline Spoilers
     

    FAQ

    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


    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.

    29 Mar, 2020 03:27

    Thank you

    Forgemaster Dimitris
    Dimitris Havlidis
    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!

    Milark
    Milan Schouten
    31 Jul, 2018 22:49

    super helpfull!

    1 Aug, 2018 18:06

    Glad to hear it!

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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.

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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;
    }

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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.

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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?

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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.

    Master ChrisJWalker
    Chris J. Walker
    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!

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    Master ChrisJWalker
    Chris J. Walker
    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!


    Can I have a cookie? | Come and snoop around Melyria
    18 May, 2019 17:34

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

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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!

    Your New Favorite Author
    My World | Subscribe | Join my Discord
    13 Jul, 2019 17:50

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

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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?

    Creator of Black Light, a science-fantasy universe.
    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. ^ _^

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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 fontstack.com is broken. missing a dot after www

    15 Nov, 2019 23:39

    Good catch! Fixed. Cssfontstack.com actually!

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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. fontlibrary.org - https://fontlibrary.org/assets/fonts/megrim/7c7ebbace2b20afe253743b779da3044/c7bb56ac0f25b99edffbab43ba943e45/MegrimMedium.ttf   it works. however if I upload the font file to my own bitbucket account, it doesn't - https://bitbucket.org/banditbirds/fonts/downloads/MegrimMedium.ttf   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!

    16 Jul, 2020 17:48

    can you please explain this further? I am trying really hard to get the Diabolique font to work from db.onlinewebfonts.com to work and cannot for the life of me figure this out.

    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

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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.

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    20 Dec, 2019 21:44

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

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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?

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    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!

    Master Kaleidechse
    Kathrin Janowski
    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.

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    Master Kaleidechse
    Kathrin Janowski
    18 Feb, 2020 20:11

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

    6 Mar, 2020 12:56

    Great work! Still looking for CSS for Hero and Campaining panel. Can someone give me advice how to finde it?

    8 Mar, 2020 19:47

    Go to the Character's page, Activate & Edit them. From the editor, it's under the "Epic Heros" tab

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    27 Mar, 2020 16:18

    After step four, where are you supposed to copy the "LATIN" version?

    28 Mar, 2020 01:53

    Into the CSS input for your world, which can be accessed through the world config or by the floating little palette icon   up towards the top left of any presentation page of your world.

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    14 Apr, 2020 21:18

    Hey! Just something I noticed here on the article, it seems like the CSS-code regarding the color borders & icons for both the milestone and the red timeline panels ended up in the same spoiler tag!

    2% story, 98% non-related lore | Tales of Fabulae | Twitter
    16 May, 2020 20:43

    How can you customize the background and borders for tables?

    16 May, 2020 22:28

    Some of this code will get stripped, like the ending braces, but this code will be mostly functional and serves as a good template. Come @ me in the discord if you need help!

       .user-css .table{
         background-color: pink;
       }
       .user-css .table td{
         background: transparent !important;
       }
       .user-css table th,
       .user-css .table-striped th{
          Table Headers
       }
     
       .user-css table tr,
       .user-css .table tr{
          Even row stylings here     
       }
       .user-css table tr:nth-child( odd ),
       .user-css .table tr:nth-child( odd 
         Odd row stylings here
       }
    

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    20 May, 2020 07:21

    Awesome article, lots of help, just wondering if I can change the font and spacing of the world name? I want a script font with the theme I'm using and would like a bit more padding on the bottom

  • Scar
  • 21 May, 2020 03:29

    Yep! The selector for that is .user-css .world-title


    .user-css .world-title {
    padding-bottom: 20px; font-family: familyNameHere;
    }

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    21 May, 2020 08:24

    Cool, thanks a bunch, some of the google fonts were fighting me but I got one I like that works pretty well

  • Scar
  • 31 May, 2020 07:00

    There are some things missing from this guide. For example, if you were to use the Wild West Steam Punk CSS, you would notice that the text is nearly illegibly dark. It turns out that CSS does not use the body text shown in the example above, rather it uses the following: .user-css-presentation .tab-content .col-md-8 p, .user-css-presentation .article-content-left p{ color:#( )}   I recommend inserting #906800 as the color in place of the ( ) above.

    20 Jun, 2020 15:26

    how can i switch of the follower counter ? I have just a private campaig and dont need this

    21 Jun, 2020 20:28

    .user-css .followers-counter {
      display: none;
    }
    

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    1 Jul, 2020 13:26

    How can I change the size of categories in the world codex? (both text and folder icon size)

    7 Oct, 2020 16:38

    Dude. Y'all. This article is so amazing!! I thought I'd just take a stroll to give my backburner something to chew on, thinking I'd be mainly shuffling around to figure out what I can't do. But no. Oh no no! There is so much pretty to be made of my pages!! This is a perfect trip through how best to use CSS in WA. You've got great snippets that look very helpful for newbies and fold up when not needed so they don't muck up the scroll. links to other articles with the kind of nutty things I like to do (it takes a certain kind of crazy to make your own icons, and I am that), and a list and rationale for not using the naughty bits which shall not be touched in WA. (Boundaries, yo, I get it.) It's just all very good, and now I'm going to go away and not come back until December.   Why December, you ask? (Yes, you do ask.) Check my math:

    • October: finish draft of novel A. Prep NaNoWriMo.
    • November: 50K word novella with the goal of being able to hand it to a first-reader by December 3.
    • December: Public-facing world primer, character portraits and bios, all the other things as fast as I can nitpick my DIY theme to death.
      So I'll be dreaming of this article for the next couple months. The work y'all collectively put into the Codex is astounding, and I'm so grateful.

    Ariel Purkeypile | Tenses Universe
    Nesting stories, discoverable epistolaria, quantum whimsy.
    Recovery is my superpower.
    8 Oct, 2020 20:27

    December is the perfect time to do it, since we have a site-wide event called WorldEmber at that time ;)   First rank of completion is usually to do about 10k words of worldbuilding in new articles.   You should come join the Discord! Always something going on!

    Admin of the World Anvil Codex & Discord | Director of Ethnis | My Ko-Fi | My Twitter
    30 Oct, 2020 00:04

    Thanks for all the great snippets. I've used several successfully already. With regards to Tables - is there a way to make the font larger? It's soooo tiny! I tried adding ".user-css .table td { font-size: 16px !important; }" but it makes no difference. Please let me know if there's some way to make it bigger. Thanks so much for all you do! Valerie