Component CSS

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 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;
}
  Hide Template & Publication Date - Click to Expand
.user-css .article-panel .details,
.user-css-extended .article-panel .details {
  display: none;
}

Map Preview Block

The map preview block does not have a BBCode to make it appear anywhere. These show up on the homepage and associated category pages, organization & location article sidebars. They also appear in the global world navigation on the left side.   Default CSS - Click to Expand
.user-css .map-box {
    padding: 10px;
    background-color: #f9f9f7;
    border: 1px #d4d2c5 solid;
    margin-bottom: 15px;
}
  Add Hover Effect - Click to Expand
.user-css .map-box:hover {
  
}

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

To change the background of your world (specifically the area to the left and right of your article), simply place the direct URL of an image (that you've uploaded to World Anvil) inside the parentheses in the following code example. The direct link should end in ".jpg" or ".png", depending on the type of image you uploaded.   Please 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;
}

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: Copying this code will not copy the -signs. You have to write them in manually afterwards. And you need to replace [{] with { at the end of the media line.
CSS snipped provided by Graylion
#world-editor-bar.user-css {
  display: flex !important;
}
 
#world-editor-bar.user-css .p-0 {
  display: flex ;
}
 
 media only screen and (max-width: 600px) [{]
  #world-editor-bar.user-css .label,
  #world-editor-bar.user-css .btn,
  #world-editor-bar.user-css ul,
  #world-editor-bar.user-css 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.user-css .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;
  }
}
 
.user-css span.world-edit-toggle.btn.btn-success.btn-xs.tooltipster.tooltipstered .fa-pencil {
  background-color: darkgreen !important;
}
 
.user-css span.world-edit-toggle.btn.btn-xs.tooltipster.tooltipstered.btn-danger .fa-pencil {
  background-color: darkred !important;
}
 
#world-editor-bar.user-css .fa-compass,
#world-editor-bar.user-css .fa-lock {
  background-color: darkred;
}
 
#world-editor-bar.user-css .fa-star,
#world-editor-bar.user-css .fa-lock-open {
  background-color: darkgreen;
}
 
#world-editor-bar.user-css .fa-wrench,
#world-editor-bar.user-css .fa-dashboard,
#world-editor-bar.user-css .fa-globe-stand {
  background-color: blue;
}

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 Jacklyn
.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 {
}
You can add a floating back to top link with a bit of CSS and BBCode in your articles. As a journeyman you can put the BBCode into the global copyright footer and as a master you can put it into the global header. As a Grandmaster check out the Grandmaster Container CSS guide as there is an even better option. Adjust the numbers for your needs!   CSS - Click to Expand
.user-css #back-to-top-link 
{ 
	position: fixed; 
 top: 150px; 
 right: 50px; 
 z-index: 1; 
}
 
[h4|back-to-top-link][url:#]Back to Top[/url][/h4]

Content

CSS Guides
Additional Guides
Credit: Amy Winters-Voss
Custom Bullets with CSS + Small Image or SVG (Ditch ul & li)
Generic article | Sep 21, 2020

Comments

Please Login in order to comment!