Workflow for styling your world (without CSS)

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.

 
 
 

World Styling Menu

 

The World Styling Menu lets you edit what your world looks like, from basic options like pre-made themes to custom styling without CSS.

 

Premade themes

As a Guild member, you have access to pre-made themes that change things like colors, fonts, and default background in your world. To access your world's Styling settings and choose a them:

 

1. View your world in view mode (click the globe button at the bottom of the left sidebar).
2. Click on the palette button on the right. This will open the world styling menu.
3. Use the Theme dropdown at the top to select a theme. Themes are applied immediately as a preview (but they're not saved) so you can check how they look.
4. Once you've chosen the theme, click the save button at the bottom.

 

Check this page to see all Guild themes available!

 

World images

Under the Theme tab, you can also change these three images:

 

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

 

Additionally, if you're a Sage of the Guild, you can also toggle white labeling, which will remove World Anvil branding from your world.

 

Style controls: styling without CSS

In the Style Controls tab, you have a lot of deep customizations features that don't use CSS. To use it, follow these steps:

 

1. Select the tab for the type of element you want to change (for example, "Headers").
2. Select the specific element you want to edit (for example, "Page Title Header").
3. Use the controls to edit the style of the selected element, such as color, background, font, and more.
4. Once you're happy with it, click the "Save changes" button.

 

The styles you edit will apply to your entire world, not just the page you have open. To edit the style of an individual article, you'll have to use CSS (check the guide to CSS).

 

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.

 

Customize the global navigation side panel

 

When browsing your world, you'll see a tab with a list icon on the left side of the screen. Click on it to view the world's table of contents, maps, and more from any page on your world.

 

Although the default content is very useful already, you can customize its contents!

 

1. Click the gear icon and then the double gears in the left sidebar to access the world configuration.
2. Go to the Display tab and then to the Global Content sub-tab.
3. Use the Global World Navigation Sidebar Custom Content field. Anything you add there will appear at the top of the navigation panel.

 

The field is BBCode-enabled, so feel free to use any formatting, including images and interactive embeds!

 

Custom article templates

 

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

 
 

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:

 

1. View your world in view mode (click the globe button at the bottom of the left sidebar).
2. Click on the palette button on the right. This will open the live styling editor.
3. Use the text field to write your CSS. Since this is a live editor, its style will change as you write your CSS.
4. Click the Save button; if you don't, changes won't be saved!

 

Article-specific CSS

You can also write CSS that applies to a single article like this:

 

1. Edit the article as usual (more information on article editing).
2. Click the art palette button in the bottom toolbar.
3. Write your CSS in the Article CSS field. You can also set article-specific CSS classes to use as selectors in your global world CSS.

 

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