Grandmaster Container CSS

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.   In general:
  • Use sections if you want to add a special effect to a line of text or inline.
  • Use containers if you want to add a special effect surrounding a block of text or element

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]
 [container:panel-body]
 	Your Content
 [/container]
[/container]
 

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.   Gray Box Example - Click to Expand
Your content
.box-grey {
  background: #b1b1b166;
  border: 1px solid #616161;
}
 
.box-contain {
  margin: 5px;
  border-radius: 0px 15px 0px 15px;
  padding: 10px;
}
 
[container:box-contain box-grey]
  Your content
[/container]
  Orange Box Example - Click to Expand
Your content
.box-orange {
  background: #ffa5004f;
  border: 1px solid #ffa500;
}
 
.box-contain {
  margin: 5px;
  border-radius: 0px 15px 0px 15px;
  padding: 10px;
}
 
[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 Jacklyn
[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
[section]
<span>
[container]
<div>

Comments

Please Login in order to comment!
Minion of a Master
Virtom Shinjitsusayer
29 Apr, 2021 19:19

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

30 Apr, 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!