IVS Wiki:Wiki Style Guide

Introduction

🕮

This is a living, first-draft reference reverse-engineered from existing wiki pages. Sections marked Needs Confirmation 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.

⇧ Back to Top

---

Page Skeleton

Wrapping Template

Every content page is wrapped in a single top-level template:

{{Article - Manual | content =
...page body...
}}
[[Category:VALT]]

width

Not set by default — most pages omit it. Only add width = 90ch (or similar) when a page specifically needs a narrower content column.

---

__NOTOC__

Place before the template call to suppress the auto-generated table of contents on short pages.

---

Categories

Go at the very bottom, outside the template call. [[Category:VALT]] is the baseline; stack additional categories for version ([[Category:VALT 6.3]]) or audience ([[Category:User Training]]) when relevant.

---

Transclusion

Pages meant to be pulled into other pages should wrap their reusable body in <onlyinclude>...</onlyinclude> so only that portion is transcluded elsewhere.

---

Section Headings

Top-level heading

Plain <h1>Title</h1> — not =Title=.

---

Sub-sections

{{Manual lvl 2 | title = ... | content = ...}} — indented heading (20px).

---

Sub-sub-sections

{{Manual lvl 3 | title = ... | content = ...}} — indented further (40px).

⚠

Both heading templates fall back to a highlighted UNTITLED placeholder if title is left blank — that's a mistake to fix, not a valid style choice.

🕮

Needs Confirmation: a raw ==Heading== markup heading also appears in a couple of existing pages alongside {{Manual lvl 2}}. Deprecated, or intentional for a different visual weight?

---

Navigation Helpers

{{Float | content = [[Parent Page | back link]] }}

Right-floated "back to parent page" link, placed near the top of a page.

---

{{Top of Page}}

Inserts a "Back to Top" anchor. Drop this after each major section, immediately before {{hr}}.

---

{{hr}}

Plain divider between major (h1) sections.

---

{{hr - 2}}

Centered, light-gray, 90%-width divider for use within a section, between sub-topics.

⇧ Back to Top

---

Callout Boxes

The Aside Family

Base template:

{{Aside | hue = 200 | icon = 🕮 | content = Your note text here.}}

hue

Sets the box's color via a CSS custom property. Defaults to 15 (plain/neutral) if omitted.

---

icon

A literal Unicode character. Defaults to ✎ (pencil) if omitted.

---

content

The note body.

🕮

Needs Confirmation: 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.

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

---

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

{{Aside - Helpful | content = ...}}

Defaults to the info/tip look.

---

{{Aside - Warning | hue = 0 | content = ...}}

Defaults to a shared warning icon and hue 0; hue can still be overridden (e.g. hue = 50 for a softer caution).

🕮

Guidance so far: use Aside - Helpful for tips, use Aside - Warning for anything destructive or risky, and use the base, undecorated Aside for plain reference notes that don't need emotional weight.

⇧ Back to Top

---

Layout Templates

Side-by-Side Content

Three near-identical templates show up; the difference is the layout mechanism, not the visual intent:

{{Flexbox | left = ... | right = ...}}

Flexbox row, .text-box class on the left column. Optional flex_num, left_size, right_size.

---

{{Grid 2 | left = ... | right = ...}}

Flex-wrap based, .grid-container.grid-2 / .grid-item classes. Optional left_width, right_width.

---

{{Grid 2 - Grid | left = ... | right = ...}}

True CSS grid (grid-template-columns: 1fr 1fr), same class names as Grid 2, plus style_left, style_right, style_main for arbitrary inline CSS per side.

🕮

Needs Confirmation: when should a new page reach for Flexbox vs. Grid 2 vs. Grid 2 - Grid? Grid 2 - Grid 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.

---

The "Spec Sheet" Pattern

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

{{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>
}}

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

⇧ Back to Top

---

Images

Image Templates

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

🕮

Needs Confirmation: observed filename convention is VALT {version}-Manual-{Section} {seq}.png, e.g. VALT 6.3 Manual-Home 00.png. Please confirm this is the actual rule, and whether it applies outside the Manual namespace.

⇧ Back to Top

---

Inline Helpers

Highlighting and Interactive Links

{{Mark | text = ...}}

Highlights a short phrase (.highlight span). Use sparingly, for a single key term or requirement inside a paragraph — for example support for external audio as it might appear in running text.

---

{{Try it out | link = https://... }}

Overlays an invisible clickable region over nearby text/icon that links out to a Storylane interactive walkthrough. Typically placed inside an Aside - Helpful box right after a "did you know" tip.

⇧ Back to Top

---

Tables

Table Classes

class="simple_table"

Plain data tables (e.g. bandwidth/connection-speed tables).

---

class="network_ports_table"

Used specifically for port/protocol/service tables, frequently paired with a manual color-coded key above it.

Observed port-table color key:

Background	Icon	Meaning
#FFEBE5	🔓	Required only when SSL is disabled
#E5FFEB	🔒	Required only when SSL is enabled
#e5ecff	🔧	Required only for administration

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

⇧ Back to Top

---

Lists & Text Conventions

Voice and Formatting

Step-by-step instructions

MediaWiki # ordered lists, written in imperative, second person: "Hover over a room.", "Click the REC icon.", "Enter in the appropriate information."

---

Feature/glossary lists

<dl><dt>Term</dt><dd>Definition</dd></dl>, occasionally with class="singleLineHeight" on the <dl> to tighten spacing.

---

Bold

<b>/<strong> is used for UI element names and key terms, not for general emphasis.

---

Overall tone

Plain, second-person, instructional — minimal adjectives, no marketing voice, outside of product-overview intros.

⇧ Back to Top

---

CSS Classes Reference

Collected So Far

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

🕮

There is likely a --hue-to-color mapping and possibly other custom properties defined in the skin/Common.css that haven't been pulled into this guide yet.

⇧ Back to Top

---

Open Items for John

Needs Confirmation Before This Is Final

⚠

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.

1. Confirm/correct the hue-to-meaning table in the Callout Boxes section — the single biggest guess in this draft.
2. Clarify Flexbox vs. Grid 2 vs. Grid 2 - Grid — is one deprecated or preferred?
3. Confirm the image filename convention, and whether there's an upload/naming process authors should follow.
4. Is there a fixed category taxonomy, or is it ad hoc per page?
5. 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?
6. Anything from your own in-progress draft guide that isn't reflected here — add it in directly or paste it back for merging.

⇧ Back to Top