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 Guide: Numbered Table of Content

CSS 101

Terminology

#id .class element {
property: value;
}

Scroll Margin

This changes the behavior of anchors and links that scroll you partway down a page, leaving a bit more of a margin on the top. This prevents the title from being hidden under the edit bar.

More Scroll Margin

.user-css h1,
.user-css h2,
.user-css h3,
.user-css h4,
.user-css h5 {
 scroll-margin-top: 50px;
}

Hide Headers in Table of Content

Sometimes you want to use an article table of content, but don't want a certain kind of header to show up in it. This code removes all the headers, but I've labelled each of them to show what tier of header they remove. Simply erase the lines of the headers you'd like to keep in the table of contents.
If it doesn't work for you, make sure that the last line of .article-toc-indent-# before the { does not have a comma at the end.

Collapse Sidebar Code

/*h1*/ .user-css .article-toc-indent-0, /*h1*/
/*h2*/ .user-css .article-toc-indent-1, /*h2*/
/*h3*/ .user-css .article-toc-indent-2, /*h3*/
/*h4*/ .user-css .article-toc-indent-3 /*h4*/ 
{ 
  display: none;
 }

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;
 }
}

See Also

CSS	CSS Repository · Styling Tooltips and Excerpts · Numbered Table of Content
Formatting	Advanced Formatting with Containers
Other	Resources

CSS Repository

Table of Contents