Introduction to containers
This content is for grandmasters and higher guild tiers
Note: changing versions might mess up with your world's CSS, specially if you have complex CSS. World Anvil themes are in BS3.
What is a container?
A container is a box that we can customize. This box surrounds the content we write inside the container tags, and between our content and the exterior of the box, there are a couple of areas that we can tweak to help us have our content as we like (read more by clicking image on the right). We name the containers as we label the boxes we use when moving houses, to let us know easily what is inside of it, and these names will be what we use to customize our beloved boxes. We can assign unique features to each name so we can then apply them to our containers
Containers on their own will not show any difference unless you add CSS to them,and by default, they will stack on top of each other (ie, each container will start on a new line).
Container vs section?
A container will break your text into three parts: what comes before, the container itself, and what comes after. It will isolate the content inside your container from the outside.
A section is friendly, it will stay in the same line and won't separate your text.
Depending on what you need, you'll use one or the other—just remember, sections hug, containers want social distancing.
What is a section?
A section is similar to a container. It is a tiny box that stays on the same line as the rest of the text. It also lets you change the CSS by calling its name. You can make weird inline things!, for example, I highlighted the text using a section.
The way is coded, we can also add pretty icons in the middle of text!
How to start?
First, let's start how you create a container and a section. On the right of the screen, you will find the BBCode needed to create them. (For more advanced users, you can press ctrl+shift+c for a container, and ctrl+shift+s for a section). You will have to name them by adding a word (usually, you write a name that references what the container is used for, such as yellowbox) between : and ] (see the example on the right).
Once you add that BBCode, you can start writing inside of them, between both tags (again, see the example on the right)! Text, images, headers, everything! (There are some limits in how many containers you can put inside other containers, but unless you are doing crazy CSS stuff, you won't have problems; and if you are doing crazy things, what are you doing here?).
test
background: ;
Now you have all the BBCode set up, but you'll notice that what you wrote in the container/section tag hasn't affected how it looks at all. Why's that? Well, that's because they have no CSS assigned to them. On the left, you'll see the most basic CSS structure, but if you simply copy and paste that to your world, it will do nothing. Dear reader, you have to work a bit for it! Let's break it down.
The container and section structures for CSS are the same, the only thing that changes is the name, and that depends on what you have named your container.
First of all, we have the container/section call. This is done by writing .user-css (this is not always needed but World Anvil limits the CSS used to certain things and this makes sure your code is always within World Anvil's limits), which is a World Anvil container that we cannot edit. Following that, we have the name of our box (the . is importat—without it, it won't call the container). In this example, we have named it box (so we have to write .box) but you should change the box word to whatever you have named your container/section. This is finally followed by a {} . These symbols will tell the computer that your container will be customized with what you write inside of it. All CSS customization to a container/section have to be between a {} block—once you write outside of the closing }, the system will be trying to look for the name of the next CSS block.
Inside the {} we have the properties of the container/section, and these properties will be the ones that will make your container/section be different. In this example, I'll explain the background, color, and border properties. These are three basic properites that are very common and on their own, will already change your container/section by a lot.
The background property doesn't hold much mystery: it changes the background of a container/section. It can be either with a color or an image. To change the background color, you can write in between the : and the ; the hex color code or the RBG color code.
To add an image in the background, you can add the url of the image between : and ; . This is by adding the url with "url(link)" and then changing the word "link" with your actual link. Attention: the link has to direct to the image, not a page that holds the image.
: The space between the ) and ; is not necessary for CSS, I had to use a space in this example for technical reasons, but you shouldn't in your own CSS
The color property changes the color of the text inside the container/section. This can be done by adding the hex color code or the RBG color code.
: The space between the ) and ; is not necessary for CSS, I had to use a space in this example for technical reasons, but you shouldn't in your own CSS
: Some text won't change its color even when you use the color property. This is because the property is being overwritten by other code. This can be solved by adding the text type after the box name (example later on).
Examples
I will be showing some examples of containers/sections and CSS at the end of the article. I will try my best to describe what everything does with clarity. Because the descriptions, it might be heavy reading to do, if you are new to CSS.
The border adds a line surrounding your content, boxing it. The border property is the most complex of these three properties, as it requires three pieces of information to work. Let me explain with an example.
The border property asks us three things: the width, the type, and the color. The "1px" in our example is the width—we could change the number 1 to whatever number we desire: the bigger the number, the wider the border. If you write 0 on it, the border won't display.
Following the width, we have the border type. The most common is
And finally, the color. It can be written with hex color code or the RBG color code, the same codes you would use in the background or color properties.
It is important to remember that order matters! The border property needs the information to be added in that order: width, style, color. It won't show anything if the order is different or if it's missing information.
Important information and details
A container and a section must be named, as I've mentioned multiples times already. Naming them is important, and good etiquette is to name them according to what they do (example: box-yellow for a container that has a yellow border or background). World Anvil adds a limitation to the naming though, there are some illegal words or starts, for security. If a container or a section isn't being affected by your CSS, it is very probable you gave it an illegal word. You can read more in the article on the right, where it says "Security Filter".
On the same article, where it says "The rules", you can see what World Anvil allows users to modify with CSS. Trying to change something that cannot be modified in any way isn't allowed unless you are Sage or a higher Guild tier. It is very unlikely that you will need to care about it unless you try to do big changes to the structure of the pages.
I HIGHLY recommend reading the article, as it explains important things for doing CSS in World Anvil.
Other info + articles
In this article, I've tried to introduce you, dear reader, the amazing world of containers, which also drags you into the world of CSS. I am working on other articles that might be helpful for you, which I'll link down this section as I write and publish them. Make sure to follow this world if you want to be notified of these articles as they come out. Meanwhile, I recommend reading hcraven's article (on the left) about icons, which is one of the most common uses in World Anvil for sections.
Examples
In this container, I changed the background color and I gave it a border. I didn't need to change the color as by default my text is already white.
background: #31221d;
border: 1px dashed #F9BE4B;
}
background: #153644;
border: 2px solid #F9BE4B;
border-radius: 20px;
}
.user-css .blue-box h4 {
color: #F9BE4B;
}
This is a h3
This is text
A blue background with a solid 2px border. You can see a sneaky new bonus property: border-radius. It is a simple one, you give it a number in px (like 20px) and the corners of your box will be rounded. You can also see that there is a second block of CSS for the header color. This is because if you write the color in the usual block, the normal text will be yellow, but not the header, because the header will overwrite it.
But Cato, it says h4 and the texts says h3? Yes. This happens because what we write in BBCode is actually a number lower than what the browser understands. An h1 in BBocde is h2 in CSS, and so on till we do BBCode h5 (max header). If your text is not simple plain text, you will need to call additional things. If the text is a header, change the h4 for the CSS header needed (remember, one number higher than what you write in BBCode), if the text is a link, change the h4 for an a.
Calling h1 in the CSS will select the title of the article.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan orci ac orci auctor, id mollis diam pharetra. Morbi elementum metus rutrum...
We changed a section here, rather than a container.
We gave it a yellow background, and changed the color so that it was readable (white on yellow is hard as hell to read, someone should teach that to an old teacher of mine).
background: #F9BE4B;
color: #000000;
}
I have never before been able to understand what a 'section' was. THANK YOU.
You're welcome! They are very useful! Specially to add icons in text (which I haven't talked but the article from hcraven I've shared has a very cool guide!)
Love to code, but this one is driving me crazy!
My world Shattered won as the "Most ground-breaking premise new world"!