CSS Stuff
CSS theme stuff for the Legends of the Dragonguard 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 with in it, and you can't do that with World Anvil variables.
Other Technical Stuff
If you are looking for how I made the navigation menu sidebar; it has its own page:
Special Shoutouts
I'd just like to give a few shoutouts to fellow Anvilites for inspiring certain elements on this site. Ravare by Damion OtterNavmenu Sidebar Solaris by Annie Stein
General site design; TOC in sidebar; Breadbox above article title Lothrea by Satrium (Found it from Solaris)
Advanced tagging system, as well as the bonus tip at the end for "backlinking to categories". I use this premise to highlight a menu item based on an article's tag. (e.g., Location menu item will be highlighted while on any location page)
Custom Elements
| Item | Code | Output |
|---|---|---|
| Spoiler Warning Box | [var:util-spoiler-warning] |
There may be potential story spoilers in this article!
|
| Date Box | [section:date-box]— 03/24/2024[/section] |
— 03/24/2024 |
| Generic Box | [container:generic-box] Content [/container] |
Content
|
| Generic Info Box w/ Info Icon | [container:generic-box info] [var:util-info-icon] Vertically aligned content. [/container] |
Vertically centered icon and text.
|
| Definition Box | [h4]word[/h4] [container:definition] [b]noun[/b][br] [ul][li]Word definition.[/li][/ul] [/container] |
word
noun
|
| Alt Section | [container:alt] Content [/container] |
Content
|
| Generic Box within Alt Section | [container:alt] [container:generic-box] Content [/container] [/container] |
Content
|
| Follow world button | [var:util-follow] |
(You'll only see the button if you're not following the world) |
|
Chevron Down Mainly just used for title spoilers. |
[var:util-chev] |
|
|
Content Warning Tags Page has to be tagged with content warning tags for it to show up; put this code in the header section. See Tag Overview for a list of content warning tags. |
[var:util-content-warning] |
|
|
Event Global Announcement This is for displaying a global "announcement" that there is an ongoing World Anvil event, and links to the LotD's event page. Put this code in the Global World Header Block section. The details of this box are edited on the variable page every time a new event starts. So save the data! |
[var:util-event] |
Summer Camp (prep) event is going on right now! |
Custom CSS Class Stylings
| Item | Code | Example |
|---|---|---|
| Mimic Tag | [section:label label-default]idx-a-category-specifics[/section] |
idx-a-category-specifics |
| IPA Styling | Ravia [section:ipa](reɪv•iə)[/section] |
Ravia (reɪv•iə) |
| Title Spoiler | [container:title-spoiler] [spoiler] Content! Oh boy! |[h3]Spoiler Title [var:util-chev][/h3][/spoiler] [/container] |
Spoiler Title
Content! Oh boy!
|
|
Alignment - Left / Right The image block, despite being placed first, appears to the right. Use col-md-# to set the desired width. Really only used on the Quick Notes: Short Ideas page for displaying a reference image inside a spoiler. |
[container:col-md-6 align-right][imgblock:5582613][/container] |
Ancestor Silk plant
by
Nulcheck
Ancestor Silk plant in ESO
|
|
Container Borders (Text is centered for illistration purposes only. CSS class not shown in code for centering text.) |
[container:border-top]Top border[/container] [container:border-bottom]Bottom border[/container] [container:border-left]Left border[/container] [container:border-right]Right border[/container] [container:border-inline]Inline border[/container] [container:border-block]Block border[/container] |
Top border Bottom border
Left border Right border
Inline border Block border
|
Headings
| Heading | CSS Font Variable | Styling |
|---|---|---|
| Article Title | --hf2 |
|
Heading 1 |
--hf2 |
|
Heading 2 |
--hf3 |
|
Heading 3 |
--hf4 |
|
Heading 4 |
--ifont |
|
Color Variables
| Color | CSS Variable | Hex Code |
|---|---|---|
| Main Colors | ||
| --midnight | #010203 | |
| --stormcloud | #1e1c22 | |
| --darkcloud | #17151d | |
| --skyshadow | #007699 | |
| --skydark | #006484 | |
| Accents | ||
| --bluesky | #1ca0d0 | |
| --graysky | #828c96 | |
| --gold | #a57c00 | |
| --lightgold | #b29700 | |
| --info | #a8dfda | |
| --success | #99c24d | |
| --warning | #fbb539 | |
| --danger | #f45238 | |
| --slightdanger | #c83f49 | |
| Gradients | ||
| --golden0 | 0deg, #a57c00, #b29700 | |
| --golden45 | 45deg, #a57c00, #b29700 | |
| --golden90 | 90deg, #a57c00, #b29700 | |
| --skyline0 | 0deg, #006484, #007699 | |
| --skyline45 | 45deg, #006484, #007699 | |
| --skyline90 | 90deg, #006484, #007699 | |
| 50 Shades of Gray | ||
| --w10 | #353339 | |
| --w20 | #4a484d | |
| --w30 | #616064 | |
| --w40 | #767578 | |
| --w50 | #8c8b8e | |
| --w60 | #a2a1a4 | |
| --w70 | #b8b7b9 | |
| --w80 | #cececf | |
| --w90 | #e4e3e4 | |
| --w10 | #353339 | |
| --w20 | #4a484d | |
| --w30 | #616064 | |
| --w40 | #767578 | |
| --w50 | #8c8b8e | |
| --w60 | #a2a1a4 | |
| --w70 | #b8b7b9 | |
| --w80 | #cececf | |
| --w90 | #e4e3e4 |
Comments