CrucibleCodexStyles
Crucible Codex Styles Guide
This page is a working reference for the full Codex stylesheet.
It is meant to show the wrappers, navigation blocks, subsite skins, and reusable content components that currently exist in the CSS, including the newer canonical codex-* component names and the older legacy aliases that still render.
Use the canonical patterns for all new pages. Legacy names are documented here so older pages remain understandable.
Canonical Page Pattern
For all new subsite pages, use this general structure:
{{HeaderTemplate}}
<div class="codex-page codex-page--subsite">
= Page Title =
Page content here.
{{NavTemplate}}
</div>
For nav templates, use this general structure:
<includeonly> <div class="codex-navbox codex-navbox--subsite"> <strong class="codex-nav-title">Subsite Codex</strong> [[Subsite:Home|Home]] • [[Subsite:Character Creation|Character Creation]] </div> </includeonly>
Shared Foundation
These styles affect the whole wiki, not just one subsite.
Global Page Skin
The site-wide body, headings, links, forms, tables, infoboxes, TOC, code blocks, and images all have a shared dark Codex treatment.
Reusable selectors documented in CSS include:
html,body,.mw-page-container,.vector-body.mw-body#firstHeading,.mw-first-heading,.mw-parser-output h1-h6.vector-pinned-container,.vector-column-start,#mw-panel,.vector-menu,.vector-user-links.vector-header-container,.vector-header,.mw-header,.vector-page-toolbar,.vector-sticky-header,.vector-page-titlebar.vector-search-box,.vector-search-box-vue,.vector-typeahead-search-container,#searchInput.wikitable,.infobox,.portable-infobox#toc,.toc,.catlinkspre,code.thumb,.thumbinner,.mw-file-element,.floatright,.floatleft.mw-editsectionand related section-edit selectors are hidden globally
Shared Banner
<div class="codex-banner"> [[File:Banner.jpg|900px]] </div>
Use:
codex-bannerfor a standard centered bannercodex-headerfor shared header wrappers where needed
Shared Page Wrapper
This is the default shared codex-page wrapper. It gives the page its centered panel, padding, line spacing, rounded corners, and drop-shadow.
<div class="codex-page"> Your page content here. </div>
Shared Navigation Wrapper
<div class="codex-navbox"> <strong>Codex Navigation</strong> [[Main Page|Home]] • [[Help:Contents|Help]] • [[Special:AllPages|All Pages]] </div>
Canonical Reusable Components
These are the newer, future-facing shared component names. Use these for all new work where practical.
codex-nav-title
<div class="codex-navbox codex-navbox--subsite"> <strong class="codex-nav-title">Subsite Codex</strong> [[Subsite:Home|Home]] </div>
codex-subtitle
<div class="codex-subtitle">A short italic subtitle.</div>
codex-panel And codex-panel-title
Panel text goes here.
<div class="codex-panel"> <div class="codex-panel-title">Panel Title</div> Panel text goes here. </div>
codex-callout And codex-callout-title
This is a reusable callout block.
<div class="codex-callout"> <div class="codex-callout-title">Callout Title</div> Callout text here. </div>
codex-lead
This is lead paragraph styling for an opening paragraph or emphasized introduction.
<p class="codex-lead">Opening paragraph text.</p>
codex-smallcaps
Small Caps Example
<span class="codex-smallcaps">Small Caps Example</span>
codex-grid And codex-card
Card One
Example card text.
Card Two
Example card text.
<div class="codex-grid"> <div class="codex-card">Card One</div> <div class="codex-card">Card Two</div> </div>
codex-divider
<hr class="codex-divider">
Variant Callouts
Stormbringer and Hawkmoon define special canonical variant names:
codex-callout--chaoscodex-callout--doomcodex-callout--gm
Nightcats Skin
Canonical Wrapper
<div class="codex-page codex-page--nightcats"> ... </div>
Canonical Nav
<div class="codex-navbox codex-navbox--nightcats"> <strong class="codex-nav-title">Nightcats Codex</strong> ... </div>
Example
Nightcats Example
This is paragraph text in the Nightcats skin.
The canonical codex-panel is supported here, and maps to the older Nightcats panel styling.
The legacy Nightcats class still works too.
| Strength | d8 |
|---|---|
| Agility | d6 |
The jungle remembers what men forget.
Nightcats-Specific Classes
nightcats-headernightcats-panelnightcats-panel-titlenightcats-panel-subtitlenightcats-panel--beastnightcats-panel--hazardnightcats-panel--sorcerynightcats-statsnightcats-tagsnightcats-panel-gridnightcats-panel-grid--twonightcats-panel-image-topnightcats-frame rightfor responsive image behavior in the CSS
Nightcats Example Markup
<div class="codex-page codex-page--nightcats"> <div class="nightcats-panel nightcats-panel--beast"> <div class="nightcats-panel-image-top"> [[File:Tiger.jpg|380px]] </div> <div class="nightcats-panel-title">Tiger</div> A silent killer of the green dark. </div> </div>
Five Fists / Burning Temple Skin
Canonical Wrapper
<div class="codex-page codex-page--ffbt"> ... </div>
Canonical Nav
<div class="codex-navbox codex-navbox--ffbt"> <strong class="codex-nav-title">Burning Temple Codex</strong> ... </div>
Example
Burning Temple Example
Patience is also a weapon.
Style Box
Use this for schools, techniques, or doctrine summaries.
Master Iron Crane
Agility d8, Smarts d6, Spirit d8, Strength d6, Vigor d8
Tiger Style
Relentless, fierce, direct.
Crane Style
Precise, elegant, evasive.
| Maneuver | Effect |
|---|---|
| Throw | Put the foe on the ground |
Martial Discipline
FFBT-Specific Classes
ffbt-headerffbt-calloutffbt-sealffbt-styleboxffbt-statblockffbt-dividerffbt-quoteffbt-gridffbt-cardffbt-quicklinksffbt-tableffbt-tag
FFBT Example Markup
<div class="codex-page codex-page--ffbt"> <div class="ffbt-callout"> <strong>Master’s Saying</strong> Patience is also a weapon. </div> <div class="ffbt-grid"> <div class="ffbt-card">Tiger</div> <div class="ffbt-card">Crane</div> </div> </div>
Sigil Lands Skin
Canonical Wrapper
<div class="codex-page codex-page--sigil"> ... </div>
Canonical Nav
<div class="codex-navbox codex-navbox--sigil"> <strong class="codex-nav-title">Sigil Lands Codex</strong> ... </div>
Example
Sigil Lands Example
This wrapper is suited to historical or reflective setting text.
| Realm | Condition |
|---|---|
| Angharais | Enduring |
| Vorghol | Shrouded |
Sigil Notes
The Sigil skin uses fewer custom component classes than the other subsites. The important styles are the wrapper, nav, and the canonical codex-subtitle and codex-nav-title hooks.
Stormbringer Skin
Canonical Wrapper
<div class="codex-page codex-page--stormbringer"> ... </div>
Canonical Nav
<div class="codex-navbox codex-navbox--stormbringer"> <strong class="codex-nav-title">Stormbringer Codex</strong> ... </div>
Legacy nav aliases still supported in CSS:
stormbringer-navcodex-nav--stormbringer
Example
Stormbringer Example
Storm Panel
Use this for sidebars, lore capsules, or boxed rules.
Chaos Callout
Use this for uncanny, mutating, or destabilizing material.
Doom Callout
Use this for prophecy, corruption, price, or fatal consequence.
| Power | Cost |
|---|---|
| Sorcery | Corruption |
Stormbringer-Specific Classes
storm-subtitlestorm-panelstorm-callout-chaosstorm-callout-doomstorm-nav-titlethumbcaptionis also styled within this skin
Stormbringer Example Markup
<div class="codex-page codex-page--stormbringer"> <div class="storm-subtitle">A dying age.</div> <div class="storm-panel"> Lore text. </div> <div class="storm-callout-doom"> All victories are temporary. </div> </div>
Hawkmoon Skin
Canonical Wrapper
<div class="codex-page codex-page--hawkmoon"> ... </div>
Canonical Nav
<div class="codex-navbox codex-navbox--hawkmoon"> <strong class="codex-nav-title">Hawkmoon Codex</strong> ... </div>
Legacy aliases still supported:
hawkmoon-themehawkmoon-navbox
Banner
<div class="hawkmoon-banner"> [[File:HawkmoonBanner.jpg|900px]] </div>
Example
Hawkmoon Example
This is the lead paragraph styling for Hawkmoon pages.
Dark science, ruin, masks, and empire.
GM Note
Use this for campaign guidance, ominous secrets, or behind-the-screen material.
The Tragic Millenium is ash, iron, and old cruelty.
Hawkmoon-Specific Classes
hawkmoon-bannerhawkmoon-banner-imagehawkmoon-panelhawkmoon-panel-titlehawkmoon-gmhawkmoon-leadhawkmoon-smallcapshawkmoon-nav-title
Hawkmoon Example Markup
<div class="codex-page codex-page--hawkmoon"> <p class="hawkmoon-lead">Opening paragraph.</p> <div class="hawkmoon-panel"> <div class="hawkmoon-panel-title">Forbidden Science</div> Panel text. </div> <div class="hawkmoon-gm"> GM-only note. </div> </div>
Apes Skin
Canonical Wrapper
<div class="codex-page codex-page--apes"> ... </div>
Canonical Nav
<div class="codex-navbox codex-navbox--apes"> <strong class="codex-nav-title">Apes Codex</strong> ... </div>
Example
Age Of The Covenant Example
The Covenant remains uneasy even in peace.
This skin also defines a decorative drop cap class for opening paragraphs.
Apes-Specific Classes
apes-subtitleapes-dividerapes-calloutapes-callout-titleapes-dropcapapes-nav-titlecareer-portraitappears in responsive rules tied to this section
Apes Example Markup
<div class="codex-page codex-page--apes"> <div class="apes-subtitle">A doubtful peace.</div> <div class="apes-callout"> <div class="apes-callout-title">Field Note</div> Callout text. </div> <hr class="apes-divider"> <p><span class="apes-dropcap">T</span>he bridge still stands.</p> </div>
Legacy Alias Summary
These legacy names are still supported and are worth knowing when reading older pages:
| Subsite | Canonical Pattern | Legacy Names Still Supported |
|---|---|---|
| Nightcats | codex-page codex-page--nightcats, codex-navbox codex-navbox--nightcats, codex-panel |
nightcats-panel, nightcats-panel-title, related Nightcats panel classes
|
| Burning Temple | codex-page codex-page--ffbt, codex-navbox codex-navbox--ffbt, codex-callout, codex-grid, codex-card |
ffbt-callout, ffbt-grid, ffbt-card, ffbt-stylebox
|
| Sigil Lands | codex-page codex-page--sigil, codex-navbox codex-navbox--sigil |
none of major importance beyond standard wrapper usage |
| Stormbringer | codex-page codex-page--stormbringer, codex-navbox codex-navbox--stormbringer, codex-callout--chaos, codex-callout--doom |
storm-subtitle, storm-panel, storm-callout-chaos, storm-callout-doom, stormbringer-nav, codex-nav--stormbringer
|
| Hawkmoon | codex-page codex-page--hawkmoon, codex-navbox codex-navbox--hawkmoon, codex-callout--gm, codex-lead, codex-smallcaps |
hawkmoon-theme, hawkmoon-navbox, hawkmoon-panel, hawkmoon-gm, hawkmoon-lead
|
| Apes | codex-page codex-page--apes, codex-navbox codex-navbox--apes, codex-callout, codex-divider |
apes-subtitle, apes-callout, apes-callout-title, apes-divider
|
Quick Lookup
Shared
codex-bannercodex-pagecodex-navboxcodex-nav-titlecodex-subtitlecodex-panelcodex-panel-titlecodex-calloutcodex-callout-titlecodex-leadcodex-smallcapscodex-gridcodex-cardcodex-divider
Nightcats
codex-page--nightcatscodex-navbox--nightcatsnightcats-panelnightcats-statsnightcats-tags
Burning Temple
codex-page--ffbtcodex-navbox--ffbtffbt-calloutffbt-sealffbt-styleboxffbt-statblockffbt-gridffbt-cardffbt-tableffbt-tag
Sigil Lands
codex-page--sigilcodex-navbox--sigil
Stormbringer
codex-page--stormbringercodex-navbox--stormbringerstorm-subtitlestorm-panelstorm-callout-chaosstorm-callout-doomstorm-nav-title
Hawkmoon
codex-page--hawkmooncodex-navbox--hawkmoonhawkmoon-bannerhawkmoon-panelhawkmoon-gmhawkmoon-leadhawkmoon-smallcapshawkmoon-nav-title
Apes
codex-page--apescodex-navbox--apesapes-subtitleapes-dividerapes-calloutapes-callout-titleapes-dropcapapes-nav-title