CSS on World Anvil

There are a few rules and special considerations for how to use CSS on World Anvil. CSS is a powerful tool and the platform offers us most of its power. A few restrictions are in place to protect the system from bad actors and the general integrity of the individual pages.  

Adding CSS Rules

In order for the CSS to affect your world, you have to add the CSS rules to either the World CSS or the Article CSS. The world CSS can be accessed in one of two ways:  
  1. In your world configuration, under the Styling tab, in the Presentation cascade style sheet (CSS) box.
  2. In the presentation view of your world, there is a white palette icon on the right side of the screen (On-the-fly Editor).   In this editor, you can switch the theme and add any CSS rules. They will be added to the same box above. Make sure to hit save before reloading the page as changes will be lost otherwise.
On-the-fly CSS Editor
When CSS is added in the styles text area or the theme is changed all these changes will be applied to the page immediately. Remember to save to keep the changes.
The article CSS can be applied in each article under the Display > CSS tab. These CSS rules will only be used in that specific article.  

The Rules

These rules are intended to protect the general integrity of the page layout and to ensure that the World Anvil branding is not changed. This is necessary so visitors may easily recognize your webpage as a part of World Anvil. This means that these rules do not apply if you have a Sage or above subscription.   Breaking these rules is a violation of the terms of service and may lead to a block on your account!  
  • You may manipulate elements which can be targeted with one of the following CSS classes as root selector:
    • .user-css
    • .user-css-extended
    • .map-context-user-css
    • .user-css-secret
    • .user-css-rpgblock
  • You may change the global background image with the .user-css-presentation as root selector.
  • You may change the appearance of the global navigation trigger button with the .world-navigation-palette-trigger as a root selector.
  • You may change any elements that only appear for you as the author of a world, such as the CSS editor palette icon and the quick menu buttons.
  • You may not change or hide the main navigation bar.
  • You may not hide or change the metadata section in a significant way which reduces readability.
  • You may not hide or change the [tooltip:Grandmasters may disable comments and community interactions in the world configuration. Everyone can disable comments on each article.]comments[/tooltips] section in a significant way which reduces readability.
  • You may not alter the World Anvil footer in any way.
  • You may not alter World Anvil assets such as the Follow, Like etc. buttons.
  • You may not alter social media asset buttons such as Patreon, Kofi, Twitter, Reddit etc.
  If you have any questions concerning these rules or are unclear on a specific element please ask on the Discord server in the #guild-css-channel.   Visual Aide for the Rules - Click to Expand
This visual aide is only intended as supplementary and is not authoritative. The green areas may be changed, the blue areas may be changed but not hidden and the red areas may not be changed. It is similar on most other pages as well.
CSS Rules Visual Guide

Security Filter

Each time CSS rules are added to the world or article CSS boxes the security filter is applied. This filter ensures that no malicious code can be integrated into the system. This can be a little inconvenient sometimes but it's necessary to keep the platform safe.  
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)
  • Custom classes beginning with .sh are removed.
NOTE: The On-the-fly editor does not apply the security filter until you hit save. This means that if something stops working after hitting save and reloading the security filter probably deleted something from your CSS.

World Anvil Themes

World Anvil offers many themes which can be used to customize the world. These themes were created and usually donated by community members. These themes apply numerous rules on top of the existing default CSS rules. All the examples in the CSS guides assume that there is no theme selected. These themes may sometimes conflict with your CSS. You can often use the !important modifier to resolve this conflict. However, the use of !important is considered bad practice and should only be done if there is no other way.   Themes often define a number of CSS variables. It is recommended that you change the values on these variables if you want to change something in general.  
Theme Catalog
Generic article | Feb 19, 2021

Preview screenshots of each theme and links to the creators!

CSS Guides
Unique CSS Classes
It is possible to add unique CSS classes to most pages and elements in World Anvil. This is useful if you want a rule that only applies to one specific page.   They appear on
  • Articles
  • Categories
  • Map Pins
  Additionally images can be targeted directly with their id, the added class is image-123 for image with id 123.
Using the Examples
The examples in the guides will usually create a specific effect or simply present the default CSS applied to the element. You are expected to change these rules to fit your needs.   There are also a small handful of CSS snippets that are provided as-is, that can be copied into your CSS configuration to achieve a specific effect. If you are unfamiliar with CSS, it is recommended that you don't try to tweak these snippets if you just want to achieve their stated effect.
Editor CSS
The interface of World Anvil can be changed with CSS just like the presentation view. This feature is currently not documented, but CSS works the same way on any website. The CSS code can be entered in the same section you can add the World CSS in the world configuration, using the text box specifically provided for this purpose.  
CSS Framework used in the editor interface
Bootstrap 4.x

Articles under CSS on World Anvil


Comments

Please Login in order to comment!