Available to the Grandmaster subscription tier and above. Upgrade here.
Custom containers and sections let you take customization to the next level. By using CSS with containers, the customization options for your world become virtually limitless. However, note that this is an advanced technical feature if you don't have previous knowledge of CSS. Here's how to use them:
What's a custom container?
Custom containers and sections are BBCode tags that let you apply custom CSS styles to specific areas of the article. The difference between them is that sections can be used in-line, while containers will create a line break.
If you are familiar with HTML, sections are like <span>s, while containers are like <div>s.
How to use containers and sections
- Choose an area of an article you want to customize.
- Wrap the area with the container or section tags, using a unique keyword as an argument. For example, if I want to change the background color of a specific word, I could use red-bg as the unique keyword (known as class in CSS terms).
- Click the gear icon in the sidebar and then the palette to access the Styling settings. Then, click on the CSS tab. There, you can style that text by using the .red-bg selector.
Take a look at this example:
In the example above, the following CSS is used to achieve the effect:
To learn more about CSS, check out the community resources on the World Anvil Codex.
