CSS - A Synergasia Reference

Written by KahunaTheElder

Last updated 9/15/20 19:56 BT
As we start to flesh out Synergasia, some of you will want to start modifying the look to match your region. Here, we'll try to document how to make some of the more common changes.
While you will be able to use these features when you are working on your Synergasia region, these may not apply to your personal world if you are not already a World Anvil Guild member. To upgrade - go here: World Anvil Pricing.
NOTE: This is a living document. Which means it is constantly updated. At the top will be the information as to when it was last updated.

THE RULES

When dabbliing in CSS on World Anvil, there are some very important rules that need to be followed. They can be found here: Guide to CSS Formatting in World Anvil. But below are the ones you REALLY need to follow. These are items you are not allowed to modify:

Any elements not contained within ".user-css", ".user-css-presentation", ".user-css-extended", ".map-context-user-css", ".user-css-secret", or ".user-css-rpgblock". The exception being that you may change the background only of ".user-css-presentation".
The main navigation bar
Comments and metadata may not be hidden or drastically altered in readability
World Anvil assets within ".user-css" (and the related classes) such as the Follow button or social media buttons.

In addition, the following are things that will "break" your CSS is you use them, as they are stripped out of code for security reasons:

Words and characters to avoid: single quotes and double quotes
"&lt;" and "&gt;", "<" and ">"
"body"
"container"
"script"
"footer" "style" (can't be used in blocks)

Font Families

There is a quirk in the way CSS is working with the current configuration. You cannot declare a font family in the article CSS. Instead, these must be declared in the Global CSS. To request a font be added (and to ensure we don't duplicate font definitions) please make use of the css-request channel for Synergasia ( - you must be a Synergasia author to access it.

Making region specific changes

If you want to make changes to your region's CSS, you'll need to use a special code trick. In each article is an Additional CSS Classes field under the Design/CSS tab.

In this field, you'll need to out a name for the classes that affect your region. For example, If your region is named "The Foo Bar Experience", you could use "foobar" as your class name. Just type "foobar" into this field (no leading'.')
Then, any CSS you want to change needs to be prefaced by .foobar - for example. If you want to change h1 headers across your pages, you would use:

.user-css.foobar h1{ 
  your
  code
  here
}

Doing it this way will change only YOUR h1 headers.

Changing the nav-strip

Depending on what kind of page you are working on (article vs. category), there are two different classes to make changes in.
For the nav-strip (the default red strip at the top of the article with the "Go To Synergasia Homepage" button, use the following tag (replacing foobar with your region class):

 .user-css.foobar .nav-strip { 
   ...styling code here....
}

If you are looking to style the same link on other pages, this code will do the trick:

 .user-css.foobar div .backtoworld a {
   ...styling code goes here...
 }

Testing CSS

We HIGHLY recommend that you create a test page within your region of Synergasia for testing your CSS. This can be a generic article, and should be kept private.
Use the Article CSS field to add your code, and then be sure to add the region-specific class to your Additional Classes field.
These changes will only affect that one page until it is placed in the Global CSS. Once yoou are satisfied with your changes, we can upload them to the Global CSS. Be prepared, however, sometimes that transition reveals an extra hurdle or two. So be ready to make some modifications (Kahuna or Bob may be able to help, or hit us up in Kahuna's Dsicord server). If you are a World Anvil Guild member, you can alos check the #guild-css-help channel on their Discord server.

Changing Your Site Background

Changing the site background can be a bit tricky. We've made it a bit easier with a quick little piece of code that is placed on every page.
All you need to do is include the CSS below in your CS, and you can change your background without changing others:

.user-css.yourregionclass .ChangeBG{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100%;
  width:100%;
  background: url(imageurl) ;
  background-size: cover;
  display: block;
  z-index: -100;
}

Be sure to do three things if you use this code:
1. Change the region class to the one you are using (see the main text)
2. Change the URL of the image you want to use.
3. Add ChangeBG to the Addition CSS Classes field under the Design/CSS tab

For a reference on tags you can access, check out this file: CSS Complete Site