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.

     

Accessing Styling settings and using Guild 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 live styling editor.
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!

 

General styling settings

There are some parameters you can tweak regardless of if you have a Guild theme enabled. You'll find all of them in the advanced Styling settings, which you can access like this:

 

1. Click the gear icon on the left sidebar.
2. Click the art palette icon.

 

Then, you'll have a number of fields you can easily tweak without CSS:

 

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

 

Additionally, these's a number of settings you can edit from the World Manager (at the top of the sidebar):

 

1. On the left sidebar, open the Articles & World Manager.
2. At the top left, click on your world name.
3. Then, in the bottom toolbar, click on the styling settings button.

 

There, you'll be able to edit the following:

 

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

 

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