Available to all Guild subscription tiers. Upgrade here.
With CSS, you can define the visual style of your world with code. World Anvil's CSS support gives you a lot of control over the way your world looks, even where and how elements appear on the page. CSS is a coding language used all over the internet to define what websites look like, from colors to animations. While explaining how CSS works isn't within the scope of Learn, this page will explain how CSS works on World Anvil specifically and give you some resources to learn more.
Contents
What's CSS?
Websites are built using HTML and CSS, two coding languages that tell your web browser everything it needs to know in order to display a website. HTML tells the browser about the structure and contents of the website (on World Anvil, BBCode is like simplified HTML!), while CSS is all about defining what each element should look like.
As an example, the BBCode [h1]Title[/h1] tells the browser that "Title" is a first-level header. Then, CSS can tell the browser how big should this title be, what font to use, if it should be bold or underlined, etc. To do that, CSS uses selectors, i.e. keywords that refer to specific elements. For example, to make a first-level header red, you would use the h1 selector.
Resources to learn more
The above is only a very basic explanation. If you aren't familiar with CSS, these resources might be useful:
- Codex CSS guides: These are guides written and maintained by the community. They include selectors for various elements in your world.
- W3Schools' CSS course: A good starting point to learn CSS.
The rest of this guide assumes you have at least beginner CSS skills.
What are you allowed to change with CSS on World Anvil?
You are allowed to target most, but not all, elements of your World Anvil world. The exact rules are as follows:
- In general, you can modify anything that's under the .user-css selector (or that includes "user-css", such as .user-css-extended).
- You may not alter in any way the following elements, even if they are under a user-css selector:
- The header bar (which includes the World Anvil logo, as well as other links).
- The global World Anvil footer, at the very bottom of every article.
- Social media buttons like Patreon, Kofi, Twitter, Reddit etc.
- World Anvil social buttons (like article, follow world, etc). You can disable community features in the world configuration page.
- You may style the following elements, as long as you don't hide them or significantly reduce their readability and usability:
- Metadata section at the bottom of all articles.
- Comments section. You can disable community features in your world configuration page.
Breaking any of these rules is against World Anvil's Terms of Service, and and repeatedly doing so might result in your CSS being disabled or even your account being blocked. If you're not sure whether your CSS breaks the rules above, you can email us at [email protected] to check!
Sage If you're Sage of the Guild (or above), you can modify everything about the page except for the report button at the bottom of the article. You can also enable whitelabeling to remove all World Anvil branding without CSS.
Where can I edit my CSS?
Your world's CSS can be edited from these locations:
- World CSS: In presentation mode, find the art palette icon on the right edge of the screen. Changes to the CSS there are applied as you type and saved to the world CSS when you click the save button.
- Articles: When editing an article in advanced mode, click the Design tab at the top. Under the CSS sub-tab, you can add CSS that will only be applied to this articles.
- Timelines: Timelines have their own CSS section too. Click on the art palette icon in the bottom toolbar to edit it.
Additionally, most entities (articles, maps, chronicles, etc) also have a custom CSS class text field, which you'll find in their settings. This custom class will be applied to that page only and you can use it to select specific pages from the world CSS.
Edit mode CSS
In your world Styling settings, you'll also see a CSS field for the editing side of World Anvil. Changes here will only be visible to you (and your co-authors). As this only affects your experience, your CSS in this field is exempt from all rules above. However, you should still be careful, as using the wrong CSS here can severely impact your ability to edit and navigate your own world!
My CSS isn't working! What can I do?
CSS is a very technical feature that's only recommended if you know what you're doing. The World Anvil team are unable to provide official support on general CSS questions, but if you get stuck, try asking in our community support channels, a fellow Anvilite might help you!
- Our Discord server has a #css-help channel specifically for these questions!
- If you don't use Discord, you can also ask in our subreddit!
Important note: You are responsible for your own CSS! Also, please note that due to the nature of CSS, it is impossible for us to predict how your CSS customization may interact with any future updates to World Anvil. While we try to have clear communications around anything which may affect presentation mode, upcoming improvements and changes to World Anvil may disrupt your CSS.
