World Anvil gives you a lot of options to customize how things look in your world - from choosing a world theme to customizing the details! This article walks you through the options to style your World Anvil world YOUR way.
Contents
It's a common misconception that you need to know CSS to style World Anvil. While you can use CSS to completely redesign the way your world looks, you certainly don't need to.
Using Guild Themes
Available to all Guild subscription tiers. Upgrade here.
As a Guild member, you have access to pre-made themes that change things like colors, fonts, and default background in your world:
- Click the gear icon and then the art palette to access styling settings.
- In the Basic tab, use the Theme dropdown to choose a theme.
- Save changes and view your world to see the new look.
Check this page to see all Guild themes available to you!
General styling settings
There are some parameters you can tweak regardless of if you have a Guild theme enabled:
- World cover: this image will be shown in the homepage header, so it's recommended to make it wider than tall. You will need to upload it before you can use it.
- Global cover: this will be used as the default cover image everywhere in your world if you haven't set a more specific one. Similarly to the world cover, it's better if it's in landscape format, and you'll need to upload it beforehand.
- Page background: this is the image that is displayed behind the article's content, as a general background to the world. You'll also need to upload it beforehand.
- Base font size: fonts in your world are relative to a basic font size, which is 13 by default. If you'd like to make all text larger or smaller, add the base number here.
- Base font color: click on the field to reveal a color picker. Use this to change the basic font color of your world.
Use images
Images are a great way to break up your articles, making them easier to read. Instead of a text-wall of five paragraphs, sprinkle in some images to make the same content more digestible. Here are some tips!
- Side panel images: add one image (or more) in the side panel, so that it appears in parallel to the main text body. Learn more about customizing the side panel.
- Floating images: if the image is taller than wide, make it float left or right so that the text wraps around it. Learn more about embedding images here.
- Paragraph separators: have you ever seen those fancy abstract lines used in some books to separate paragraphs? Use them! Simply create an image that is very wide but very short, and embed it centered between two paragraphs.
Check the guide to images for more details.
Paragraph formatting to improve layout
When all the text in an article looks the same, it can really impact the reading experience. By mixing things up, the text will be more digestible for your readers.
- Good header structure: try to keep every section of your article under 300 words. If it gets longer, use sub-headings to organize your content.
- Quotes, alouds, and more: use quote panels to write what someone said word by word. And aloud panels to clearly highlight a short paragraph from the rest! Spoiler buttons and tooltips are also amazing tools to hide parts of the text.
- Columns: another way to make your articles more readable is with columns! A common use for columns is to put small subsection next to each other. Learn more about columns here.
- Drop caps: depending on the style of your world, drop caps are a great stylistic choice to make the first paragraph of a section stand out! Learn about drop caps and other character formatting options.
For a full list of article formatting options, check the Guide to BBCode.
Custom article templates
Available to the Grandmaster subscription tier and above. Upgrade here.
As a Grandmaster, you can create your own article templates. This is a great way to ensure that all articles about a specific topic will have the same structure and design. For example, you might want all articles about NPC antagonists to have the same set of custom sections or sidebar fields.
Learn all about custom templates in the community Codex guide!
CSS
Available to all Guild subscription tiers. Upgrade here.
CSS is a stylesheet language that you can use to change how your world looks with great detail. If you really want to get into the weeds of detailed customization, here's how to edit your world CSS:
- Click the gear icon and then the art palette to access styling settings.
- Access the CSS tab.
- Write your CSS in the Presentation Cascade Stylesheet text field.
You can also write CSS that applies to a single article like this:
- Edit the article as usual.
- Go to the Design tab, and then select the CSS sub-tab.
- Write your CSS in the Article CSS field.
For more information, check out these resources:
- CSS on World Anvil, which includes the CSS rules and details about the security filter we employ.
- W3Schools' CSS course for an introduction to CSS.
- Our Discord server, which includes a #css-help channel to ask for help with your world CSS to other Anvilites.
- Sage Sages looking to commission their own custom theme built with CSS should use the "Hire a World Anvil professional" form on the Professional Portal (Available from the menu when you click your profile picutre in the top right).
