Grandmaster Container CSS in World Anvil Codex | World Anvil

Grandmaster Container CSS

Restructuring the Codex

We are currently moving articles around and changing the general structure of the Codex. Please come back later if you get lost!

Guild Exclusive

This is a Grandmaster+ feature. To get access, Join the Worldbuilder's Guild!

Grandmasters have the ability to create arbitrary containers and sections with CSS classes. These open up many possibilities to customize articles and other World Anvil pages. The difference between sections and containers is, that the sections create HTML <span> elements and the containers create HTML <div> elements.   For every example there is some BBCode and some CSS. The BBCode marks the location of where in the article you would like this special formatting to appear. The CSS tells the browser how to display that special formatting.   In general:
  • Use [section]s if you want to add a special effect to a line of text or an inline image or icon.
  • Use [container]s if you want to add a special effect surrounding a block of text or element. In this guide we mostly use containers for the examples.

Understanding Bootstrap

The easiest way to use containers is to target Bootstrap classes. Bootstrap is the CSS Framework on which World Anvil is built on. The framework takes care of many intricacies to ensure the website looks good and remains responsive on as many devices and browsers as possible.   This means you can use the classes used by the framework to implement your own layouts. Not everything bootstrap offers can be used because some components requires special attributes to be set. This is currently only possible with custom templates.

The Bootstrap Grid

The core of the bootstrap layout system is the grid. This grid is made up of up to twelve columns and can be utilized to display content next to each other. The columns come with so-called breakpoints for screen sizes defined. This allows you a good layout for both mobile and desktop screens without too much tinkering.   Example Columns 2/3 + 1/3 - Click to Expand
The code below creates two columns with the first column taking up 2/3 of the width and the second column the rest. The md in the middle means that the columns will stop being columns on any devices with a screen resolution width of less than 992 pixels. This generally includes smartphones and tablets.
[row]
	[container:col-md-8]
 [/container]
 [container:col-md-4]
 [/container]
[/row]
  These columns can be customized in any way. You can make up to twelve columns total. Always make sure that the numbers are summed up to 12. Read up on the details here.  

Sidebar Panels

The sidebar panel which is used in most articles can be easily duplicated. Just use the following containers and get the same effect anywhere on World Anvil:  
Sidebar Panel - Click to Expand
[container:panel panel-default card]
 [container:panel-body card-body]
 	Your Content
 [/container]
[/container]
This creates the same effect as in the sidebar. Check the BBCode guide to learn how to make it create columns like these.
 

Adding Unique Effects to Specific Elements

With the use of containers it is possible to make sure certain CSS is only applied to a single element or a group of elements. For example if you wish to have a special type of tables that should have a different look from your other tables you can just wrap those tables with a container and then adjust your CSS to target only that. You can use this trick for any element you embed into an article!   Table Example - Click to Expand
[container:your-class]
 [table]
  ...
 [/table]
[/container]
  CSS - Click to Expand
.user-css .your-class .table {
  ...
}

Adding Icons

With the help of containers or sections it is possible to add icons from Fontawesome & RPGawesome into your content. World Anvil has the Pro version of Fontawesome which means that you can use all of their icons and not just the free ones.   Fontawesome Icon Example - Click to Expand
Note the space between the sections. This is important as it will not work otherwise. The fa-2x class increases the size of the icon.
[section:fas fa-2x fa-book] [/section]
    RPGawesome Icon Example - Click to Expand
The space between the section elements is important. It won't work without it. And always add the ra class to the icon class.
[section:ra ra-dragon] [/section]

Additional Layout Boxes

It is very easy to create additional layout boxes like the [aloud] or [quote] BBCodes. You can find the BBCode and CSS for the boxes used on the Codex. From there you should be able to customize your own containers as you need. These examples also show how you can reuse CSS rules effectively.  
This grey box can be created with the CSS & BBCode found below. These serve just as a starting point. You can play around with each of the values to get different results!
  CSS - Click to Expand
.box-grey {
  background: #b1b1b166;
  border: 1px solid #616161;
}
 
.box-contain {
  margin: 5px;
  border-radius: 0px 15px 0px 15px;
  padding: 10px;
}
  BBCode - Click to Expand
[container:box-contain box-grey]
  Your content
[/container]
 
Your content
  CSS - Click to Expand
.box-orange {
  background: #ffa5004f;
  border: 1px solid #ffa500;
}
 
.box-contain {
  margin: 5px;
  border-radius: 0px 15px 0px 15px;
  padding: 10px;
}
  BBCode - Click to Expand
[container:box-contain box-orange]
  Your content
[/container]
 

Box with Icon

The below example creates a box with an icon in the upper right corner.   CSS - Click to Expand
.user-css .box-special {
  position: relative;
  padding: 10px 10px 10px 50px;
  border: purple solid 2px;
  background: mediumpurple;
  border-radius: 20px;
}
 
.user-css .box-special .corner-icon {
  position: absolute;
  left: 10px;
  top: 10px;
}
  BBCode - Click to Expand
[container:box-special][section:corner-icon fas fa-2x fa-book] [/section] 
  Your content
[/container]
  Example in Action - Click to Expand
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

Box with Background Image

Credit: Ademal
[container: con-img-background] [img:169171|nolink] [h1]Test[/h1] [p]Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Vestibulum dapibus, augue at porttitor dapibus, enim nulla volutpat nunc, sit amet posuere leo 
neque vel nibh. Integer mi mi, fermentum vitae ullamcorper venenatis, malesuada id nunc.
[br][br]Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Cras blandit dictum arcu, tristique pellentesque tortor vestibulum in. Praesent in odio sit amet tellus 
elementum convallis vitae ut nunc. Praesent tempus rutrum tincidunt. Nam vel viverra arcu.[/p] [/container] 
CSS - Click to Expand
.user-css .con-img-background {
 position: relative;
 text-align: center;
}
 
.user-css .con-img-background h2 {
 text-align: left;
 padding: 10px 0px 5px 10px;
 height: 2%;
 margin: 0px;
 border: none;
 position: absolute;
 width: 100%;
 top: 1%;
}
 
.user-css .con-img-background img {
 border-radius: 0px 10px 10px 10px;
 opacity: 0.5;
}
 
.user-css .con-img-background .padding-10 {
 background: black;
 padding: 0px;
 border-radius: 0px 10px 10px 10px;
}
 
.user-css .con-img-background img {
 border-radius: 0px 10px 10px 10px;
 opacity: 0.5;
}
 
.con-img-background p {
 position: absolute;
 top: 10%;
 padding: 3%;
 height: 100%;
 border-radius: 0px 10px 10px 10px; 
}
 
.user-css .con-img-background .artist-credits {
 position: absolute;
 bottom: 0;
 width: 100%;
 border-left: none;
 border-right: none;
 border-bottom: none;
 border-radius: 0px 0px 10px 10px;
}
 

Tabs

Credit: User51   Check out the guide below to add tabs within one of your articles.
Truly Terrible Tabs for the Broken-Hearted
Document | May 12, 2021

Tab controls are typically built with JavaScript, but if you are willing to use a page reload, you can achieve a passable alternative with this CSS-Only trick using containers and anchor tags.

Accordion

Credit: User51   Check out the guide below to see how you can create an accordion in your article.
Awfully Abominable Accordions for the Star-Crossed
Generic article | May 12, 2021

Use a container and headings 1-5 to create a CSS-Only accordion control. Accordions can help display a lot of information in a small space.

Spoiler Alert: You can Accordion Spoilers
Generic article | Jan 4, 2022

A slightly different take on accordions, this uses the spoiler BBCode tag inside a custom container to display an accordion control. The benefit to using spoilers is the open and collapse feature does not require a page reload.

CSS Guides
CSS Framework
Bootstrap 3.3 or Bootstrap 5.0 (check the styling settings for which one your world is using. If your account was created after the summer 2022 it is Bootstrap 5).
[section]
<span>
[container]
<div>
 

Community Guides

This is an introduction to containers by Catoblepon made for users with little experience with CSS:
Introduction to containers
Generic article | Jun 19, 2023

A very basic introduction to the containers in World Anvil

  The following is a deep-dive written by Annie Stein into Bootstrap classes you can use to create custom columns and grids with containers:
Advanced Formatting with Containers
Guide | Feb 7, 2024

How to create responsive articles, and do advanced formatting of rows and columns with bootstrap 5, a guide for grandmasters and sages.


Comments

Please Login in order to comment!
Apr 29, 2021 19:19 by Virtom Shinjitsusayer

So it took my a while to figure that it doesnt like the literal word Description as part of the class name. The on the fly css editor always worked but reloading would break it and it would work again only when i hit space or anything on the on-the-fly editor. Regardless, it only worked properly on reload when i removed the word description for something else (i tried dozens of variation on the class name and description seemed to be the word it did not like).   Would be nice to have a list of literal words that we should not use for class names in containers. Or a note that if the reload doesn't work it might be due to it (perhaps this is part of the security filter not liking it).

Apr 30, 2021 04:14

This is mentioned in the CSS on World Anvil Guide. description contains the word script which is removed by the security filter.

Check out my world World Behind the Veil!
Oct 22, 2023 14:22

I'm completely unfamiliar with CSS and only have a limited understanding of BBcode, so apologies in advance if this is the world's most obvious question to some, but what am I supposed to do with these codes in the text editor? I want to make a colored box on my article to make a section of text stand out. This article shows that this can be done, shows the code that is used to do it, but does not explain how to do it. Do I put the CSS inside the container, or are they separate? I assume my text goes where you have the "Your Content" text, but I just can't seem to figure this out. Please help!

Oct 22, 2023 14:23

Or is my subscription level not high enough?

Oct 22, 2023 14:32

Hi, these containers require a Grandmaster subscription to work, which is one above yours.   Where to put the CSS is explained in the first or second article of this series.

Check out my world World Behind the Veil!