CSS on World Anvil

Guild Exclusive

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

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 page.  

Adding CSS Rules

CSS Rules have to be added to a world or directly an article.  

Per World CSS

The World CSS can be accessed in one of two ways and will apply the CSS to all presentation pages of that world.  
  1. Presentation Cascade Stylesheets (CSS)
  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.
 

Per Article CSS

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.

Article CSS Panel

 

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
    • .user-css-vignette
  • You may change the global background image and the back to top button with .user-css-presentation as root selector.
  • You may change the tooltipster tooltips & article previews with .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 world editor top bar.
  • You may not hide or change 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 comments section in a significant way which reduces readability.
  • You may not hide the quick menu buttons in the corner of the screen as they are seen by all logged in users.
  • 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 #css-help.   Visual Aide for the Rules - Click to Expand
This visual aide is only intended as supplementary and is not authoritative. The areas with green borders aroudn them may be changed in any way, the areas with cyan broders may be changed but not hidden and the areas with red borders 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.
  • Any classes beginning with css 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. You can find the theme catalog linked below.  

Example Theme with Code by ZogMadDog

Harry Hartzog has created a theme and has graciously given the CSS codes for it. It is kept up to date and expanded. All the CSS rules found within are commented with what they do. Anyone is free to use any part of the code for any purpose they wish. Its primary goal is to serve as a reference implementation of a full theme.  
Download File (External Dropbox Link)
  Check out their world here:  
Perillel
CSS Framework
Bootstrap 3.3
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.0

Articles under CSS on World Anvil


Comments

Please Login in order to comment!