CSS Master Checklist
This CSS test world is for users who've read the World Anvil Codex - Guide to CSS Formatting article and know how to use their browser's inspect tool.
There are no World Anvil tutorials here, check the World Anvil Codex for those.
There are no World Anvil tutorials here, check the World Anvil Codex for those.
Rules
Please read the full list of rules on the World Anvil Codex. This is just a short summary. Breaking the rules will result in restriction of features and/or bans as per the Terms of Service.- Anything that is NOT contained within: .user-css, .user-css-extended, .map-context-user-css, .user-css-secret, .user-css-rpgblock is off limits. You need to make sure everything you style starts with one of these.
- Due to security, you cannot use any of the following words or symbols in your css. They will be stripped and your css will break. If something isn't working, it might be because you have used one of these words or symbols:
" ' < > body container script footer style
- You're not allowed to modify any aspect of the World Anvil header, or footer. If you have access to whitelabel features, you can enable this feature to remove them. Don't do it with CSS.
- Comments and metadata may not be hidden or drastically altered in legibility
- If you're making a World Anvil CSS Theme for sale or for the guild, you must not hide/disable ANY features with CSS. Get rid of all those display: none; bits.
- If you're making a World Anvil CSS Theme for sale or for the guild, avoid using !important; to force css changes as the user won't be able to override them with their own styling if they want to.
- If you're making a World Anvil CSS Theme for sale or for the guild, avoid styling RPG blocks as this can heavily interfere with their styling especially for different systems.
- Make sure you own the correct rights and or licences to use: web fonts, images, css snippets from another source.
- Do not steal CSS from other people's worlds. This can result in a takedown notice. If you want to make something inspired by their theme, or part of it, contact them first and ask for their permission.
General Tips
- Make sure you've read the World Anvil Codex - it coveres it all. This world is for users who have read the codex and know what to do. There are no tutorials or beginner guides on this CSS test world (because they're on the World Anvil Codex).
- Double check that your CSS will work in different browsers. Some features require extra CSS for compatibility. See caniuse.com and w3schools
- Make sure any images used within your CSS theme are hosted on (one of) your World Anvil worlds so that you don't lose it and the link won't break.
- Adding many fonts, many animations, and large images will make your world SLOW to load. Optimise as much as you can. Test your page load speed with GTmetrix or similar.
- If your font isn't working, check the rules above for any no-no words/symbols as some font names contain these words. Check the World Anvil Codex for a tutorial on how to add fonts.
- Keep your CSS tidy with comments. It will make it easier for you to find things later.
- Back up copies and versions of your CSS. It's an easy mistake to overrite something by mistake and lose work.
- If you want to customise a particular thing, but it doesn't have a class name, put in a World Anvil feature request with your reason why it needs one!
- Ask for help! If you get stuck or can't find the name of something FIRST CHECK THE CODEX, then ask for help in the World Anvil Discord, or contact
Back to quick navigation.
Fonts and Text
- all major text examples (headers, subheadings, bold, italics, small, etc) - BBCode Examples
- type should have good visual hierarchy
- the choice of font should be legible
- consider the line height and font size for readers who have dyslexia or visual impairments
- consider the contrast of the text (more on colour in the next section)
Back to quick navigation.
Colour
As a general rule of thumb, plan out the colours you're going to use in your CSS theme. They will be used in all of the features you style so make (or pick) a palette that works well. Things to consider:- check if your colours meet the guidlines for contrast accessibility with accessible-colors.com
- try not to use too many colours in your theme or it can look busy and cluttered
Back to quick navigation.
World Homepage
Text and layout
- world title - find on world homepage
- world authors - find on world homepage
- world current date - find on world homepage
- world introduction / vignette - find on world homepage
- world category content - pops up when you click on a category in the ToC find on world homepage
- homepage custom content sections (full width, and the three cols below) - find on world homepage
Table of Contents
Found on the world homepage, category pages, and sometimes embedded into articles (see BBCode Examples ) Requires styiling for:- font, font size, link colour, line height, padding
- emphasized articles in the ToC
- emphasized master timeline
- child articles and categories
- (optional: custom icons to replace folder, file, hourglass)
book covers
Categories can be displayed as a book with a cover on the world's homepage. You can just change the fonts and colours or you can really go to town with it! They can also be embedded into articles (see BBCode Examples ). Requires styiling for:- book title
- hover effects
- book excerpt
- if the book has an excerpt or not
- if the book has a cover set or not
article blocks
Article blocks primarily show up on the world's homepage and within category pages. They can also be embedded into articles. Requires styiling for:- cover image
- background
- article title
- excerpt
- subheading (template/date)
- article block pop up on hover (see example below)
map box
Map box are the list of maps displayed on your world's homepage and under categories that the map is assigned to. Requires styiling for:- image
- background
- title
- description
community panel
Displayed on the world's homepage above the followers counter, if feature is enabled. Requires styiling for:- panel background
- header title
- subscriber group labels
- community hub button
followers counter
Displayed on the world's homepage. Requires styiling for:- panel background
- header title
- link
- button
world campaigns
Displayed on the world's homepage. Requires styiling for:- details box background
- heading
- small text
- description
- buttons
world heroes
Displayed on the world's homepage. Requires styiling for:- details box background
- heading
- small text
- description
- buttons
- Bear in mind that users can swap the position of their maps, table of contents, and timelines under the display tab on the world config page. These may not always be in the default positions!
Back to quick navigation.
Navigation
Search bar
Found by default on the top left of world/article covers. Requires styiling for:- the search box and icon
- the dropdown menu when searching
backtoworld
By default this is the red rectangle button at the top of article pages that takes you back to the world's homepage.nav strip
This is similar to backtoworld, but is full width and has a different class. It's found on category pages and timeline pages. Nav strip is also found on map pages, but is not full width.nav tabs
The nav tabs are found in two places, the first are in the extended section beneath articles which show the metadata and timeline tabs (if a timeline is attached). The other can be found on character articles that have an active player character in Heroes attached to them. Here the tabs will display over the cover image similar to backtoworld. See RPG Character Example. Requires styiling for:- tab colours (including active)
- hover effects
- size considerations for the different types
search page
You can find this page by ending your world's url with /search (see this world's search page). Most features will be covered methodically below, but there may be additional tweaks you want to make on this page.article horizontal navigation
This shows the previous / next article at the bottom of article pages, along with a link to the category it's under, if these have been set (see bottom of this article for an example).Back to quick navigation.
Article Templates
building
- Building Article Template - includes ruin date
character
- Character Article Template - includes family tree, family bloodline, relationship panel
- RPG Character Example - includes attached player character, journal tab, extra sidebar, associated RPG block
condition
conflict
- Conflict Article Template - includes belligerents panel in the sidebar if less than 3, wider sidebar
- Conflict Example 2 - includes belligerents wide within the article if more than 2
document
- Document Article Template - includes document button and pop up
ethnicity
generic
geography
item
- Item Article Template
language
- Language Article Template - includes dictionary
material
- Material Article Template - includes chemical structure in sidebar
military unit
myth/legend
- Myth Legend Article Template
natural law
organization
- Organization Article Template - includes organization motto above sidebar
profession
- Profession Article Template
plot
prose
- Prose Article Template - includes view modes for black on white, white on black, and their buttons
title/rank
- Rank Title Article Template
session report
- Session Report Article Template - includes wide sidebar with character portrait
settlement
species
- Species Article Template
spell
- Spell Article Template
technology
tradition
vehicle
Back to quick navigation.
Major Features
timelines
Examples:- Timeline Event Colour Examples
- Timeline BBCode Usage Examples
- Timeline Event Icon Examples
- timeline event's page
- timeline attached to an article (displays in extended), see BBCode Examples
- different event type colours (background, border, icon border, etc)
- headings, subheadings, text, links, buttons
- middle line & circles
maps
- full screen map - background, labels, popups, map sidebar & its bbcode, legend, compass, layer toggle, nav-strip
- embedded map (see BBCode Examples ) - as above, check if anything is missing
calendars
- Calendar Example - WIP
charts
- Charts Example - background, images, titles, buttons, hover, chart load, different versions
statblocks
I'm only showing examples of statblocks in the generic category/system.- Statblock Examples - background, headings/type, buttons, tables, roll table results
family trees & bloodlines
- See example on Character Article Template - background, borders, links, labels etc
Back to quick navigation.
Other Features
world anvil bbcode
Check this article for everything: BBCode Examplessecrets
Visible to only the author and assigned subscriber groups. A visible-to-all version is on BBCode Examples.gamemaster features
Visible to only the author by default. You'll need to set up your own examples to see them.- (.panel-greatgm) Notes for storytellers and GMs - found on all article templates, displays above articles by default in red
- (.panel-generic-ggm) NPC sheet panel - bonus information filled out on character templates, displays above articles by default in beige
- (.panel-generic-ggm) Plot sheet panel - bonus information filled out on character templates, displays above articles by default in beige
followers page
Found by ending your world url in /followers, see this world's followers page.image credits
Displays underneath images when fields are filled out under file manager. See BBCode Examplesglobal copyright footer
Appears at the bottom of all pages, scroll down to the bottom of this page for an example.global article content block
Displays on all pages at the very top of the sidebar, except for generic full width articles, where it displays beneath the article content. Compare Generic Article Template and Generic Article Template (Full Width) .article metadata section
As per the rules at the top of this page, don't drasitcally edit this section or hide any content. Make sure the font and colours are legible.buttons
Double check the rules before modifying all buttons. For examples see BBCode Examplesalerts
This is the pop up that shows at the top of the screen when you follow/unfollow like/unlike comment/delete comment on something. There are also dice roll results which are kind of alerts, see BBCode Examples or click this 1d20comments
See example at the bottom of BBCode Examples - name, link, date, background, text, comment signatureactivate page
Found by your world url and "/activate" e.g. https://www.worldanvil.com/w/css-test/activatensfw article
Example (it's actually SFW, but marked as NSFW): NSFW Article Example - you may need to log out to view the warning.password protected article
Example: Password Protected Article (the password is "password").Back to quick navigation.
Whitelabel Features
If you have whitelabel features enabled, you can style the small whitelabel container that appears on each page (Powered by World Anvil). View example on the world of Melior at the bottom right of the screen.Back to quick navigation.
Miscellaneous
Access denied page
This is just an article you set up and define in the world config. Any time you try to access private content you'll end up there. Example: Private Article Example Also check the hover on this:css per tag
You can do css per tag, so anything with that tag will get styled.custom containers
You can use custom containers and sections such as [container:classhere] [/container] to style unique content.hover effects
Go over & check the hover effects of interactive elements. Consider if they should be visually different on hover to indicate there is an action.subscriber subcontainers
You can set up subscriber subcontainers under the Access panel of your world settings and paste them into articles etc. These can be styled if you wish but have a unique id.userstates
these can be styled but are not necessary to be modified, see BBCode Examples [userstate:loggedin] [/userstate][userstate:loggedout] [/userstate]
[userstate:follower] [/userstate]
[userstate:notfollower] [/userstate]
self assignable groups
You can set up self assignable groups in the Access settings of your world, these will display as a checkbox option. See an example on the world of Melior at the top of the sidebar.User Variables
There are a LOT of user variables. You can't cover all of them, but these are things to consider if you are doing any drastic changes:- things in things - common examples: bbcode things in the sidebar, in secrets, spoilers etc.
- layout configuration on the world homepage - you can choose where the ToC, maps, and timelines go
- layout configuration of category pages
- whitelabel - if whitelabel is enabled it will hide the World Anvil header and footer, and display the "Powered by World Anvil" box instead
Back to quick navigation.
NOW TEST THROUGH THE LIST ON MOBILE
Yes, really. If you've heavily modified layouts, margins and paddings, things might need fixing for mobile & tablet devices. Also, check on bigger screens! I've seen a few people use background images that look fine on their small monitors but completely broken on bigger screens.Back to quick navigation.
Frequently Asked Questions
How do I add a font / how do I get my font to work?
Check the guide on the World Anvil Codex. Make sure there are no instances of the banned words and/or symbols as listed in the rules above. Sometimes the font name can be the issue, in which case choose another font.How do I submit a CSS theme for the whole guild to use?
This is a manual process and you will need to contact the developer, Dimitris Havlidis, via Discord.Themes must completly cover all features in this master checklist, follow all rules, and be of a high design standard.
Dimitris may accept or decline (as well as modify or remove) themes at his own wish.
Once accepted, Dimitris will thoroughly check your code for any malicious scripts and rule violations.
If your theme is accepted and put onto World Anvil for the guild members to use, you may be asked to maintain it with future updates. Please use the following file and folder structure with exact names and file formats when submitting a guld theme proposal:
Click to view folder structure
(bracketed) items are folders. ignore the spaces on the filenames.
(Theme-Name_Theme-Creator)
- (css)
- style . css
- (examples)
- Put in this folder at laest three hi res screenshots of your theme, showcasing different features. Ideally this would be a screenshot of the homepage, an article page and a timeline page.
- (images)
- background . jpg
- cover . png
- book . png
- any additional images you have used in the theme
- findandreplace . txt - this should be a text file with links to the urls you've used in your theme and what image file to replace them with
- (js)
- Put in this folder any java script used in your theme
can i sell World Anvil CSS themes?
Yes, as long as they follow the rules. You can create/sell them directly for a client, or you can sell them on your own online store/shopfront.Where do I find someone to make a custom theme for me?
Join the World Anvil discord server and search in the #marketplace channel, or put in a request on the #commission-search channel. Or just throw money at and he will make you shiny things!Back to quick navigation.
This is the global article content block section and it appears on every single article page of your world. Note that on the full width generic article and prose article it may not appear on the top right part as there is no sidebar there. This can be used for announcements for your project, or it could be a subtle advertising spot for a call to action to join your Patreon, back your Kickstarter, or join your Discord server!
Comments