CSS on World Anvil
Adding CSS RulesCSS Rules have to be added to a world or directly an article.
Per World CSSThe World CSS can be accessed in one of two ways and will apply the CSS to all presentation pages of that world.
- Presentation Cascade Stylesheets (CSS)
- 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.
Per Article CSSThe 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 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 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.
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.
- 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 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. You can find the theme catalog linked below.
Example Theme with Code by ZogMadDogHarry 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:
- Adding CSS Rules
- The Rules
- Security Filter
- World Anvil Themes
- Commented Example Theme by MadZogDog
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