Solaris CSS

A repository of CSS snippets created for Solaris.
Feel free to use and adapt the provided code snippets for your own world. Also, if you would like me to talk about other elements of Solaris' CSS and add them to the repository, please let me know in a comment on this article.

CSS 101

Terminology

#id .class element {
property: value;
}

Floating Sidebar

Collapse Sidebar

This code is Mobile First. This means that it first styles things to look correct on small screens like mobile. Then we adapt the css for wider screens later with media rules.
The code snippet here widens the article and the sidebar so that the sidebar migrates to the bottom of the page.

Collapse Sidebar Code

.user-css .article-content-right,
.user-css .article-content-left {
 width: 100%;
}

Floating Sidebar

This code fixes the position of the sidebar to the left of your screen when the screen is wide enough to support it. It also makes it scroll down with you as you read.
As it is right now, it is currently not set up for long sidebars. It will probably need extra code to make it look nice if the sidebar is longer than 80% of the page height.

Floating Scrolling Sidebar Code

@media screen and (min-width: 1750px) {
 .user-css .article-content-right {
  position: fixed;
  top: 10%;
  right: 0px; 
  max-width: 300px;
  max-height: 80%;
 }
}

Breadcrumbs

Solaris    Post Script    Guides      Solaris CSS

I've placed my breadcrumbs in the Global Article Introduction Block. You can find this in Settings > Design > Global Content. To make sure I affect the entire breadcrumb, I wrapped my breadcrumbs in a container called breadbox.
If you rename or decide not to use the provided bb code you will have to change all the breadcrumb css.

Global Article Introduction Block BB Code

[container:breadbox][breadcrumb][/container]

Reordering the Header

This code uses flex to reorder the content in the header. By default, the header features the title, the author, and then any content placed in the global field. We want to migrate our breadcrumb above the header, and this is how you can do that.
First we set the article-title, the header itself, to display as a flex container. We set it to display these elements below eachother with the flex direction. Once the container that holds the elements is set to flex, we can reorder them. 1 will be the first, 2 second, and so on. You can play around with this!

Moving the breadcrumbs over the title.

.user-css .article-title {
 display: flex;
 flex-direction: column;
}


.user-css .breadbox {
 order: 1;
}


.user-css .article-title .m-b-0 {
 order: 2;
}


.user-css .article-title-author {
 order: 3;
}

Stacking Back to Homepage and Breadcrumbs

Now that we've reordered the header so that the breadcrumbs are above the header, you might notice it already overlaps slightly with our "Back to Homepage" button. I decided to stack them, after all, there's no point in repeating a link back to your homepage.
To do this I move the Back button over the breadcrumb, and then I add a margin and padding to the breadcrumb so the breadcrumb itself isn't hidden.

CSS TIP: Unless you're doing tricky stuff with negative values, you can combine properties like margin-top, margin-bottom into one line.
If you put two values in, it'll use the first number for the top and bottom, and the second value for the left and right.
If you put four values in, the order is always
top, right, bottom, left.

Stacking the Back To Homepage

.user-css .backtoworld a {
 top: 0px;
 left: -10px;
 height: 42px;
 width: 210px;
}

Nudge breadcrumb to the left

.user-css .breadbox .breadcrumb {
 padding: 0 0 0 65px;
 height: 42px;
}

Nudge breadbox to the left

.user-css .breadbox {
 margin: 0 -25px 0 125px;
}

Hide the breadcrumb homepage

.user-css .breadbox .breadcrumb-world-link-wrapper {
 display: none;
}

Hide on Mobile

The breadcrumb is handy, but screen real estate is very limited on mobile. This code hides the breadcrumb on small screens and makes it show up only when there's enough space for it.

Hide on Mobile

.user-css .breadbox .breadcrumb {
  display: none;
}
 
@media screen and (min-width: 992px) {
 .user-css .breadbox .breadcrumb {
  display: block;
 }
}

Numbered Table of Contents

Ever wanted a numbered table of content like Wikipedia? Well, it is doable on world anvil, but it takes some kinda advanced CSS. Thankfully for you, I already wrote it!
To fudge it we need to use the pseudoelement ::before. Typically, css only styles what's already there, but with before and after we can add new stuff, like pictures or shapes! It's often used to add written labels like "info", but we can't use it to add text on world anvil. Content had to be slightly nerfed on world anvil to protect the site against harmful code injections.
It's still a very powerful tool. Here, we use it to count for us. Counters are a bit tricky to set up, because we need to remember to reset them. Code can't really intuit things like "oh, I should start this subheader count fresh now that we've got a new header". So we have to tell it, hey, each time you see a header, reset this and that counter.

Setting up the counters for each tier

.user-css div.articletoc {
 counter-reset: toc0;
}


.user-css .articletoc .article-toc-indent-0 {
 counter-reset: toc1;
}


.user-css div.articletoc .article-toc-indent-1 {
 counter-reset: toc2;
}


.user-css div.articletoc .article-toc-indent-2 {
 counter-reset: toc3;
}

Now that we've made sure it'll start anew when it's supposed to, we can add the counters themselves. I'm telling it to add a count before the numbers. It automatically tallies stuff up for us and shows the number.
You might be curious why there's a link in here. That's because I can't add writing, but I can add images. So to get a period in my article table of contents, I have to put in an image of a period. That's slightly janky, but, well, I'd rather we have to write slightly janky code than leave the site vulnerable.

Adding the counters

.user-css .articletoc .article-toc-indent-0::before {
 counter-increment: toc0;
 content: counter(toc0) 
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-1::before {
 counter-increment: toc1;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-2::before {
 counter-increment: toc2;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc2);
 margin-right: 10px;
}


.user-css .articletoc .article-toc-indent-3::before {
 counter-increment: toc3;
 content: counter(toc0)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc1)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc2)
 url(https://www.worldanvil.com/uploads/images/a7c8f23a313ea88fa4049e5beba32d6c.png)
 counter(toc3);
 margin-right: 10px;
}

CSS Repository

Table of Contents