TorturedCats at 20:33, 11 July 2026

2026-07-11T20:33:56Z

← Older revision		Revision as of 20:33, 11 July 2026
Line 3,456:		Line 3,456:
	<li>Established the unified construction standard for future Sinfar Wiki articles.</li>		<li>Established the unified construction standard for future Sinfar Wiki articles.</li>
	</ul>		</ul>
			</div>
			</div>

			</div>

TorturedCats at 20:28, 11 July 2026

2026-07-11T20:28:56Z

Show changes

TorturedCats at 17:27, 11 July 2026

2026-07-11T17:27:46Z

Show changes

TorturedCats at 16:23, 11 July 2026

2026-07-11T16:23:03Z

Show changes

TorturedCats: Created page with "NOTOC

Sinfar Wiki Builder’s Reference

Creating a New Page

The complete technical and visual reference for building Sinfar Wiki pages in the unified style.

Primary Use
Page construction

Editing Modes
Visual · Source

Expe..."

2026-07-11T15:53:58Z

Created page with "__NOTOC__ <div class="sf-page sf-manual-page"> <div class="sf-hero sf-hero-compact"> <div class="sf-eyebrow">Sinfar Wiki Builder’s Reference</div> <h1>Creating a New Page</h1> <p>The complete technical and visual reference for building Sinfar Wiki pages in the unified style.</p> </div> <div class="sf-start-status"> <div><b>Primary Use</b><br><span>Page construction</span></div> <div><b>Editing Modes</b><br><span>Visual · Source</span></div> <div><b>Expe..."

New page
__NOTOC__

<div class="sf-page sf-manual-page">

<div class="sf-hero sf-hero-compact">
<div class="sf-eyebrow">Sinfar Wiki Builder’s Reference</div>
<h1>Creating a New Page</h1>
<p>The complete technical and visual reference for building Sinfar Wiki pages in the unified style.</p>
</div>

<div class="sf-start-status">
<div><b>Primary Use</b><br><span>Page construction</span></div>
<div><b>Editing Modes</b><br><span>Visual · Source</span></div>
<div><b>Experience</b><br><span>None required</span></div>
<div><b>Standard</b><br><span>Sinfar v3.0</span></div>
</div>

<div class="sf-note">
<b>How to use this manual:</b> Keep this page open while building. Use the directory to jump directly to the feature, component, or snippet you need. Most examples are ready to copy into Source mode.
</div>

<div class="sf-manual-layout">

<div class="sf-manual-toc">

<div class="sf-manual-toc-title">Page Directory</div>

<div class="sf-manual-toc-group">Foundation</div>
[[#manual-introduction|1. Introduction]]
[[#manual-navigation|2. Quick Navigation]]
[[#manual-building-blocks|3. Building Blocks]]
[[#manual-wikitext|4. Wikitext Reference]]
[[#manual-html|5. HTML Reference]]

<div class="sf-manual-toc-group">Visual System</div>
[[#manual-components|6. Sinfar Components]]
[[#manual-images|7. Images & Galleries]]
[[#manual-tables|8. Tables]]
[[#manual-icons|9. Icons & Symbols]]
[[#manual-colors|10. Color Standard]]

<div class="sf-manual-toc-group">Page Design</div>
[[#manual-typography|11. Typography]]
[[#manual-layouts|12. Layout Standards]]
[[#manual-navigation-standards|13. Navigation Standards]]
[[#manual-templates|14. Templates]]
[[#manual-patterns|15. Common Page Patterns]]

<div class="sf-manual-toc-group">Production</div>
[[#manual-accessibility|16. Accessibility]]
[[#manual-performance|17. Performance]]
[[#manual-checklist|18. Publishing Checklist]]
[[#manual-troubleshooting|19. Troubleshooting]]
[[#manual-cookbook|20. Copy/Paste Cookbook]]
[[#manual-examples|21. Complete Examples]]

</div>

<div class="sf-manual-content">

<h2 id="manual-introduction" class="sf-section-title">1. Introduction</h2>

<p>This page is the canonical construction reference for new Sinfar Wiki articles. It documents the markup, HTML, visual components, colors, images, tables, layouts, and publishing standards used throughout the unified Wiki design.</p>

<div class="sf-alert sf-alert-info">
<b>Use the shared framework.</b>
<span>New pages should use the approved <code>sf-*</code> classes instead of inventing unrelated layouts or placing large amounts of custom CSS inside page source.</span>
</div>

<h3 class="sf-subheading">What this manual covers</h3>

<div class="sf-grid-3">

<div class="sf-card">
<h3>✦ Create</h3>
<p>Create a blank article, select an editing mode, and establish the standard Sinfar page wrapper.</p>
</div>

<div class="sf-card">
<h3>⚒ Construct</h3>
<p>Use headings, links, cards, tables, images, galleries, alerts, grids, and navigation components.</p>
</div>

<div class="sf-card">
<h3>✓ Publish</h3>
<p>Preview the page, verify links and layout, assign categories, and provide a useful edit summary.</p>
</div>

</div>

<h3 class="sf-subheading">Pages this framework supports</h3>

<ul>
<li>Area and location guides</li>
<li>Crafting and progression systems</li>
<li>Leveling and gold-making guides</li>
<li>Recurring events and activities</li>
<li>Builder and scripting documentation</li>
<li>Player resources and mechanical references</li>
<li>Lore, organizations, businesses, and community pages</li>
</ul>

<div class="sf-alert sf-alert-warning">
<b>Source mode is required for advanced Sinfar layouts.</b>
<span>VisualEditor is useful for ordinary writing, links, lists, and simple media. Use Source mode when inserting complete <code>sf-*</code> components or repairing page structure.</span>
</div>

<h2 id="manual-navigation" class="sf-section-title">2. Quick Navigation</h2>

<p>The side directory provides access to every chapter. Use your browser’s page search for exact terms such as <code>gallery</code>, <code>sortable</code>, <code>underline</code>, <code>hero</code>, or <code>quickbar</code>.</p>

<div class="sf-quickbar">

<div>
<b>Need text formatting?</b><br>
[[#manual-wikitext|Open Wikitext Reference]]
</div>

<div>
<b>Need an image or gallery?</b><br>
[[#manual-images|Open Images & Galleries]]
</div>

<div>
<b>Need a table?</b><br>
[[#manual-tables|Open Tables]]
</div>

<div>
<b>Need a Sinfar component?</b><br>
[[#manual-components|Open Sinfar Components]]
</div>

</div>

<h3 class="sf-subheading">Editing mode comparison</h3>

<table class="sf-table">
<tr>
<th scope="col">Task</th>
<th scope="col">VisualEditor</th>
<th scope="col">Source Mode</th>
</tr>
<tr>
<td><b>Write ordinary paragraphs</b></td>
<td>Recommended</td>
<td>Supported</td>
</tr>
<tr>
<td><b>Bold, italics, lists, and links</b></td>
<td>Recommended</td>
<td>Supported</td>
</tr>
<tr>
<td><b>Insert a basic image</b></td>
<td>Recommended</td>
<td>Supported</td>
</tr>
<tr>
<td><b>Insert a simple table</b></td>
<td>Supported</td>
<td>Recommended for exact control</td>
</tr>
<tr>
<td><b>Use Sinfar cards and layouts</b></td>
<td>Not recommended</td>
<td>Required</td>
</tr>
<tr>
<td><b>Repair broken HTML or wrappers</b></td>
<td>Not recommended</td>
<td>Required</td>
</tr>
<tr>
<td><b>Copy complete page templates</b></td>
<td>Not recommended</td>
<td>Required</td>
</tr>
</table>

<h2 id="manual-building-blocks" class="sf-section-title">3. Building Blocks</h2>

<h3 class="sf-subheading">Creating the blank page</h3>

<table class="sf-table">
<tr>
<th scope="col">Method</th>
<th scope="col">How It Works</th>
<th scope="col">Best Use</th>
</tr>
<tr>
<td><b>Red link</b></td>
<td>Add a link to a page that does not exist, then open the resulting red link.</td>
<td>Preferred because the new page is already connected to another article.</td>
</tr>
<tr>
<td><b>Wiki search</b></td>
<td>Search for the exact title and select the option to create the missing page.</td>
<td>Useful when the page has not yet been linked anywhere.</td>
</tr>
<tr>
<td><b>Direct address</b></td>
<td>Replace the page name in the browser address with the intended new title.</td>
<td>Fast, but easier to mistype.</td>
</tr>
</table>

<h3 class="sf-subheading">Red-link source</h3>

<pre class="sf-codeblock"><nowiki>[[Making Your First Gold]]</nowiki></pre>

<h3 class="sf-subheading">Direct-address example</h3>

<pre class="sf-codeblock"><nowiki>https://wiki.sinfar.net/index.php/Making_Your_First_Gold</nowiki></pre>

<div class="sf-alert sf-alert-warning">
<b>Check the page title before writing.</b>
<span>A misspelled address or red link creates a separate article under the incorrect title.</span>
</div>

<h3 class="sf-subheading">The required Sinfar page wrapper</h3>

<p>Every new or refitted article begins inside the sovereign page shell.</p>

<pre class="sf-codeblock"><nowiki>__NOTOC__

<div class="sf-page">

Your page content goes here.

</div></nowiki></pre>

<table class="sf-table">
<tr>
<th scope="col">Line</th>
<th scope="col">Purpose</th>
</tr>
<tr>
<td><code>__NOTOC__</code></td>
<td>Hides MediaWiki’s automatic contents box when the page uses custom navigation or does not need a contents list.</td>
</tr>
<tr>
<td><code><div class="sf-page"></code></td>
<td>Activates the Sinfar page background, text colors, borders, link colors, spacing, and shared component rules.</td>
</tr>
<tr>
<td><code></div></code></td>
<td>Closes the page shell. Every opening <code>div</code> must have a corresponding closing tag.</td>
</tr>
</table>

<h3 class="sf-subheading">Basic page foundation</h3>

<pre class="sf-codeblock"><nowiki>__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
<div class="sf-eyebrow">Player Guide</div>
<h1>Making Your First Gold</h1>
<p>Practical ways for a new character to begin earning money.</p>
</div>

<h2 class="sf-section-title">Overview</h2>

<p>Write the opening information here.</p>

<h2 class="sf-section-title">Getting Started</h2>

<p>Write the first useful instructions here.</p>

<div class="sf-footerlinks">
[[Main Page]] · [[Player Resources]] · [[Wanted Articles]]
</div>

</div>

[[Category:Player Guides]]</nowiki></pre>

<h2 id="manual-wikitext" class="sf-section-title">4. Wikitext Reference</h2>

<p>Wikitext is MediaWiki’s native markup language. It handles headings, emphasis, lists, links, redirects, categories, and other common page functions.</p>

<h3 class="sf-subheading">Headings</h3>

<table class="sf-table">
<tr>
<th scope="col">Result</th>
<th scope="col">Source</th>
<th scope="col">Use</th>
</tr>
<tr>
<td><b>Main article section</b></td>
<td><code><nowiki>== Main Section ==</nowiki></code></td>
<td>Standard MediaWiki level-two heading.</td>
</tr>
<tr>
<td><b>Subsection</b></td>
<td><code><nowiki>=== Subsection ===</nowiki></code></td>
<td>Used beneath a main section.</td>
</tr>
<tr>
<td><b>Sinfar section title</b></td>
<td><code><nowiki><h2 class="sf-section-title">Section</h2></nowiki></code></td>
<td>Preferred for unified refit pages.</td>
</tr>
<tr>
<td><b>Sinfar subheading</b></td>
<td><code><nowiki><h3 class="sf-subheading">Subheading</h3></nowiki></code></td>
<td>Preferred beneath a styled section title.</td>
</tr>
</table>

<div class="sf-alert sf-alert-info">
<b>Do not create a second page title.</b>
<span>The Wiki already supplies the article’s page title. Inside the Sinfar hero, the visible <code>h1</code> is part of the styled page presentation.</span>
</div>

<h3 class="sf-subheading">Bold, italics, underline, and strike-through</h3>

<table class="sf-table">
<tr>
<th scope="col">Result</th>
<th scope="col">Source</th>
</tr>
<tr>
<td>'''Bold text'''</td>
<td><code><nowiki>'''Bold text'''</nowiki></code></td>
</tr>
<tr>
<td>''Italic text''</td>
<td><code><nowiki>''Italic text''</nowiki></code></td>
</tr>
<tr>
<td>'''''Bold italic text'''''</td>
<td><code><nowiki>'''''Bold italic text'''''</nowiki></code></td>
</tr>
<tr>
<td><u>Underlined text</u></td>
<td><code><nowiki><u>Underlined text</u></nowiki></code></td>
</tr>
<tr>
<td><s>Removed or obsolete text</s></td>
<td><code><nowiki><s>Removed or obsolete text</s></nowiki></code></td>
</tr>
</table>

<div class="sf-alert sf-alert-warning">
<b>Underline sparingly.</b>
<span>Underlined words can resemble links. Use bold or a Sinfar label class for ordinary emphasis.</span>
</div>

<h3 class="sf-subheading">Font size</h3>

<div class="sf-manual-example">
<span style="font-size:.85rem;">Small supporting text</span><br>
<span style="font-size:1rem;">Normal text</span><br>
<span style="font-size:1.15rem;">Moderately enlarged text</span>
</div>

<pre class="sf-codeblock"><nowiki><span style="font-size:.85rem;">Small supporting text</span>

<span style="font-size:1rem;">Normal text</span>

<span style="font-size:1.15rem;">Moderately enlarged text</span></nowiki></pre>

<div class="sf-note">
<b>Standard:</b> Do not assign custom font families. The Wiki’s shared stylesheet controls the typeface. Use headings and established classes before manually changing text size.
</div>

<h3 class="sf-subheading">Paragraphs and line breaks</h3>

<table class="sf-table">
<tr>
<th scope="col">Purpose</th>
<th scope="col">Source</th>
</tr>
<tr>
<td>New paragraph</td>
<td>Leave one blank line between blocks of text.</td>
</tr>
<tr>
<td>Explicit line break</td>
<td><code><nowiki>First line<br>Second line</nowiki></code></td>
</tr>
<tr>
<td>Horizontal rule</td>
<td><code><nowiki>----</nowiki></code></td>
</tr>
</table>

<h3 class="sf-subheading">Bullet lists</h3>

<div class="sf-manual-example">
<ul>
<li>First item</li>
<li>Second item</li>
<li>Nested item beneath the second entry</li>
</ul>
</div>

<pre class="sf-codeblock"><nowiki>* First item
* Second item
** Nested item beneath the second entry</nowiki></pre>

<h3 class="sf-subheading">Numbered lists</h3>

<div class="sf-manual-example">
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</div>

<pre class="sf-codeblock"><nowiki># First step
# Second step
# Third step</nowiki></pre>

<h3 class="sf-subheading">Mixed lists</h3>

<pre class="sf-codeblock"><nowiki># Install the required files.
# Configure the client.
# Review the following:
#* Recommended settings
#* Chat channels
#* Server rules</nowiki></pre>

<h3 class="sf-subheading">Superscript and subscript</h3>

<table class="sf-table">
<tr>
<th scope="col">Result</th>
<th scope="col">Source</th>
</tr>
<tr>
<td>10<sup>2</sup></td>
<td><code><nowiki>10<sup>2</sup></nowiki></code></td>
</tr>
<tr>
<td>H<sub>2</sub>O</td>
<td><code><nowiki>H<sub>2</sub>O</nowiki></code></td>
</tr>
</table>

<h3 class="sf-subheading">Comments hidden from readers</h3>

<pre class="sf-codeblock"><nowiki></nowiki></pre>

<p>Comments are useful for maintenance instructions, placeholders, warnings to future contributors, and identifying where new source should be inserted.</p>

<h3 class="sf-subheading">Displaying markup without rendering it</h3>

<pre class="sf-codeblock"><nowiki><nowiki>[[Player Housing]]</nowiki></nowiki></pre>

<p>The outer <code>nowiki</code> tags tell MediaWiki to display the enclosed markup literally instead of processing it.</p>

<h3 class="sf-subheading">Redirects</h3>

<pre class="sf-codeblock"><nowiki>#REDIRECT [[Player Housing]]</nowiki></pre>

<p>A redirect page contains the redirect line as its first meaningful content. Redirects are useful for alternate names, spelling variations, and likely search phrases.</p>

<h3 class="sf-subheading">Categories</h3>

<pre class="sf-codeblock"><nowiki>[[Category:Player Guides]]
[[Category:New Player Resources]]</nowiki></pre>

<p>Place categories at the bottom of page source, beneath the closing <code>sf-page</code> wrapper.</p>

<h3 class="sf-subheading">Table of contents controls</h3>

<table class="sf-table">
<tr>
<th scope="col">Command</th>
<th scope="col">Effect</th>
</tr>
<tr>
<td><code><nowiki>__TOC__</nowiki></code></td>
<td>Places MediaWiki’s contents box at that exact location.</td>
</tr>
<tr>
<td><code><nowiki>__NOTOC__</nowiki></code></td>
<td>Suppresses the automatic contents box.</td>
</tr>
<tr>
<td><code><nowiki>__FORCETOC__</nowiki></code></td>
<td>Forces the contents box to appear even when the page has few headings.</td>
</tr>
</table>

<h2 id="manual-html" class="sf-section-title">5. HTML Reference</h2>

<p>MediaWiki accepts a controlled set of HTML elements inside page source. Sinfar pages use HTML primarily for structure, reusable CSS classes, and precise visual presentation.</p>

<div class="sf-alert sf-alert-warning">
<b>Not every HTML element is permitted.</b>
<span>Use the established elements shown in this manual. Unsupported or unsafe tags may be escaped, removed, or displayed as plain text.</span>
</div>

<h3 class="sf-subheading">Structural elements</h3>

<table class="sf-table">
<tr>
<th scope="col">Element</th>
<th scope="col">Purpose</th>
<th scope="col">Example</th>
</tr>
<tr>
<td><code>div</code></td>
<td>Creates a block container and applies Sinfar classes.</td>
<td><code><nowiki><div class="sf-card">...</div></nowiki></code></td>
</tr>
<tr>
<td><code>span</code></td>
<td>Applies styling to part of a sentence.</td>
<td><code><nowiki><span class="sf-label">Important</span></nowiki></code></td>
</tr>
<tr>
<td><code>p</code></td>
<td>Creates an explicit paragraph.</td>
<td><code><nowiki><p>Paragraph text.</p></nowiki></code></td>
</tr>
<tr>
<td><code>h1–h3</code></td>
<td>Creates headings used by Sinfar hero and section classes.</td>
<td><code><nowiki><h2 class="sf-section-title">Overview</h2></nowiki></code></td>
</tr>
<tr>
<td><code>br</code></td>
<td>Creates a line break.</td>
<td><code><nowiki>First line<br>Second line</nowiki></code></td>
</tr>
<tr>
<td><code>hr</code></td>
<td>Creates a horizontal rule.</td>
<td><code><nowiki><hr></nowiki></code></td>
</tr>
</table>

<h3 class="sf-subheading">Text elements</h3>

<table class="sf-table">
<tr>
<th scope="col">Element</th>
<th scope="col">Purpose</th>
<th scope="col">Example</th>
</tr>
<tr>
<td><code>b</code></td>
<td>Bold visual emphasis.</td>
<td><code><nowiki><b>Important</b></nowiki></code></td>
</tr>
<tr>
<td><code>strong</code></td>
<td>Strong semantic emphasis.</td>
<td><code><nowiki><strong>Required</strong></nowiki></code></td>
</tr>
<tr>
<td><code>i</code></td>
<td>Italic visual styling.</td>
<td><code><nowiki><i>Optional</i></nowiki></code></td>
</tr>
<tr>
<td><code>em</code></td>
<td>Semantic emphasis.</td>
<td><code><nowiki><em>Usually recommended</em></nowiki></code></td>
</tr>
<tr>
<td><code>u</code></td>
<td>Underline.</td>
<td><code><nowiki><u>Underlined</u></nowiki></code></td>
</tr>
<tr>
<td><code>s</code></td>
<td>Strike-through.</td>
<td><code><nowiki><s>Obsolete value</s></nowiki></code></td>
</tr>
<tr>
<td><code>small</code></td>
<td>Supporting or secondary text.</td>
<td><code><nowiki><small>Optional note</small></nowiki></code></td>
</tr>
<tr>
<td><code>sup</code></td>
<td>Superscript.</td>
<td><code><nowiki>10<sup>2</sup></nowiki></code></td>
</tr>
<tr>
<td><code>sub</code></td>
<td>Subscript.</td>
<td><code><nowiki>H<sub>2</sub>O</nowiki></code></td>
</tr>
</table>

<h3 class="sf-subheading">List elements</h3>

<pre class="sf-codeblock"><nowiki><ul>
<li>First bullet</li>
<li>Second bullet</li>
</ul>

<ol>
<li>First step</li>
<li>Second step</li>
</ol></nowiki></pre>

<h3 class="sf-subheading">Definition list</h3>

<div class="sf-manual-example">
<dl>
<dt><b>Safe Zone</b></dt>
<dd>An area where ordinary PvP restrictions apply.</dd>

<dt><b>Event Area</b></dt>
<dd>An area temporarily used for a scheduled activity.</dd>
</dl>
</div>

<pre class="sf-codeblock"><nowiki><dl>
<dt><b>Safe Zone</b></dt>
<dd>An area where ordinary PvP restrictions apply.</dd>

<dt><b>Event Area</b></dt>
<dd>An area temporarily used for a scheduled activity.</dd>
</dl></nowiki></pre>

<h3 class="sf-subheading">Quotation</h3>

<div class="sf-manual-example">
<blockquote>
A quoted passage, policy statement, or in-world excerpt may be placed inside a blockquote.
</blockquote>
</div>

<pre class="sf-codeblock"><nowiki><blockquote>
A quoted passage, policy statement, or in-world excerpt.
</blockquote></nowiki></pre>

<h3 class="sf-subheading">Code and preformatted text</h3>

<pre class="sf-codeblock"><nowiki><code>SetLocalInt(oObject, "EXAMPLE", TRUE);</code>

<pre>
Multiline code or source example.
Spacing is preserved.
</pre></nowiki></pre>

<h3 class="sf-subheading">Classes and inline style</h3>

<pre class="sf-codeblock"><nowiki><span class="sf-label">Approved class styling</span>

<span style="color:#d8b46a;">Direct inline color</span>

<div class="sf-card" style="margin-top:12px;">
Card with one local spacing adjustment.
</div></nowiki></pre>

<div class="sf-note">
<b>Standard:</b> Use approved classes for repeated design. Reserve inline <code>style</code> attributes for isolated width, alignment, or emphasis adjustments that do not justify a new global class.
</div>

<div class="sf-alert sf-alert-danger">
<b>Do not use deprecated presentation tags.</b>
<span>Avoid tags such as <code><font></code> and <code><center></code>. Use classes, spans, and <code>text-align</code> instead.</span>
</div>

<h2 id="manual-components" class="sf-section-title">6. Sinfar CSS Components</h2>

<p>These components are defined globally by <code>MediaWiki:Common.css</code>. Copy the component sou

Creating a New Page - Revision history

TorturedCats at 20:33, 11 July 2026

TorturedCats at 20:28, 11 July 2026

TorturedCats at 17:27, 11 July 2026

TorturedCats at 16:23, 11 July 2026

TorturedCats: Created page with "__NOTOC__ Sinfar Wiki Builder’s Reference Creating a New Page The complete technical and visual reference for building Sinfar Wiki pages in the unified style. Primary UsePage construction Editing ModesVisual · Source Expe..."

Creating a New Page

TorturedCats: Created page with "NOTOC

Sinfar Wiki Builder’s Reference

Creating a New Page

The complete technical and visual reference for building Sinfar Wiki pages in the unified style.

Primary Use
Page construction

Editing Modes
Visual · Source

Expe..."