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 RulesIn 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:
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.
- In your world configuration, under the Styling tab, in the Presentation cascade style sheet (CSS) box.
- 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.
The RulesThese 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:
- 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.
Security FilterEach 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 "
- "<" and ">", "<" and ">"
- "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 ThemesWorld 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.
Unique CSS ClassesIt 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
- Map Pins