Jump to content

CrucibleCodexStyles: Difference between revisions

From Crucible Codex
Newer edit →
undoWikiSysop (talk | contribs)
Bureaucrats, Interface administrators, Administrators
4,685 edits
Created page with "{{CodexHeader}} <div class="codex-page"> = Crucible Codex Styles Guide = This page is a visual reference for reusable Codex formatting styles. Use it as a copy-and-paste library when building new pages. == Shared Codex Wrapper == This is the standard shared wrapper used across subsites. <div class="codex-page"> This is a plain <code>codex-page</code> wrapper. It gives the page its centered panel, padding, rounded corners, and shadow. </div> <pre> <div class="co..."
 
No edit summary
Line 2: Line 2:
<div class="codex-page">
<div class="codex-page">


= Crucible Codex Styles Guide =
= Crucible Codex Markup Pattern =


This page is a visual reference for reusable Codex formatting styles.
This page defines the standard wrapper pattern for all Crucible Codex subsites.


Use it as a copy-and-paste library when building new pages.
The canonical structure is now consistent across subsites:


== Shared Codex Wrapper ==
<pre>
{{SubsiteHeader}}
<div class="codex-page codex-page--subsite">


This is the standard shared wrapper used across subsites.
Page content here.


<div class="codex-page">
<div class="codex-navbox codex-navbox--subsite">
This is a plain <code>codex-page</code> wrapper.
'''Subsite Codex'''
It gives the page its centered panel, padding, rounded corners, and shadow.
[[Subsite:Home|Home]] • [[Subsite:Other Page|Other Page]]
</div>
</div>


<pre>
&lt;div class="codex-page"&gt;
Your page content here.
&lt;/div&gt;
</pre>
== Shared Navigation ==
This is the generic Codex nav style.
<div class="codex-navbox">
<strong>Codex Navigation</strong>
[[Main Page|Home]] • [[Help:Contents|Help]] • [[Special:AllPages|All Pages]]
</div>
</div>
<pre>
&lt;div class="codex-navbox"&gt;
&lt;strong&gt;Codex Navigation&lt;/strong&gt;
[[Main Page|Home]] • [[Help:Contents|Help]] • [[Special:AllPages|All Pages]]
&lt;/div&gt;
</pre>
</pre>


== Nightcats Skin ==
== Canonical Subsite Wrappers ==
 
<div class="codex-page codex-page--nightcats">
== Nightcats Example ==
 
This is a paragraph inside <code>codex-page codex-page--nightcats</code>.
 
A link looks like [[Nightcats:Jhelum|this]].


{| class="wikitable"
{| class="wikitable"
! Header !! Header
! Subsite !! Page Wrapper !! Navigation Wrapper !! Legacy Alias Still Supported
|-
|-
| Cell || Cell
| Nightcats || <code>&lt;div class="codex-page codex-page--nightcats"&gt;</code> || <code>&lt;div class="codex-navbox codex-navbox--nightcats"&gt;</code> || None needed
|-
|-
| Cell || Cell
| Five Fists / Burning Temple || <code>&lt;div class="codex-page codex-page--ffbt"&gt;</code> || <code>&lt;div class="codex-navbox codex-navbox--ffbt"&gt;</code> || None needed
|}
 
<blockquote>
The jungle remembers what men forget.
</blockquote>
</div>
 
<pre>
&lt;div class="codex-page codex-page--nightcats"&gt;
== Nightcats Example ==
 
Paragraph text.
 
{| class="wikitable"
! Header !! Header
|-
|-
| Cell || Cell
| Sigil Lands || <code>&lt;div class="codex-page codex-page--sigil"&gt;</code> || <code>&lt;div class="codex-navbox codex-navbox--sigil"&gt;</code> || None needed
|}
 
&lt;blockquote&gt;
Quoted text.
&lt;/blockquote&gt;
&lt;/div&gt;
</pre>
 
== Five Fists / Burning Temple Skin ==
 
<div class="codex-page codex-page--ffbt">
== Burning Temple Example ==
 
This is the base FFBT wrapper.
 
<div class="ffbt-callout">
<strong>Master’s Saying</strong>
Patience is also a weapon.
</div>
 
<div class="ffbt-seal">Disciplined Style</div>
 
<div class="ffbt-stylebox">
=== Style Box ===
Use this for schools, techniques, or doctrine summaries.
</div>
 
<div class="ffbt-statblock">
'''Master Iron Crane'''<br>
Agility d8, Smarts d6, Spirit d8, Strength d6, Vigor d8
</div>
 
<div class="ffbt-grid">
<div class="ffbt-card">
=== Tiger Style ===
Relentless, fierce, direct.
</div>
<div class="ffbt-card">
=== Crane Style ===
Precise, elegant, evasive.
</div>
<div class="ffbt-card">
=== Monkey Style ===
Unpredictable, agile, deceptive.
</div>
</div>
 
<div class="ffbt-table">
{| class="wikitable"
! Maneuver !! Effect
|-
|-
| Throw || Put the foe on the ground
| Stormbringer || <code>&lt;div class="codex-page codex-page--stormbringer"&gt;</code> || <code>&lt;div class="codex-navbox codex-navbox--stormbringer"&gt;</code> || <code>codex-nav--stormbringer</code>, <code>stormbringer-nav</code>
|-
|-
| Lock || Limit movement
| Hawkmoon || <code>&lt;div class="codex-page codex-page--hawkmoon"&gt;</code> || <code>&lt;div class="codex-navbox codex-navbox--hawkmoon"&gt;</code> || <code>hawkmoon-theme</code>, <code>hawkmoon-navbox</code>
|}
</div>
 
<span class="ffbt-tag">Martial</span>
<span class="ffbt-tag">Discipline</span>
<span class="ffbt-tag">Honor</span>
</div>
 
<pre>
&lt;div class="codex-page codex-page--ffbt"&gt;
 
&lt;div class="ffbt-callout"&gt;
&lt;strong&gt;Master’s Saying&lt;/strong&gt;
Patience is also a weapon.
&lt;/div&gt;
 
&lt;div class="ffbt-seal"&gt;Disciplined Style&lt;/div&gt;
 
&lt;div class="ffbt-stylebox"&gt;
=== Style Box ===
Use this for schools, techniques, or doctrine summaries.
&lt;/div&gt;
 
&lt;div class="ffbt-statblock"&gt;
'''Master Iron Crane'''&lt;br&gt;
Agility d8, Smarts d6, Spirit d8, Strength d6, Vigor d8
&lt;/div&gt;
 
&lt;div class="ffbt-grid"&gt;
&lt;div class="ffbt-card"&gt;
=== Tiger Style ===
Relentless, fierce, direct.
&lt;/div&gt;
&lt;div class="ffbt-card"&gt;
=== Crane Style ===
Precise, elegant, evasive.
&lt;/div&gt;
&lt;/div&gt;
 
&lt;div class="ffbt-table"&gt;
{| class="wikitable"
! Maneuver !! Effect
|-
|-
| Throw || Put the foe on the ground
| Apes || <code>&lt;div class="codex-page codex-page--apes"&gt;</code> || <code>&lt;div class="codex-navbox codex-navbox--apes"&gt;</code> || None needed
|}
|}
&lt;/div&gt;
&lt;span class="ffbt-tag"&gt;Martial&lt;/span&gt;
&lt;/div&gt;
</pre>


== Sigil Lands Skin ==
== Standard Rule ==


<div class="codex-page codex-page--sigil">
All subsites should use:
== Sigil Lands Example ==


This is the Sigil wrapper.
* a shared Codex page wrapper based on <code>codex-page</code>
* a subsite modifier in the form <code>codex-page--NAME</code>
* a shared navigation wrapper based on <code>codex-navbox</code>
* a subsite modifier in the form <code>codex-navbox--NAME</code>


It is suited to chronicles, lore essays, and older world material.
This keeps page markup predictable and makes future CSS maintenance much easier.


{| class="wikitable"
== Stormbringer Example ==
! Realm !! Condition
|-
| Angharais || Enduring
|-
| Vorghol || Shrouded
|}
</div>


<pre>
<pre>
&lt;div class="codex-page codex-page--sigil"&gt;
{{StormbringerHeader}}
== Sigil Lands Example ==
 
Lore text here.
 
{| class="wikitable"
! Realm !! Condition
|-
| Angharais || Enduring
|}
&lt;/div&gt;
</pre>
 
== Stormbringer Skin ==
 
<div class="codex-page codex-page--stormbringer">
<div class="codex-page codex-page--stormbringer">
= Stormbringer Example =


<div class="storm-subtitle">A world of dying empires and bargains best left unmade.</div>
= Character Creation =


This is the Stormbringer wrapper.
Page text here.


<div class="storm-panel">
<div class="codex-navbox codex-navbox--stormbringer">
'''Storm Panel'''<br>
<span class="storm-nav-title">Stormbringer Codex</span>
Use this for sidebars, lore capsules, or boxed rules.
[[Stormbringer:Home|Home]] • [[Stormbringer:Character Creation|Character Creation]]
</div>
</div>


<div class="storm-callout-chaos">
'''Chaos Callout'''<br>
Use this for uncanny, mutating, or destabilizing material.
</div>
</div>
</pre>


<div class="storm-callout-doom">
== Hawkmoon Example ==
'''Doom Callout'''<br>
Use this for prophecy, corruption, price, or fatal consequence.
</div>
 
{| class="wikitable"
! Power !! Cost
|-
| Sorcery || Corruption
|-
| Empire || Decay
|}
 
<blockquote>
All victories are temporary. Some are merely more splendid in their ruin.
</blockquote>
</div>


<pre>
<pre>
&lt;div class="codex-page codex-page--stormbringer"&gt;
{{HawkmoonHeader}}
= Stormbringer Example =
<div class="codex-page codex-page--hawkmoon">


&lt;div class="storm-subtitle"&gt;A world of dying empires and bargains best left unmade.&lt;/div&gt;
= Granbretan =


Paragraph text here.
Page text here.


&lt;div class="storm-panel"&gt;
<div class="codex-navbox codex-navbox--hawkmoon">
'''Storm Panel'''&lt;br&gt;
'''Hawkmoon Codex'''
Use this for sidebars, lore capsules, or boxed rules.
[[Hawkmoon:Home|Home]] • [[Hawkmoon:Granbretan|Granbretan]]
&lt;/div&gt;
</div>
 
&lt;div class="storm-callout-chaos"&gt;
'''Chaos Callout'''&lt;br&gt;
Use this for uncanny, mutating, or destabilizing material.
&lt;/div&gt;
 
&lt;div class="storm-callout-doom"&gt;
'''Doom Callout'''&lt;br&gt;
Use this for prophecy, corruption, price, or fatal consequence.
&lt;/div&gt;


{| class="wikitable"
! Power !! Cost
|-
| Sorcery || Corruption
|}
&lt;/div&gt;
</pre>
== Stormbringer Navigation ==
<div class="codex-nav--stormbringer">
<span class="storm-nav-title">Stormbringer Codex</span>
[[Stormbringer:Home|Home]] •
[[Stormbringer:Players Guide|Players Guide]] •
[[Stormbringer:Character Creation|Character Creation]] •
[[Stormbringer:Careers|Careers]] •
[[Stormbringer:Boons|Boons]] •
[[Stormbringer:Flaws|Flaws]] •
[[Stormbringer:Sorcery|Sorcery]] •
[[Stormbringer:Peoples|Peoples]] •
[[Stormbringer:Young Kingdoms|Young Kingdoms]] •
[[Stormbringer:Law and Chaos|Law and Chaos]]
</div>
</div>
<pre>
&lt;div class="codex-nav--stormbringer"&gt;
&lt;span class="storm-nav-title"&gt;Stormbringer Codex&lt;/span&gt;
[[Stormbringer:Home|Home]] •
[[Stormbringer:Players Guide|Players Guide]] •
[[Stormbringer:Character Creation|Character Creation]] •
[[Stormbringer:Careers|Careers]] •
[[Stormbringer:Boons|Boons]] •
[[Stormbringer:Flaws|Flaws]] •
[[Stormbringer:Sorcery|Sorcery]] •
[[Stormbringer:Peoples|Peoples]] •
[[Stormbringer:Young Kingdoms|Young Kingdoms]] •
[[Stormbringer:Law and Chaos|Law and Chaos]]
&lt;/div&gt;
</pre>
</pre>


== Quick Reference ==
== Migration Note ==
 
'''Shared'''
* <code>codex-page</code>
* <code>codex-navbox</code>
* <code>codex-banner</code>
 
'''Nightcats'''
* <code>codex-page codex-page--nightcats</code>
* <code>codex-navbox codex-navbox--nightcats</code>
 
'''Burning Temple'''
* <code>codex-page codex-page--ffbt</code>
* <code>ffbt-callout</code>
* <code>ffbt-seal</code>
* <code>ffbt-stylebox</code>
* <code>ffbt-statblock</code>
* <code>ffbt-grid</code>
* <code>ffbt-card</code>
* <code>ffbt-table</code>
* <code>ffbt-tag</code>
 
'''Sigil Lands'''
* <code>codex-page codex-page--sigil</code>
* <code>codex-navbox codex-navbox--sigil</code>


'''Stormbringer'''
Older markup should continue to render, because legacy Hawkmoon and Stormbringer selectors are still supported in CSS. New pages should use the canonical wrappers shown here.
* <code>codex-page codex-page--stormbringer</code>
* <code>storm-subtitle</code>
* <code>storm-panel</code>
* <code>storm-callout-chaos</code>
* <code>storm-callout-doom</code>
* <code>codex-nav--stormbringer</code>
* <code>storm-nav-title</code>


</div>
</div>
[[Category:Crucible Codex]]
[[Category:Crucible Codex]]

Revision as of 12:55, 23 April 2026

Crucible Codex Markup Pattern

This page defines the standard wrapper pattern for all Crucible Codex subsites.

The canonical structure is now consistent across subsites: 

{{SubsiteHeader}}
<div class="codex-page codex-page--subsite">

Page content here.

<div class="codex-navbox codex-navbox--subsite">
'''Subsite Codex'''
[[Subsite:Home|Home]] • [[Subsite:Other Page|Other Page]]
</div>

</div>

Canonical Subsite Wrappers

Subsite Page Wrapper Navigation Wrapper Legacy Alias Still Supported
Nightcats <div class="codex-page codex-page--nightcats"> <div class="codex-navbox codex-navbox--nightcats"> None needed
Five Fists / Burning Temple <div class="codex-page codex-page--ffbt"> <div class="codex-navbox codex-navbox--ffbt"> None needed
Sigil Lands <div class="codex-page codex-page--sigil"> <div class="codex-navbox codex-navbox--sigil"> None needed
Stormbringer <div class="codex-page codex-page--stormbringer"> <div class="codex-navbox codex-navbox--stormbringer"> codex-nav--stormbringer, stormbringer-nav
Hawkmoon <div class="codex-page codex-page--hawkmoon"> <div class="codex-navbox codex-navbox--hawkmoon"> hawkmoon-theme, hawkmoon-navbox
Apes <div class="codex-page codex-page--apes"> <div class="codex-navbox codex-navbox--apes"> None needed

Standard Rule

All subsites should use:

  • a shared Codex page wrapper based on codex-page
  • a subsite modifier in the form codex-page--NAME
  • a shared navigation wrapper based on codex-navbox
  • a subsite modifier in the form codex-navbox--NAME

This keeps page markup predictable and makes future CSS maintenance much easier.

Stormbringer Example

{{StormbringerHeader}}
<div class="codex-page codex-page--stormbringer">

= Character Creation =

Page text here.

<div class="codex-navbox codex-navbox--stormbringer">
<span class="storm-nav-title">Stormbringer Codex</span>
[[Stormbringer:Home|Home]] • [[Stormbringer:Character Creation|Character Creation]]
</div>

</div>

Hawkmoon Example

{{HawkmoonHeader}}
<div class="codex-page codex-page--hawkmoon">

= Granbretan =

Page text here.

<div class="codex-navbox codex-navbox--hawkmoon">
'''Hawkmoon Codex'''
[[Hawkmoon:Home|Home]] • [[Hawkmoon:Granbretan|Granbretan]]
</div>

</div>

Migration Note

Older markup should continue to render, because legacy Hawkmoon and Stormbringer selectors are still supported in CSS. New pages should use the canonical wrappers shown here.

Retrieved from "https://codex.crucible.cc/index.php?title=CrucibleCodexStyles&oldid=1063"