CSS Stuff

CSS theme stuff for Root Directory World Anvil Site (This site) Part of this is for an easy way to grab the code for custom created things, that can't be a "variable" or whatever, because it has custom content within it, and you can't do that with World Anvil variables. Speaking of site variables, you can check out a list of them, linked on the side.

Site Variables

Generic article | Nov 1, 2025

A list of site variables used on this site.

CSS Tutorials

CSS Sidebar Menu

Generic article | Oct 8, 2025

CSS tutorial of the Sidebar Navigation Menu. *outdated*

CSS Checkboxes

Generic article | Oct 8, 2025

CSS tutorial of functional checkboxes.

Custom Elements

Item	Code	Example
Generic Box Contrasted when in certain elements: alt sections, statblock trackers, spoilers, tables	[container:generic-box]Content[/container]	Content
Generic Info Box Contrasted when in certain elements: alt sections, statblock trackers, spoilers, tables	[container:generic-box info] [section:fas fa-circle-info] [/section] Vertically centered icon and text. [/container]	Vertically centered icon and text.
Generic Box - Skyline Edition™ Does not get contrasted	[container:generic-box full-skyline]Content[/container]	Content
Generic Box - Light Skyline Edition™ Does not get contrasted	[container:generic-box full-lightSkyline]Content[/container]	Content
Generic Box - Gilded Edition™ Does not get contrasted	[container:generic-box full-gilded]Content[/container]	Content
Alt Section (row)	[container:alt]Content[/container]	Content
Alt Section (box)	[container:altbox]Content[/container]	Content
Inline Codeblock Has to be section* tags.*	This is some text [section:inline-code]that has[/section] an inline codeblock.	This is some text that has an inline codeblock.

Custom Entry Section

Put these in the full footer section, under the Trivia. (If trivia section is there, put a horizontal rule in)

Item	Code
Unofficial Entry	[container:article-competition-entries unofficial-entry][img:ID\|left\|100\|nolink] Entry for @LINK by USER[/container]
Basic WA Entry Tag page with event tag for image to display.	[container:article-competition-entries][container:article-competition-entry][h4]Entry for EVENT[/h4][container:m-t-10 mt-2][url:https://www.worldanvil.com/community/challenge/EVENT/homepage][container:btn btn-sm btn-primary]Competition Homepage[/container][/url][/container][/container][/container]
Prompt WA Entry Tag page with event tag for image to display.	[container:article-competition-entries][container:article-competition-entry][h4]Entry for EVENT[/h4]Answering "[b]PROMPT[/b]"[container:m-t-10 mt-2][url:https://www.worldanvil.com/community/challenge/EVENT/homepage/Nulcheck][container:btn btn-sm btn-primary]Visit Nulcheck's Competition Page[/container][/url] [url:https://www.worldanvil.com/community/challenge/EVENT/duel/ID][container:btn btn-sm btn-primary]Check out other answers to this prompt[/container][/url] [url:https://www.worldanvil.com/community/challenge/EVENT/homepage][container:btn btn-sm btn-primary]Competition Homepage[/container][/url][/container][/container][/container]

Item

Code

Unofficial Entry

[container:article-competition-entries unofficial-entry][img:ID|left|100|nolink] Entry for @LINK by USER[/container]

Basic WA Entry
Tag page with event tag for image to display.

[container:article-competition-entries][container:article-competition-entry][h4]Entry for EVENT[/h4][container:m-t-10 mt-2][url:https://www.worldanvil.com/community/challenge/EVENT/homepage][container:btn btn-sm btn-primary]Competition Homepage[/container][/url][/container][/container][/container]

Prompt WA Entry
Tag page with event tag for image to display.

[container:article-competition-entries][container:article-competition-entry][h4]Entry for EVENT[/h4]Answering "[b]PROMPT[/b]"[container:m-t-10 mt-2][url:https://www.worldanvil.com/community/challenge/EVENT/homepage/Nulcheck][container:btn btn-sm btn-primary]Visit Nulcheck's Competition Page[/container][/url] [url:https://www.worldanvil.com/community/challenge/EVENT/duel/ID][container:btn btn-sm btn-primary]Check out other answers to this prompt[/container][/url] [url:https://www.worldanvil.com/community/challenge/EVENT/homepage][container:btn btn-sm btn-primary]Competition Homepage[/container][/url][/container][/container][/container]

Custom CSS Class Stylings

Item	Code	Example
Tags	[section:label label-default]taggy tag[/section]	taggy tag
IPA Styling Sometimes used as a tagline / subheader	Ravia [section:ipa]/ˈreɪviə/[/section]	Ravia /ˈreɪviə/
Title Spoiler Use header tags and put the chevron variable within the title too.	[container:title-spoiler] [spoiler] Content! Oh boy! \|[h1]Spoiler Title [section:fas fa-fw fa-chevron-down] [/section][/h1][/spoiler] [/container]	Spoiler Title Content! Oh boy!
Badge Images Badges are usually put in the sidebar. This just makes them a little smaller. (250px)	[container:badge-img][badge:532\|e264b800-dd84-4ff3-9ac8-5d36df1a1b8e][/container] [container:badge-img]@[[img:6197591\|nolink]](article:f74ee651-541a-4ad9-b27f-f3af2c27fabe)[/container]	Badges are normally added to the sidebar; they have a fixed width of 250px. Mainly used on event pages.
Article Block Button	[container:block-btn][articleblock:5df5f9d4-ef9f-4df9-96f8-05e4268f524a][/container]	Progress Reports.dmp Generic article \| Oct 8, 2025 Archive list of Dragonguard Progress Reports.
Mini Article Block	[container:miniblock][articleblock:5df5f9d4-ef9f-4df9-96f8-05e4268f524a][/container]	Progress Reports.dmp Generic article \| Oct 8, 2025 Archive list of Dragonguard Progress Reports.
No-cover Article Block	[container:no-cover][articleblock:5df5f9d4-ef9f-4df9-96f8-05e4268f524a][/container]	Progress Reports.dmp Generic article \| Oct 8, 2025 Archive list of Dragonguard Progress Reports.

User Bootstrap

Item

Code

Example

Display inlines

[container:inline][/container]
[container:inline-block][/container]

Inline	Just the display is set to inline.
Inline Block	Just the display is set to inline-block.

Weird flex, but ok

[container:flex][/container]
[container:flex-wrap][/container]
[container:flex-col][/container]
[container:flex-col-center][/container]
[container:flex-center][/container]
[container:flex-middle][/container]
[container:flex-end][/container]

Flex	Just the display is set to flex.
Flex Wrap	display is set to flex, with flex-wrap set to wrap.
Flex Col	display is set to flex, with the flex-direction set to column.
Flex Col Center	display is set to flex. flex-direction set to column. margin set to auto. align-items and justify-content set to center.
Flex Center	display is set to flex, with justify-content set to center.
Flex Middle	display is set to flex, with align-content set to center.
Flex End	display is set to flex, with align-items set to flex-end.

Center Placements

[container:items-center][/container]
[container:content-center][/container]
[container:self-center][/container]

Items Center	place-items is set to center. (Align Items / Justify Items)
Content Center	place-content is set to center. (Align Content / Justify Content)
Self Center	place-self is set to center. (Align Self / Justify Self)

Text Alignments

[container:text-center]Bootstrap's centered text.[/container]
[container:center-text]My centered text.[/container]
[container:text-left]Left text.[/container]
[container:text-right]Right text.[/container]
[container:text-justify]Justified text.[/container]

Bootstrap's centered text.

My centered text.

Left text.

Right text.

Justified text.

Alignment - (Float) Left / Right
Use col-md-# to set desired width.
(This uses float) m-auto sets margins to auto, centering the element. (Bootstrap)

[container:col-md-6 align-left][/container]
[container:col-md-6 align-right][/container]
[container:col-md-6 m-auto][/container]
 
Text can go here weeeee. Lorem ipsum.

Ancestor Silk plant

by Nulcheck

Ancestor Silk plant in ESO

Text can go here weeeee. Lorem ipsum. Some plant that breaks easily or just secretes some weird liquid on its stems that when agiated, or comes into contact with air or something, creates silk. People who walk through the forest with these will just be covered in silk afterwards. Thought of this idea when I saw "Ancestor Silk" plant in ESO.

Padding on the walls
Will also set padding to an image (they usually have a default padding of 10px) (0px)
(5px)
(10px)

[container:p-0][/container]
[container:padding-5][/container]
 
[container:padding-top-10][/container]
[container:padding-bottom-10][/container]
 
[container:padding-left-10][/container]
[container:padding-right-10][/container]
 
[container:padding-inline-10][/container]
[container:padding-block-10][/container]

No Padding (Bootstrap)

All Padding (5px)

Padding Top

Padding Bottom

Padding Left

Padding Right

Padding Inline (sides)

Padding Block (top & bottom)

Profit Margins
(0px)
(5px)
(10px)

[container:m-0][/container]
[container:m-auto][/container]
[container:margin-5][/container]
 
[container:margin-top-10][/container]
[container:margin-bottom-10][/container]
 
[container:margin-left-10][/container]
[container:margin-right-10][/container]
 
[container:margin-inline-10][/container]
[container:margin-block-10][/container]

No Margins (Bootstrap)

Auto Margins (Bootstrap) (Centers)

All Margins

Margin Top

Margin Bottom

Margin Left

Margin Right

Margin Inline (sides)

Margin Block (top & bottom)

Container Borders
Text is centered for illistration purposes only. no-border also affects tables.

All borders are 1px.

[container:no-border][/container]
[container:border][/container]
 
[container:border-top][/container]
[container:border-bottom][/container]
 
[container:border-left][/container]
[container:border-right][/container]
 
[container:border-inline][/container]
[container:border-block][/container]

No border (affects tables)

All border (overrides bootstrap)

Top border

Bottom border

Left border

Right border

Inline border

Block border

Big text
(Opposite of this small text lol)
Relative big, it adds .2rem to existing size.

Can either be container or section tags.

Normal text
[container:big]Big text[/container]
[container:big][container:big]Big big text[/container][/container]
[small]Small text for comparison[/small]

Normal text

Big text

Big big text

Small text for comparison

Widths
Goes up by 5, starting from 0, ends at 100.

[container:bg-secondary w-5][/container]
[container:bg-secondary w-25][/container]
[container:bg-secondary w-65][/container]

W 5

Width 25

Width 65

Progress Bar
Custom coloring and widths across the site.
Goes up by 5, starting from 0, ends at 100.

progress CSS class provides the background, and height so it displays (if no text).

[container:progress]
[container:progress-bar bar-15][/container]
[/container]
 
[container:progress]
[container:progress-bar bar-65]65%[/container]
[/container]

65%

Headings

Heading	CSS Font Variable	Styling
Article Title	--hfont	Font: Iceland Color: --refreshingwhite Size: clamp(1.8em, 8vw, 42px)
Heading 1	--hfont	Font: Iceland Border: bottom \| 1px \| solid \| --w20 Color: --refreshingwhite Size: 35px
Fancy	--fcyfont	Wrap header tags in section tags with the CSS class fancy-title. Font: Cinzel Decorative Letter spacing: 1em Color: --refreshingwhite Size: Depends on header tags Text Transform: Uppercase Alignment: Center ::Before Margin: right: 1em \| bottom: 1.25em Border: 2px \| gradient \| transparent → --w30 → --w90 ::After Margin: left: -1em \| bottom: 1.25em Border: 2px \| gradient \| --w90 ← --w30 ← transparent
Heading 2	--hfont	Font: Iceland Color: --refreshingwhite Size: 27px
Heading 3	--hfont	Font: Iceland Color: --refreshingwhite Size: 23px
Heading 4	--hfont	Font: Iceland Color: --refreshingwhite Size: 20px
Heading 5	--hfont	Font: Iceland Color: --refreshingwhite Size: 16px

Variables

Element	CSS Variable	Code
	Timing Functions
Hover over me to see transition!	--cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Main Colors
	--midnight	#010203
	--nullshadow	#007699
	--refreshingwhite	#f5f5f5
	--white	#ffffff
	--black	#000000
	Accents
	--nullblue	#00c4ff
	--nulllight	#66ffff
	--vividmagenta	#f20dd5
	--gold	#a57c00
	--lightgold	#b29700
	--info	#a8dfda
	--success	#99c24d
	--warning	#fbb539
	--danger	#f45238
	--slightdanger	#c83f49
	Gradients
	--lightSkyline0	0deg, #00c4ff, #66ffff
	--lightSkyline45	45deg, #00c4ff, #66ffff
	--lightSkyline90	90deg, #00c4ff, #66ffff
	--skyline0	0deg, #007699, #00c4ff
	--skyline45	45deg, #007699, #00c4ff
	--skyline90	90deg, #007699, #00c4ff
	--golden0	0deg, #a57c00, #b29700
	--golden45	45deg, #a57c00, #b29700
	--golden90	90deg, #a57c00, #b29700
	50 (18) Shades of Gray
	--w10	#353339
	--w20	#4a484d
	--w30	#616064
	--w40	#767578
	--w50	#8c8b8e
	--w60	#a2a1a4
	--w70	#b8b7b9
	--w80	#cececf
	--w90	#e4e3e4
	--b10	#1a191e
	--b20	#18161b
	--b30	#141317
	--b40	#121014
	--b50	#0f0e11
	--b60	#0c0b0d
	--b70	#09080a
	--b80	#060506
	--b90	#030203

CSS Stuff

Site Variables

CSS Tutorials

CSS Sidebar Menu

CSS Checkboxes

Custom Elements

Custom Entry Section

Custom CSS Class Stylings

Spoiler Title

Progress Reports.dmp

Progress Reports.dmp

Progress Reports.dmp

User Bootstrap

Ancestor Silk plant

Headings

Heading 1

Fancy

Heading 2

Heading 3

Heading 4

Heading 5

Variables

worlds

social butterfly

Comments