Creating a New Page

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

Experience
None required

Standard
Sinfar v3.0

 How to use this manual: 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.

Page Directory

Foundation

 1. Introduction
 2. Quick Navigation
 3. Building Blocks
 4. Wikitext Reference
 5. HTML Reference

Visual System

 6. Sinfar Components
 7. Images & Galleries
 8. Tables
 9. Icons & Symbols
 10. Color Standard

Page Design

 11. Typography
 12. Layout Standards
 13. Navigation Standards
 14. Templates
 15. Common Page Patterns

Production

 16. Accessibility
 17. Performance
 18. Publishing Checklist
 19. Troubleshooting
 20. Copy/Paste Cookbook
 21. Complete Examples

1. Introduction

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.

 Use the shared framework.
 New pages should use the approved sf-* classes instead of inventing unrelated layouts or placing large amounts of custom CSS inside page source.

What this manual covers

✦ Create

Create a blank article, select an editing mode, and establish the standard Sinfar page wrapper.

⚒ Construct

Use headings, links, cards, tables, images, galleries, alerts, grids, and navigation components.

✓ Publish

Preview the page, verify links and layout, assign categories, and provide a useful edit summary.

Pages this framework supports

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

 Source mode is required for advanced Sinfar layouts.
 VisualEditor is useful for ordinary writing, links, lists, and simple media. Use Source mode when inserting complete sf-* components or repairing page structure.

2. Quick Navigation

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

   Need text formatting?

   Open Wikitext Reference

   Need an image or gallery?

   Open Images & Galleries

   Need a table?

   Open Tables

   Need a Sinfar component?

   Open Sinfar Components

Editing mode comparison

Task	VisualEditor	Source Mode
Write ordinary paragraphs	Recommended	Supported
Bold, italics, lists, and links	Recommended	Supported
Insert a basic image	Recommended	Supported
Insert a simple table	Supported	Recommended for exact control
Use Sinfar cards and layouts	Not recommended	Required
Repair broken HTML or wrappers	Not recommended	Required
Copy complete page templates	Not recommended	Required

3. Building Blocks

Creating the blank page

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

Red-link source

[[Making Your First Gold]]

Direct-address example

https://wiki.sinfar.net/index.php/Making_Your_First_Gold

 Check the page title before writing.
 A misspelled address or red link creates a separate article under the incorrect title.

The required Sinfar page wrapper

Every new or refitted article begins inside the sovereign page shell.

__NOTOC__

<div class="sf-page">

Your page content goes here.

</div>

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

Basic page foundation

__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]]

4. Wikitext Reference

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

Headings

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

 Do not create a second page title.
 The Wiki already supplies the article’s page title. Inside the Sinfar hero, the visible h1 is part of the styled page presentation.

Bold, italics, underline, and strike-through

Result	Source
Bold text	'''Bold text'''
Italic text	''Italic text''
Bold italic text	'''''Bold italic text'''''
Underlined text	<u>Underlined text</u>
Removed or obsolete text	<s>Removed or obsolete text</s>

 Underline sparingly.
 Underlined words can resemble links. Use bold or a Sinfar label class for ordinary emphasis.

Font size

 Small supporting text

 Normal text

 Moderately enlarged text

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

 Standard: Do not assign custom font families. The Wiki’s shared stylesheet controls the typeface. Use headings and established classes before manually changing text size.

Paragraphs and line breaks

Purpose	Source
New paragraph	Leave one blank line between blocks of text.
Explicit line break	First line<br>Second line
Horizontal rule	----

Bullet lists

• First item
• Second item
• Nested item beneath the second entry

* First item
* Second item
** Nested item beneath the second entry

Numbered lists

1. First step
2. Second step
3. Third step

# First step
# Second step
# Third step

Mixed lists

# Install the required files.
# Configure the client.
# Review the following:
#* Recommended settings
#* Chat channels
#* Server rules

Superscript and subscript

Result	Source
102	10<sup>2</sup>
H2O	H<sub>2</sub>O

Comments hidden from readers

<!-- This note appears only in Source mode. -->

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

Displaying markup without rendering it

<nowiki>[[Player Housing]]</nowiki>

The outer nowiki tags tell MediaWiki to display the enclosed markup literally instead of processing it.

Redirects

#REDIRECT [[Player Housing]]

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

Categories

[[Category:Player Guides]]
[[Category:New Player Resources]]

Place categories at the bottom of page source, beneath the closing sf-page wrapper.

Table of contents controls

Command	Effect
__TOC__	Places MediaWiki’s contents box at that exact location.
__NOTOC__	Suppresses the automatic contents box.
__FORCETOC__	Forces the contents box to appear even when the page has few headings.

5. HTML Reference

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.

 Not every HTML element is permitted.
 Use the established elements shown in this manual. Unsupported or unsafe tags may be escaped, removed, or displayed as plain text.

Structural elements

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

Text elements

Element	Purpose	Example
b	Bold visual emphasis.	<b>Important</b>
strong	Strong semantic emphasis.	<strong>Required</strong>
i	Italic visual styling.	<i>Optional</i>
em	Semantic emphasis.	<em>Usually recommended</em>
u	Underline.	<u>Underlined</u>
s	Strike-through.	<s>Obsolete value</s>
small	Supporting or secondary text.	<small>Optional note</small>
sup	Superscript.	10<sup>2</sup>
sub	Subscript.	H<sub>2</sub>O

List elements

<ul>
  <li>First bullet</li>
  <li>Second bullet</li>
</ul>

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

Definition list

Safe Zone

An area where ordinary PvP restrictions apply.

Event Area

An area temporarily used for a scheduled activity.

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

Quotation

A quoted passage, policy statement, or in-world excerpt may be placed inside a blockquote.

<blockquote>
A quoted passage, policy statement, or in-world excerpt.
</blockquote>

Code and preformatted text

<nowiki><code>SetLocalInt(oObject, "EXAMPLE", TRUE);</code>

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

</nowiki>

Classes and inline style

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

 Standard: Use approved classes for repeated design. Reserve inline style attributes for isolated width, alignment, or emphasis adjustments that do not justify a new global class.

 Do not use deprecated presentation tags.
 Avoid tags such as <font> and <center>. Use classes, spans, and text-align instead.

6. Sinfar CSS Components

These components are defined globally by MediaWiki:Common.css. Copy the component sou