Article & BBCode CSS

Guild Exclusive

This is a guild-only feature. To get access, Join the Worldbuilder's Guild!

In this article we go over the CSS options for the various BBCode containers and special classes and components available in articles.

Headings

Headings are created with the BBCode [h1] to [h4]. These will create HTML headings H2 to H5. This means that the CSS always needs to target one headings size lower than you define in BBCode. The reasoning behind this depracation is the standard that HTML pages should always only have a single H1 heading. On WorldAnvil this is reserved for the article, category etc. title.
Article Title <h1> - 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;
}

BBCode [h1]: Header <h2> - 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;
}

BBCode [h2]: Header <h3> - 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;
}

BBCode [h3]: Header <h4> - 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;
}

BBCode [h4]: Header <h5> - 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;
}

General Text

The text on World Anvil can be styled to some extend with just BBCode. I this section you will find some examples on how to change or adapt these styles to your own needs!
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. This will generally affect any text which does not have any more specific CSS applied to them.
You can use the settings Base Font Size and Base Font Color to change these instead of using the CSS below.
Body Text - Click to Expand

The comma allows you to combine selectors with the same body.

.user-css,
.user-css p,
.user-css-extended,
.user-css-extended p {
    color: #333333;
    font-size: 16px;
}

BBCode Text Effects

The following examples show the text effects created by the their respective BBCode. And there are a few extra effects.
[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 {
    text-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%;
}

[s]: Remove Strikethrough Text - Click to Expand

.user-css del {
  text-decoration: unset;
}

[url]: Links - Click to Expand

.user-css a,
.user-css a:focus {
    color: #962626;
}
.user-css a:hover {
    text-decoration: underline;
    color: #d80b07;
}

Additional Text Effects

[small]: Inline Spoilers Text - Click to Expand

This creates a spoiler text that can be hovered over to see. You likely have do adapt the colors to fit your theme.

.user-css small {
 background: black;
 color: black;
}


.user-css small:hover {
 color: white;
}

Layout BBCode

These elements can be used to break up a block of text and bring some flavour to your articles. Adapting them to your theme is an easy way to set an accent!

Quotes

The default CSS for quote boxes is provided below.
Default CSS - 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

The 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. When changing this keep in mind that there are other places where hr elements are used as well. If you only want to target your own hr make sure to add some specific classes of the context.
Default CSS - 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;
}

BBCode Tables

You can use the following CSS code as a template to style your BBCode tables. The codes below are the default CSS styles applied.
Table Container - Click to Expand

.user-css .table-striped {


}

Table Cell - Click to Expand

.user-css .table-striped td {


}

Table Header Cells - Click to Expand

.user-css .table-striped th {
		color: #fff;
  background: #900b0b;
}

Even Rows - Click to Expand

IMPORTANT: Replace [{] with { after copying this code.

.user-css .table-striped tr:nth-child(even) [{]
 
}

Odd Rows - Click to Expand

IMPORTANT: Replace [{] with { after copying this code.

.user-css .table-striped tr:nth-child(odd) [{]
	background-color: #f9f9f9;
}

Tagged BBCode

The tagged BBCode embeds a list of links or articleblocks. In some cases it might be desirable to cahneg this list to a grid. Check out the BBCode below to do this.
Tagged Blocks as Grid - Click to Expand

.user-css .tagged-articles-list {
	  display: grid;
	  grid-gap: 20px;
	  grid-auto-rows: minmax(0px, auto
	  grid-template-columns: repeat(3, 1fr
}

Article Background

With this you can add an image to the background of your articles behind the text. Use a small texture image which can be repeated to achieve the best effect for any screen sizes. Upload the image to World Anvil and add the link to the image into the example below. Use google to find a fitting image and make sure it has the right license. Use this class to add a border effect around your article components.
Page Background - Click to Expand

.user-css.page,
.user-css-extended .page {
    background: url(DIRECT_LINK_URL) ;
}


or for making the background image a nonrepeating image
.user-css.page,
.user-css-extended .page {
  background-image: url(DIRECT_LINK_URL) ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Article Sidebar

This is the default styling for sidebar panels. The panels consist of two containers the outside container creates the border and the background. The inner container creates some padding that the content of the sidebar doesn't touch the border.
Sidebar Panel - Click to Expand

This kind of panel appears in many other places as well. Remove the .article-content-right class if you want to affect them all.

.user-css .article-content-right .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 .article-content-right .panel .panel-body {
    padding: 15px;
}

Scrolling Sidebar

With the following code you can make the sidebar scroll with the screen as people scroll down. This can be useful for very long articles that use the sidebar for navigation. However, this is not 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. This sidebar will only appear on large screens. However, it creates a second scrollbar which can be difficult to use with just a touchpad.
"Sticky" Sidebar - Click to Expand

IMPORTANT: whan pasting the above code in your CSS, make sure to replace "[{]" for "{" and add the -sign. Otherwise, it won't work.

Snipped provided by LieutenantDebug

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

Mobile - Sidebar First

On mobile the sidebar is displayed after the main content at the bottom. It is possible to change this order with the following code.
Sidebar Before Content - Mobile

Important note: whan pasting the above code in your CSS, make sure to replace "[{]" for "{" and add the -sign. Otherwise, it won't work.

Snipped provided by Hannah

 media (max-width: 992px) [{]
 .user-css #profile .row {
  display: flex;
  flex-direction: column;
 }
 .user-css .article-content-left {
  order: 2;
 }
 .user-css #profile .row .row {
  display: block;
 }
}

Template Specific Elements

Targeting Template Types

It is possible to only target articles by type. Add the template class right to the .user-css class. The example is for the generic article template.
Target Generic Articles - Click to Expand

.user-css.template-article {
		color: blue;    
}

Other Elements

Articles have a few more special elements.

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

Article Table of Content

This is the table of content generated by using the [articletoc] bb code command.

[articletoc] Default CSS - Click to Expand

.user-css div.articletoc {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 5px 10px;
}


.user-css div.articletoc .article-toc-link.article-toc-indent-1 {
  padding-left: 10px;
}


.user-css div.articletoc .article-toc-link {
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  margin-bottom: 3px;
  cursor: pointer;
  transition: border-color .3s ease-out,color .3s ease-out;
}

The following code moves the Table of Contents out of your article and underneath your World Navigation Button. It will scroll alongside to make for easier navigation between sections.

[articletoc] Navigation Button Style - Click to Expand

.user-css div.articletoc {
border: none;
}


.user-css div.articletoc .article-toc-link {
transition: 0s;
border-bottom: none;
}


.user-css .articletoc {
 background: #14161b;
 color: #fff;
 width: 242px;
 max-height: 42px;
 position: fixed;
 top: 250px;
 left: -200px;
 z-index: 4;
 overflow: hidden;
 transition: 1s ease;
}


.user-css .articletoc::before {
content: url(https://www.worldanvil.com/uploads/images/ee67b50f0368ec35b5a624164cccb8c4.png) ;
position: absolute;
top: 6px;
right: 6px;
}


.user-css .articletoc:hover {
 max-height: 100%;
 left: 0px;
}

Tooltips and variables

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. Tooltips generated by variables use the same selectors.
Tooltip - Click to Expand

Snipped provided by Damion Otter

.user-css-presentation .tooltipster-base .tooltipster-arrow .tooltipster-arrow-border {
  border-top-color: #C9B800;
}


.user-css-presentation .tooltipster-base .tooltipster-arrow .tooltipster-arrow-border {
  border-left-color: #C9B800;
}


.user-css-presentation .tooltipster-base .tooltipster-arrow .tooltipster-arrow-border{
  border-bottom-color: #C9B800;
}


.user-css-presentation .tooltipster-base .tooltipster-arrow .tooltipster-arrow-border {
  border-right-color: #C9B800;
}
 


.user-css-presentation .tooltipster-base .tooltipster-box .tooltipster-content {
  background: #423C00;
  border-color: #C9B800;
  color: #EAE9DC;
}

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 .user-css-image-thumbnail {
    padding: 0;
}


.user-css .user-css-image-thumbnail img {
    border: 4px solid gray;
    border-radius: 2px;
    box-shadow: 3px 3px 7px #333;
}

Tag CSS Classes on Images

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 .user-css-image-thumbnail img.border {
    border: 4px solid gray;
    border-radius: 2px;
}
.user-css .user-css-image-thumbnail img.drop-shadow {
    box-shadow: 3px 3px 7px #333;
}

Character Portraits & Organization Crests

There are special CSS classes to target just character portraits or organization crests.

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

Metadata

This section covers some metadata-specific CSS. Below is the default CSS for the active tab of the metadata tab container. This is usually just the regular metadata, but can include secrets, organization charts and more.
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;
  background-color: rgb(180, 20, 30) ;
  border: 0 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.

Organization Tree

Organization trees are automatically added as a tab to the metadata block if one is generated by the article.
Change Colors - Click to Expand

.orgtree li::before{
  border-top: 1px solid #888;
}


.orgtree li::after{
  border-top: 1px solid #888;
}


.orgtree li::after{
  border-left: 1px solid #888;
}


.orgtree li:last-child::before{
  border-right: 1px solid #888;
}


.orgtree ul ul::before{
  border-left: 1px solid #888;
}


.orgtree li a{
  border: 2px solid #888;
  color: #666;
  background: #f7f7f7;
}


.orgtree li a:hover{
  background: #2f404e; 
  color: #fff; 
  border: 2px solid #94a0b4;
}


.orgtree li a:hover+ul li a{
  background: #2f404e; 
  color: #fff; 
  border: 2px solid #94a0b4;
}

Comments

As with the metadata use .user-css-extended instead of .user-css to apply CSS effects here. Generally the same BBCode effects can be used here so if you change any of those it makes sense to have them applied to comments as well.
There is no special class to apply styles to the author's note. Use the following generic code:
Author's Note Heading - Click to Expand

.user-css-extended #comments h4 {
}

Author's Note Text - Click to Expand

.user-css-extended #comments em {
}

Content

CSS Guides

Comments & Metadata

In general the comments section can be affected by just adding the same class selector to an example but replace the base class from .user-css to .user-css-extended. See the general text section for an example.
Keep in mind that you are not allowed to hide these sections.