IVSWikiBlue at 20:04, 9 July 2026

2026-07-09T20:04:09Z

IVSWikiBlue: Created page with "{{Article - Manual | width = 90ch | content =

Introduction

{{Aside - Helpful | hue = 260 | content = This is a living, first-draft reference reverse-engineered from e..."

2026-07-09T19:57:03Z

Created page with "{{Article - Manual | width = 90ch | content = <h1>Introduction</h1> {{Aside - Helpful | hue = 260 | content = This is a living, first-draft reference reverse-engineered from e..."

New page

{{Article - Manual | width = 90ch | content =
<h1>Introduction</h1>
{{Aside - Helpful | hue = 260 | content = This is a living, first-draft reference reverse-engineered from existing wiki pages. Sections marked <b>Needs Confirmation</b> below should be reviewed before this is treated as final.}}

This guide documents the templates, CSS classes, and structural conventions used across the IVS Wiki so new pages look and behave consistently with existing ones, without every author having to reverse-engineer the wikitext by hand.

{{Top of Page}}
{{hr}}

<h1>Page Skeleton</h1>

{{Manual lvl 2 | title = Wrapping Template | content =
Every content page is wrapped in a single top-level template:

<pre>
{{Article - Manual | width = 90ch | content =
...page body...
}}
[[Category:VALT]]
</pre>

<dl class="singleLineHeight">
<dt>width</dt>
<dd>Optional (e.g. <code><nowiki>90ch</nowiki></code>); omit for default.</dd>
{{hr - 2}}
<dt><nowiki>__NOTOC__</nowiki></dt>
<dd>Place before the template call to suppress the auto-generated table of contents on short pages.</dd>
{{hr - 2}}
<dt>Categories</dt>
<dd>Go at the very bottom, <em>outside</em> the template call. <code><nowiki>[[Category:VALT]]</nowiki></code> is the baseline; stack additional categories for version (<code><nowiki>[[Category:VALT 6.3]]</nowiki></code>) or audience (<code><nowiki>[[Category:User Training]]</nowiki></code>) when relevant.</dd>
{{hr - 2}}
<dt>Transclusion</dt>
<dd>Pages meant to be pulled into other pages should wrap their reusable body in <code><nowiki><onlyinclude>...</onlyinclude></nowiki></code> so only that portion is transcluded elsewhere.</dd>
</dl>
}}

{{hr - 2}}

{{Manual lvl 2 | title = Section Headings | content =
<dl class="singleLineHeight">
<dt>Top-level heading</dt>
<dd>Plain <code><nowiki><h1>Title</h1></nowiki></code> — not <code><nowiki>=Title=</nowiki></code>.</dd>
{{hr - 2}}
<dt>Sub-sections</dt>
<dd><code><nowiki>{{Manual lvl 2 | title = ... | content = ...}}</nowiki></code> — indented heading (20px).</dd>
{{hr - 2}}
<dt>Sub-sub-sections</dt>
<dd><code><nowiki>{{Manual lvl 3 | title = ... | content = ...}}</nowiki></code> — indented further (40px).</dd>
</dl>

{{Aside - Warning | hue = 50 | content = Both heading templates fall back to a highlighted <b>UNTITLED</b> placeholder if <code><nowiki>title</nowiki></code> is left blank — that's a mistake to fix, not a valid style choice.}}

{{Aside | hue = 200 | icon = 🕮 | content = <b>Needs Confirmation:</b> a raw <code><nowiki>==Heading==</nowiki></code> markup heading also appears in a couple of existing pages alongside <code><nowiki>{{Manual lvl 2}}</nowiki></code>. Deprecated, or intentional for a different visual weight?}}
}}

{{hr - 2}}

{{Manual lvl 2 | title = Navigation Helpers | content =
<dl class="singleLineHeight">
<dt><code><nowiki>{{Float | content = [[Parent Page | back link]] }}</nowiki></code></dt>
<dd>Right-floated "back to parent page" link, placed near the top of a page.</dd>
{{hr - 2}}
<dt><code><nowiki>{{Top of Page}}</nowiki></code></dt>
<dd>Inserts a "Back to Top" anchor. Drop this after each major section, immediately before <code><nowiki>{{hr}}</nowiki></code>.</dd>
{{hr - 2}}
<dt><code><nowiki>{{hr}}</nowiki></code></dt>
<dd>Plain divider between major (h1) sections.</dd>
{{hr - 2}}
<dt><code><nowiki>{{hr - 2}}</nowiki></code></dt>
<dd>Centered, light-gray, 90%-width divider for use <em>within</em> a section, between sub-topics.</dd>
</dl>
}}

{{Top of Page}}
{{hr}}

<h1>Callout Boxes</h1>

{{Manual lvl 2 | title = The Aside Family | content =
Base template:

<pre>
{{Aside | hue = 200 | icon = 🕮 | content = Your note text here.}}
</pre>

<dl class="singleLineHeight">
<dt>hue</dt>
<dd>Sets the box's color via a CSS custom property. Defaults to <code><nowiki>15</nowiki></code> (plain/neutral) if omitted.</dd>
{{hr - 2}}
<dt>icon</dt>
<dd>A literal Unicode character. Defaults to ✎ (pencil) if omitted.</dd>
{{hr - 2}}
<dt>content</dt>
<dd>The note body.</dd>
</dl>

{{Aside | hue = 200 | icon = 🕮 | content = <b>Needs Confirmation:</b> the hue-to-meaning table below is inferred from a handful of pages, not confirmed. Please correct/complete it — it's the single most useful thing to get right here, since it decides which color an author reaches for.}}

<table class="simple_table">
<tr><th>hue</th><th>Apparent meaning</th><th>Typical icon</th></tr>
<tr><td>(default)</td><td>Plain note, no strong color</td><td>✎ pencil (default)</td></tr>
<tr><td>200</td><td>Neutral reference/info note</td><td>🕮 book</td></tr>
<tr><td>260</td><td>"Did you know" / tip / feature highlight</td><td>✎ or none</td></tr>
<tr><td>50</td><td>Caution</td><td>⚠ warning</td></tr>
<tr><td>0</td><td>Hard warning / destructive action</td><td>⚠ or shared warning icon</td></tr>
</table>

{{hr - 2}}

Two shorthand variants save authors from remembering hue/icon combinations:

<dl class="singleLineHeight">
<dt><code><nowiki>{{Aside - Helpful | content = ...}}</nowiki></code></dt>
<dd>Defaults to the info/tip look.</dd>
{{hr - 2}}
<dt><code><nowiki>{{Aside - Warning | hue = 0 | content = ...}}</nowiki></code></dt>
<dd>Defaults to a shared warning icon and hue 0; <code><nowiki>hue</nowiki></code> can still be overridden (e.g. <code><nowiki>hue = 50</nowiki></code> for a softer caution).</dd>
</dl>

{{Aside - Helpful | content = <b>Guidance so far:</b> use <code><nowiki>Aside - Helpful</nowiki></code> for tips, use <code><nowiki>Aside - Warning</nowiki></code> for anything destructive or risky, and use the base, undecorated <code><nowiki>Aside</nowiki></code> for plain reference notes that don't need emotional weight.}}
}}

{{Top of Page}}
{{hr}}

<h1>Layout Templates</h1>

{{Manual lvl 2 | title = Side-by-Side Content | content =
Three near-identical templates show up; the difference is the layout mechanism, not the visual intent:

<dl class="singleLineHeight">
<dt><code><nowiki>{{Flexbox | left = ... | right = ...}}</nowiki></code></dt>
<dd>Flexbox row, <code><nowiki>.text-box</nowiki></code> class on the left column. Optional <code><nowiki>flex_num</nowiki></code>, <code><nowiki>left_size</nowiki></code>, <code><nowiki>right_size</nowiki></code>.</dd>
{{hr - 2}}
<dt><code><nowiki>{{Grid 2 | left = ... | right = ...}}</nowiki></code></dt>
<dd>Flex-wrap based, <code><nowiki>.grid-container.grid-2</nowiki></code> / <code><nowiki>.grid-item</nowiki></code> classes. Optional <code><nowiki>left_width</nowiki></code>, <code><nowiki>right_width</nowiki></code>.</dd>
{{hr - 2}}
<dt><code><nowiki>{{Grid 2 - Grid | left = ... | right = ...}}</nowiki></code></dt>
<dd>True CSS grid (<code><nowiki>grid-template-columns: 1fr 1fr</nowiki></code>), same class names as Grid 2, plus <code><nowiki>style_left</nowiki></code>, <code><nowiki>style_right</nowiki></code>, <code><nowiki>style_main</nowiki></code> for arbitrary inline CSS per side.</dd>
</dl>

{{Aside | hue = 200 | icon = 🕮 | content = <b>Needs Confirmation:</b> when should a new page reach for <code><nowiki>Flexbox</nowiki></code> vs. <code><nowiki>Grid 2</nowiki></code> vs. <code><nowiki>Grid 2 - Grid</nowiki></code>? <code><nowiki>Grid 2 - Grid</nowiki></code> looks like the newer/preferred choice whenever per-side custom styling is needed, while the other two look older and simpler. Worth confirming a default.}}

{{hr - 2}}

<h3 style="margin-left: 20px">The "Spec Sheet" Pattern</h3>
<div style="margin: 0px 20px">
Seen repeatedly for hardware/requirement pages: a <code><nowiki><dl><dt>Term</dt><dd>description</dd></dl></nowiki></code> on the left, paired with a bordered gray box of <code><nowiki><strong>Minimum Recommended Spec</strong></nowiki></code> plus a circle-bulleted list (<code><nowiki><li style="list-style:circle"></nowiki></code>) on the right, wrapped in <code><nowiki>Grid 2 - Grid</nowiki></code> like so:

<pre>
{{Grid 2 - Grid | style_right = border-left:solid 2px #eaecf0; padding: 10px 15px; background-color: var(--wikiGrey); | style_left = width: 400px; padding-right: 20px; | left =
<dt>Term</dt>
<dd>Description of the term.</dd>
|right =
<strong>Minimum Recommended Spec</strong>
<ul>
<li style="list-style:circle">Spec line one</li>
<li style="list-style:circle">Spec line two</li>
</ul>
}}
</pre>

This is a reusable pattern worth naming and reaching for directly whenever documenting requirements/specs, rather than rebuilding it ad hoc.
</div>
}}

{{Top of Page}}
{{hr}}

<h1>Images</h1>

{{Manual lvl 2 | title = Image Templates | content =
<table class="simple_table">
<tr><th>Template</th><th>Behavior</th></tr>
<tr><td><code><nowiki>{{img - resize | file = X.png | width = ...}}</nowiki></code></td><td>Resizable, click-to-enlarge image in an <code><nowiki>.img_resize</nowiki></code> div. Default choice for in-line screenshots.</td></tr>
<tr><td><code><nowiki>{{img - no_click | file = X.png | width = ...}}</nowiki></code></td><td>Same, but not clickable — use for purely decorative/illustrative images that shouldn't invite a lightbox zoom.</td></tr>
<tr><td><code><nowiki>{{img - icon | file = X.png | width = 16px}}</nowiki></code></td><td>Small inline icon (<code><nowiki>.inline_icon</nowiki></code> span) — used next to link text, e.g. beside a card name.</td></tr>
<tr><td><code><nowiki>{{img - icon color}}</nowiki></code> / <code><nowiki>{{img - button}}</nowiki></code></td><td>Colored icon and clickable button-style image variants (the latter used inside <code><nowiki>Try it out</nowiki></code>).</td></tr>
</table>

{{Aside | hue = 200 | icon = 🕮 | content = <b>Needs Confirmation:</b> observed filename convention is <code><nowiki>VALT {version}-Manual-{Section} {seq}.png</nowiki></code>, e.g. <code><nowiki>VALT 6.3 Manual-Home 00.png</nowiki></code>. Please confirm this is the actual rule, and whether it applies outside the Manual namespace.}}
}}

{{Top of Page}}
{{hr}}

<h1>Inline Helpers</h1>

{{Manual lvl 2 | title = Highlighting and Interactive Links | content =
<dl class="singleLineHeight">
<dt><code><nowiki>{{Mark | text = ...}}</nowiki></code></dt>
<dd>Highlights a short phrase (<code><nowiki>.highlight</nowiki></code> span). Use sparingly, for a single key term or requirement inside a paragraph — for example {{Mark | text = support for external audio}} as it might appear in running text.</dd>
{{hr - 2}}
<dt><code><nowiki>{{Try it out | link = https://... }}</nowiki></code></dt>
<dd>Overlays an invisible clickable region over nearby text/icon that links out to a Storylane interactive walkthrough. Typically placed inside an <code><nowiki>Aside - Helpful</nowiki></code> box right after a "did you know" tip.</dd>
</dl>
}}

{{Top of Page}}
{{hr}}

<h1>Tables</h1>

{{Manual lvl 2 | title = Table Classes | content =
<dl class="singleLineHeight">
<dt><code><nowiki>class="simple_table"</nowiki></code></dt>
<dd>Plain data tables (e.g. bandwidth/connection-speed tables).</dd>
{{hr - 2}}
<dt><code><nowiki>class="network_ports_table"</nowiki></code></dt>
<dd>Used specifically for port/protocol/service tables, frequently paired with a manual color-coded key above it.</dd>
</dl>

Observed port-table color key:

<table class="simple_table">
<tr><th>Background</th><th>Icon</th><th>Meaning</th></tr>
<tr style="background-color:#FFEBE5"><td><nowiki>#FFEBE5</nowiki></td><td>🔓</td><td>Required only when SSL is disabled</td></tr>
<tr style="background-color:#E5FFEB"><td><nowiki>#E5FFEB</nowiki></td><td>🔒</td><td>Required only when SSL is enabled</td></tr>
<tr style="background-color:#e5ecff"><td><nowiki>#e5ecff</nowiki></td><td>🔧</td><td>Required only for administration</td></tr>
</table>

Rows with no special requirement get no background color. Use <code><nowiki><caption></nowiki></code> to label which table applies to which server-to-server hop when multiple tables appear together.
}}

{{Top of Page}}
{{hr}}

<h1>Lists & Text Conventions</h1>

{{Manual lvl 2 | title = Voice and Formatting | content =
<dl class="singleLineHeight">
<dt>Step-by-step instructions</dt>
<dd>MediaWiki <code><nowiki>#</nowiki></code> ordered lists, written in imperative, second person: "Hover over a room.", "Click the REC icon.", "Enter in the appropriate information."</dd>
{{hr - 2}}
<dt>Feature/glossary lists</dt>
<dd><code><nowiki><dl><dt>Term</dt><dd>Definition</dd></dl></nowiki></code>, occasionally with <code><nowiki>class="singleLineHeight"</nowiki></code> on the <code><nowiki><dl></nowiki></code> to tighten spacing.</dd>
{{hr - 2}}
<dt>Bold</dt>
<dd><code><nowiki><b></nowiki></code>/<code><nowiki><strong></nowiki></code> is used for UI element names and key terms, not for general emphasis.</dd>
{{hr - 2}}
<dt>Overall tone</dt>
<dd>Plain, second-person, instructional — minimal adjectives, no marketing voice, outside of product-overview intros.</dd>
</dl>
}}

{{Top of Page}}
{{hr}}

<h1>CSS Classes Reference</h1>

{{Manual lvl 2 | title = Collected So Far | content =
<table class="simple_table">
<tr><th>Class / Property</th><th>Used for</th></tr>
<tr><td><nowiki>aside</nowiki>, <nowiki>aside-item</nowiki>, <nowiki>aside-content</nowiki></td><td>The Aside callout box family</td></tr>
<tr><td><nowiki>article</nowiki>, <nowiki>article_wrap_manual</nowiki>, <nowiki>valt_manual_toc</nowiki></td><td>Page wrapper (Article - Manual)</td></tr>
<tr><td><nowiki>text-box</nowiki></td><td>Flexbox left column</td></tr>
<tr><td><nowiki>grid-container</nowiki>, <nowiki>grid-item</nowiki></td><td>Grid 2 / Grid 2 - Grid layouts</td></tr>
<tr><td><nowiki>simple_table</nowiki></td><td>Plain data tables</td></tr>
<tr><td><nowiki>network_ports_table</nowiki></td><td>Port/protocol tables</td></tr>
<tr><td><nowiki>img_resize</nowiki></td><td>Resizable images</td></tr>
<tr><td><nowiki>inline_icon</nowiki></td><td>Small inline icon spans</td></tr>
<tr><td><nowiki>highlight</nowiki></td><td>Mark template</td></tr>
<tr><td><nowiki>try_it_out</nowiki></td><td>Try it out overlay links</td></tr>
<tr><td><nowiki>myManualList</nowiki>, <nowiki>singleLineHeight</nowiki></td><td>List spacing/formatting variants</td></tr>
<tr><td><nowiki>--wikiGrey</nowiki></td><td>CSS custom property, themed gray background</td></tr>
</table>

{{Aside | hue = 200 | icon = 🕮 | content = There is likely a <code><nowiki>--hue</nowiki></code>-to-color mapping and possibly other custom properties defined in the skin/Common.css that haven't been pulled into this guide yet.}}
}}

{{Top of Page}}
{{hr}}

<h1>Open Items for John</h1>

{{Manual lvl 2 | title = Needs Confirmation Before This Is Final | content =
{{Aside - Warning | hue = 50 | content = This guide is a first pass reverse-engineered from wikitext, not written or reviewed by a human yet. The items below are the open gaps.}}

#Confirm/correct the hue-to-meaning table in the Callout Boxes section — the single biggest guess in this draft.
#Clarify <code><nowiki>Flexbox</nowiki></code> vs. <code><nowiki>Grid 2</nowiki></code> vs. <code><nowiki>Grid 2 - Grid</nowiki></code> — is one deprecated or preferred?
#Confirm the image filename convention, and whether there's an upload/naming process authors should follow.
#Is there a fixed category taxonomy, or is it ad hoc per page?
#Any voice/tone rules beyond what's inferable from existing pages — e.g. how to handle product names (VALT, BEAM, CUE, ROAM) on first mention?
#Anything from your own in-progress draft guide that isn't reflected here — add it in directly or paste it back for merging.
}}

{{Top of Page}}
}}

[[Category:IVS Wiki]]

IVS Wiki:Wiki Style Guide - Revision history

IVSWikiBlue at 20:04, 9 July 2026

IVSWikiBlue: Created page with "{{Article - Manual | width = 90ch | content =

Introduction