Component CSS

Guild Exclusive

This is a guild-only feature. To get access, Join the Worldbuilder's Guild!

These containers can be found in many places on World Anvil and most of them have BBCodes associated with them to add them yourself. Keep this in mind when applying styles to them.

Bookcovers

Bookcovers are an alternative way to display categories. Via settings categories can only be displayed on the homepage. To use bookcover category links on other pages the [book:category-id]-BBCode (check Categories BBCode) has to be used. The bookcover is very complex and has five components. Check out each one to see what you need to do to achieve your effect.

Bookcover Wrapper

This wrapper ensures that the bookcover are lined up in a grid. It creates some space between them as well. If the size is changed you should provide your own custom bookcover images to fit the new dimensions.
Default CSS - Click to Expand

.user-css .bookcover {
  margin: 10px;
  display: inline-block;
  width: 300px;
  text-align: center;
  position: relative;
  height: 400px;
  background: #000;
}

Bookcover Link

The link of the bookcover which wrapps the entire cover. It defines the text color within the bookcover element and removes the underline from the text as most browser add this by default.
Default CSS - Click to Expand

.user-css .bookcover a {
    color: black;
}
.user-css .bookcover a,
.user-css .bookcover a:hover {
    text-decoration: none;
}

Bookcover Image

The image of the bookcover. The effect on hover is applied with the default CSS. You can make this effect stronger. If you wish to change the color of shining through do so in the bookcover wrapper element above. Changing the imags should not be done with CSS, but instead in the categories edit page.
Default CSS - Click to Expand

.user-css .bookcover a:hover img {
    opacity: 0.35;
}

You can add a transition to the hover effect with the code below. This effect should be applied to the excerpt and booktitle as well for consistency.
Bookcover Image Transition - Click to Expand

.user-css .bookcover a img {
    transition: opacity 0.25s linear;
}

Category Excerpt

The text which appears over the image on hover. You can change the text within the category editor itself.
Default CSS - Click to Expand

.bookcover .excerpt {
    display: none;
}
.bookcover a:hover .excerpt {
    display: block;
    position: absolute;
    top: 10%;
    width: 200px;
    left: 50px;
    color: white;
    text-align: center;
}

Category Title

This is the ribbon towards the bottom with the book's title on it.
Default CSS - Click to Expand

.user-css .bookcover a .booktitle {
    position: absolute;
    left: 0;
    top: 75%;
    background-color: white;
    padding: 10px;
    text-transform: uppercase;
    font-weight: bold;
    max-width: 200px;
    text-align: left;
}
.user-css .bookcover a:hover .booktitle {
    background-color: #962626;
    color: white;
}

Articleblocks

The article blocks appear in many places on WorldAnvil and can be created via the [articleblock:article-id] BBCode. It makes sense to apply any effects here in the comments section as well.
If you want to hide the header image or if it is hidden then this is due to a world configuration.
Default CSS - Click to Expand

.user-css .article-panel,
.user-css-extended .article-panel {
    padding: 10px;
    background-color: #f9f9f7;
    border: 1px #d4d2c5 solid;
    margin-bottom: 15px;
}

Add Hover Effect - Click to Expand

.user-css .article-panel:hover,
.user-css-extended .article-panel:hover {
  background-color: #e5e5e5;
}

Change Title Color - Click to Expand

.user-css .article-panel .subheading,
.user-css-extended .article-panel .subheading {
  color: indigo;
}

Hide Template & Publication Date - Click to Expand

.user-css .article-panel .subheading,
.user-css-extended .article-panel .subheading {
  display: none;
}

Center Excerpt - Click to Expand

.user-css .article-panel .excerpt,
.user-css-extended .article-panel .excerpt {
  text-align: center;
}

Change backrgound color of details section - Click to Expand

.user-css .article-panel .details,
.user-css-extended .article-panel .details {
  background-color: darksalmon;
}

Secrets

Below is the default CSS for the boxes in which secrets are contained, when they are revealed on the page. Secret - Click to Expand

.user-css-secret {
    padding: 10px 14px;
    background-color: #08080814;
}

Below is a change you can make if you wish to make your secrets appear seamlessly within the article.
Seamless Secret - Click to Expand

.user-css-secret {
    padding: 0;
    background-color: transparent;
}

Global Components

World Background

This can be set with the Page Background setting as well. However some more advanced solutions still require the use of this CSS.
Note that this will affect all pages on your world.
World Background - Click to Expand

.user-css-presentation {
    background: url(*DIRECT LINK TO IMAGE GOES HERE*) ;
}

Static World Background

If you would like this image to stay static as viewers scroll, use this snippet instead.
Static World Background - Click to Expand

Snipped provided by Arka

.user-css-presentation {
    background-image: url(*Direct link to an image*) ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Back to Top Button

The back to top button can be found on most pages of the world presentation. The button has two parts and has some CSS to change on hover.
Background, Icon, Icon on Hover - Click to Expand

.user-css-presentation .backtotop-button {
  background-color: #000;
}


.user-css-presentation .backtotop-button i {
  color: #fff;
}


.user-css-presentation .backtotop-button i:hover {
  color: #fff;
}

Author Only Components

The components within this section appear only for the author and editors of a world. These sections can be changed in anyway you wish as stated in the rules.

World Editor Bar

The snipped below turns the label on the world editor bar into icons. This makes it much more useable on mobile. However, it hides the ability to see subscriber groups at a glance.
Mobile Friendly Design - Click to Expand

IMPORTANT: For technical reasons the -sign and { cannot be added as text. When you copy & paste this snippet into your CSS palette you need to add the -sign and replace the [{] with just {.

CSS snipped provided by Graylion

#world-editor-bar {
  display: flex !important;
}


#world-editor-bar .p-0 {
  display: flex ;
}


 media only screen and (max-width: 600px) [{]
  #world-editor-bar .label,
  #world-editor-bar .btn,
  #world-editor-bar ul,
  #world-editor-bar li {
  	background-color: transparent !important;
  		border: none !important;
  	font-size: .9em;
  	height: 30px;
  	line-height: 1.5;
  	margin: 0px;
  		padding: 0px;
	}
}


 media only screen and (max-width: 600px) [{]
  #world-editor-bar .fa {
    border: 1px solid white;
    border-radius: 20px;
    height: 30px;
    width: 30px;
    padding: 7px;
    margin: 5px;
    -webkit-text-stroke: .5px black;
    text-shadow: 1px 1px 3px black;
  }
}


span.world-edit-toggle.btn.btn-success.btn-xs.tooltipster.tooltipstered .fa-pencil {
  background-color: darkgreen !important;
}


span.world-edit-toggle.btn.btn-xs.tooltipster.tooltipstered.btn-danger .fa-pencil {
  background-color: darkred !important;
}


#world-editor-bar .fa-compass,
#world-editor-bar .fa-lock {
  background-color: darkred;
}


#world-editor-bar .fa-star,
#world-editor-bar .fa-lock-open {
  background-color: darkgreen;
}


#world-editor-bar .fa-wrench,
#world-editor-bar .fa-dashboard,
#world-editor-bar .fa-globe-stand {
  background-color: blue;
}

CSS Palette

The CSS palette is an important editor while working on CSS. The code below can be used as is or use it as a basis for changing it to your needs!
QoL Improvements CSS Palette - Click to Expand

IMPORTANT: For technical reasons the -sign and { cannot be added as text. When you copy & paste this snippet into your CSS palette you need to add the -sign and replace the [{] with just {.

CSS snipped provided by Ademal

 font-face {
 font-family: Inconsolata;
 src: url(https://fonts.gstatic.com/s/inconsolata/v21/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7LppwU8WR32lw.woff2) ;
}
#css-palette-panel {
  position: fixed !important;
  width: 25% !important;
  top: 60px !important;
  right: 0px !important;
  border: 2px solid grey;
  border-radius: 5px;
  transition: all 0.1s;
  box-shadow: -5px 0px 10px black, -10px 0px 20px black;
}
#css-palette-panel h4,
#css-palette-panel .form-group:first-of-type,
#css-palette-panel #css-palette-save + p{
  display:none;
}
#css-palette-panel textarea {
  min-height: 73vh !important;
  color: #97ec97;
  font-family: Inconsolata;
  font-weight: 600;
  line-height: 18px;
}
[class*=css-palette-trigger-pushed] ~ #full-layout .page-article {
  margin-left: 12% !important;
}
.hidden-xs .fa-palette {
  background: #14161b;
  border-radius: 5px;
  padding: 5px;
  font-size: 1.5em;
  top: 65px !important;
  right: 5px;
  border: 2px outset grey;
  position: fixed!important;
  z-index: 0;
}
[class*=css-palette-trigger]:hover ~ #hidden-sidebar #css-palette-panel,
#css-palette-panel:hover {
  width: 30% !important;
}
#hidden-sidebar:hover ~ #full-layout .page-article,
[class*=css-palette-trigger]:hover ~ #full-layout .page-article {
  width: 57%;
}

Special Components

A collection of special components which appear in various places on World Anvil.

Scrollbars

These are selectors for styling the scrollbars that appear on scrollable elements, including the entire page. NOTE: These only work in certain browsers (such as Chrome).
Scrollbar - Click to Expand

Snipped provided by Ademal

.user-css ::-webkit-scrollbar,
.user-css-extended ::-webkit-scrollbar {
}
.user-css ::-webkit-scrollbar-track,
.user-css-extended ::-webkit-scrollbar-track {
}
.user-css ::-webkit-scrollbar-thumb,
.user-css-extended ::-webkit-scrollbar-thumb {
}
.user-css ::-webkit-scrollbar-thumb:hover,
.user-css-extended ::-webkit-scrollbar-thumb:hover {
}

Accordion

Credit: User51
Check out this guide on how to create an accordion in an article! If you have a Grandmaster or Sage susbscription check the container CSS guide for an improved solution.

Lists with custom images

Credit: Amy Winters-Voss
A guide on how to create a list with the bullet points replaced with an image of your choice.

Content

CSS Guides