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 source and replace only its example content.

Page shell

<div class="sf-page">

Page content.

</div>

Compact hero

Area Guide

The Western Frontier

Locations, dangers, and reasons to explore the western reaches.

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Area Guide</div>
  <h1>The Western Frontier</h1>
  <p>Locations, dangers, and reasons to explore the western reaches.</p>
</div>

Section title

Exploration Routes

<h2 class="sf-section-title">Exploration Routes</h2>

Subheading

Northern Road

<h3 class="sf-subheading">Northern Road</h3>

Single card

Market Square

A central social and trading area frequently used for gatherings and public events.

<div class="sf-card">
  <h3>Market Square</h3>
  <p>A central social and trading area frequently used for gatherings and public events.</p>
</div>

Two-column card grid

Exploration

Scenic areas, hidden routes, and places worth visiting.

Adventure

Dungeons, quests, encounters, and dangerous locations.

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

  <div class="sf-card">
    <h3>Exploration</h3>
    <p>Scenic areas, hidden routes, and places worth visiting.</p>
  </div>

  <div class="sf-card">
    <h3>Adventure</h3>
    <p>Dungeons, quests, encounters, and dangerous locations.</p>
  </div>

</div>

Three-column card grid

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

  <div class="sf-card">
    <h3>First Card</h3>
    <p>First card content.</p>
  </div>

  <div class="sf-card">
    <h3>Second Card</h3>
    <p>Second card content.</p>
  </div>

  <div class="sf-card">
    <h3>Third Card</h3>
    <p>Third card content.</p>
  </div>

</div>

Four-value status bar

Region
Western Frontier

Difficulty
Moderate

Best For
Exploration

Status
Active

<div class="sf-start-status">
  <div><b>Region</b><br><span>Western Frontier</span></div>
  <div><b>Difficulty</b><br><span>Moderate</span></div>
  <div><b>Best For</b><br><span>Exploration</span></div>
  <div><b>Status</b><br><span>Active</span></div>
</div>

Quickbar

Getting There
Travel west from the central crossroads.

Recommended
Bring healing supplies and a companion.

Points of Interest
Ruins, camps, and a hidden overlook.

Related Guide
Starter Exploration Areas

<div class="sf-quickbar">
  <div><b>Getting There</b><br>Travel west from the central crossroads.</div>
  <div><b>Recommended</b><br>Bring healing supplies and a companion.</div>
  <div><b>Points of Interest</b><br>Ruins, camps, and a hidden overlook.</div>
  <div><b>Related Guide</b><br>[[Starter Exploration Areas]]</div>
</div>

Neutral note

 Note: This area changes during some scheduled events.

<div class="sf-note">
  <b>Note:</b> This area changes during some scheduled events.
</div>

Information alert

 Useful information
 This route connects directly to the eastern travel network.

<div class="sf-alert sf-alert-info">
  <b>Useful information</b>
  <span>This route connects directly to the eastern travel network.</span>
</div>

Warning alert

 Warning
 The northern path contains traps and hostile patrols.

<div class="sf-alert sf-alert-warning">
  <b>Warning</b>
  <span>The northern path contains traps and hostile patrols.</span>
</div>

Danger alert

 High-risk area
 Fresh characters should not enter without experienced support.

<div class="sf-alert sf-alert-danger">
  <b>High-risk area</b>
  <span>Fresh characters should not enter without experienced support.</span>
</div>

Progress line

1Prepare

2Travel

3Explore

4Complete

5Return

<div class="sf-progress-line">
  <div><b>1</b><span>Prepare</span></div>
  <div><b>2</b><span>Travel</span></div>
  <div><b>3</b><span>Explore</span></div>
  <div><b>4</b><span>Complete</span></div>
  <div><b>5</b><span>Return</span></div>
</div>

Action-link list

<ul class="sf-action-list">
  <li>[[Getting Started|Begin setup]]</li>
  <li>[[Recommended Settings|Configure your client]]</li>
  <li>[[Chat Channels|Review communication channels]]</li>
</ul>

Code block

<pre class="sf-codeblock"><nowiki>
Place code or literal Wiki source here.

</nowiki>

Footer links

Main Page · Player Resources · Wanted Articles

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

Badges

Recommended Area Level 5–10 Support

<span class="sf-badge sf-badge-best">Recommended</span>
<span class="sf-badge sf-badge-area">Area</span>
<span class="sf-badge sf-badge-range">Level 5–10</span>
<span class="sf-badge sf-badge-support">Support</span>

7. Images & Galleries

Before inserting an image

• Upload the file through the Wiki’s upload interface.
• Use a descriptive filename rather than a camera number or random export name.
• Confirm the filename and extension exactly.
• Optimize the image before uploading.
• Add useful alternative text when the image contains meaningful information.

Recommended filename pattern

Sinfar_Area_Western_Frontier_Overview.jpg
Sinfar_System_Cooking_Workstation.png
Sinfar_Event_Market_Fair_2026.jpg

Basic image

[[File:Example.jpg]]

Sized image

[[File:Example.jpg|600px]]

Centered image

[[File:Example.jpg|center|900px]]

Thumbnail with caption

[[File:Example.jpg|thumb|right|320px|A view of the western ruins.]]

Frameless image

[[File:Example.jpg|frameless|600px]]

Alternative text

[[File:Example.jpg
|thumb
|right
|320px
|alt=Stone ruins surrounded by a dense pine forest.
|The western ruins.
]]

Image linked to a Wiki page

[[File:Example.jpg|500px|link=Player Housing|alt=An example player house.]]

Image with no link

[[File:Example.jpg|500px|link=|alt=A scenic view of Sinfar.]]

Sinfar screenshot frame

<div class="sf-img-frame">
  [[File:Example.jpg|center|1000px|alt=A view of the area entrance.]]
</div>

 Image sizing: Request a display width close to the size actually used on the page. Do not upload a massive source and then force the browser to display the original at a tiny size.

Basic gallery

<gallery>
File:Area_Entrance.jpg|Area entrance
File:Area_Market.jpg|Market district
File:Area_Ruins.jpg|Ancient ruins
File:Area_Overlook.jpg|Scenic overlook
</gallery>

Packed responsive gallery

<gallery mode="packed" heights="170">
File:Area_Entrance.jpg|Area entrance|alt=Stone gate leading into the area.
File:Area_Market.jpg|Market district|alt=Open market surrounded by timber buildings.
File:Area_Ruins.jpg|Ancient ruins|alt=Overgrown stone ruins in the forest.
File:Area_Overlook.jpg|Scenic overlook|alt=Clifftop view across the island.
</gallery>

Gallery options

Option	Purpose
mode="packed"	Fits images into responsive rows with reduced empty space.
heights="170"	Sets the approximate image height within the gallery.
widths="220"	Sets the approximate image width in standard gallery mode.
caption="Area Gallery"	Adds a title above the complete gallery.
alt=...	Provides alternative text for an individual image.

Gallery with title

<gallery mode="packed" heights="170" caption="Western Frontier">
File:Area_Entrance.jpg|Area entrance
File:Area_Market.jpg|Market district
File:Area_Ruins.jpg|Ancient ruins
</gallery>

 Do not use images as decoration alone.
 Images should identify a location, explain a system, show an interface, preserve an event, or help the reader understand the subject.

8. Tables

Sinfar pages use the HTML table structure with the shared sf-table class as the preferred standard. It is easier to read, maintain, and combine with the unified stylesheet.

Standard Sinfar table

Area	Suggested Level	Notes
Old Forest Road	3–6	Good introductory exploration route.
Western Ruins	6–10	Contains traps and stronger encounters.

<table class="sf-table">
<tr>
  <th scope="col">Area</th>
  <th scope="col">Suggested Level</th>
  <th scope="col">Notes</th>
</tr>
<tr>
  <td>Old Forest Road</td>
  <td>3–6</td>
  <td>Good introductory exploration route.</td>
</tr>
<tr>
  <td>Western Ruins</td>
  <td>6–10</td>
  <td>Contains traps and stronger encounters.</td>
</tr>
</table>

Sortable table

<table class="sf-table sortable">
<tr>
  <th scope="col">Event</th>
  <th scope="col">Location</th>
  <th scope="col">Frequency</th>
</tr>
<tr>
  <td>Market Fair</td>
  <td>Central Market</td>
  <td>Monthly</td>
</tr>
<tr>
  <td>Arena Night</td>
  <td>War Games Arena</td>
  <td>Variable</td>
</tr>
</table>

Column widths

<table class="sf-table">
<tr>
  <th scope="col" style="width:25%;">System</th>
  <th scope="col" style="width:20%;">Difficulty</th>
  <th scope="col" style="width:55%;">Description</th>
</tr>
<tr>
  <td>Cooking</td>
  <td>Beginner</td>
  <td>Prepare food using gathered ingredients and recipe knowledge.</td>
</tr>
</table>

Wide table with horizontal scrolling

<div class="sf-table-scroll">

<table class="sf-table">
<tr>
  <th scope="col">Name</th>
  <th scope="col">Region</th>
  <th scope="col">Level</th>
  <th scope="col">Type</th>
  <th scope="col">Rewards</th>
  <th scope="col">Notes</th>
</tr>
<tr>
  <td>Example</td>
  <td>Example</td>
  <td>Example</td>
  <td>Example</td>
  <td>Example</td>
  <td>Example</td>
</tr>
</table>

</div>

Merged columns

<table class="sf-table">
<tr>
  <th scope="col" colspan="3">Event Schedule</th>
</tr>
<tr>
  <th scope="col">Event</th>
  <th scope="col">Host</th>
  <th scope="col">Location</th>
</tr>
<tr>
  <td>Market Fair</td>
  <td>Community Team</td>
  <td>Central Market</td>
</tr>
</table>

Merged rows

<table class="sf-table">
<tr>
  <th scope="col">Region</th>
  <th scope="col">Area</th>
  <th scope="col">Level</th>
</tr>
<tr>
  <td rowspan="2">Western Frontier</td>
  <td>Forest Road</td>
  <td>3–6</td>
</tr>
<tr>
  <td>Ancient Ruins</td>
  <td>6–10</td>
</tr>
</table>

Row header

<table class="sf-table">
<tr>
  <th scope="col">Attribute</th>
  <th scope="col">Value</th>
</tr>
<tr>
  <th scope="row">Recommended Level</th>
  <td>5–10</td>
</tr>
<tr>
  <th scope="row">Party Size</th>
  <td>1–4</td>
</tr>
</table>

Centered values

<table class="sf-table">
<tr>
  <th scope="col">Recipe</th>
  <th scope="col" style="text-align:center;">Rank</th>
  <th scope="col" style="text-align:center;">Time</th>
</tr>
<tr>
  <td>Roasted Fish</td>
  <td style="text-align:center;">1</td>
  <td style="text-align:center;">20 seconds</td>
</tr>
</table>

Native wikitext table

{| class="sf-table"
! scope="col" | Area
! scope="col" | Level
! scope="col" | Notes
|-
| Forest Road
| 3–6
| Introductory route
|-
| Ancient Ruins
| 6–10
| Traps and stronger enemies
|}

 Preferred method: Use the HTML table format for new Sinfar pages. Use native wikitext tables when modifying a page that already uses that syntax consistently.

 Tables are for structured comparisons.
 Do not use tables merely to force ordinary paragraphs into columns. Use grids and cards for page layout.

9. Icons & Symbols

Small Unicode symbols may be placed directly before headings or labels. They require no image upload and inherit the heading’s existing color.

Inline heading example

⚒ Crafting Systems

Guides and references for player-facing professions and production systems.

<h3>⚒ Crafting Systems</h3>

Recommended Sinfar symbols

Meaning	Symbol	Example
Create or begin	✦	<h3>✦ Create a Page</h3>
Edit or revise	✎	<h3>✎ Editing</h3>
Writing or authorship	✒	<h3>✒ Author’s Notes</h3>
High priority	★	<h3>★ Wanted Article</h3>
Reference	◆	<h3>◆ Quick Reference</h3>
Featured guide	◈	<h3>◈ Featured Guide</h3>
Continue or proceed	➜	<h3>➜ Continue</h3>
Completed or correct	✓	<h3>✓ Verified</h3>
Warning	⚠	<h3>⚠ Warning</h3>
Combat	⚔	<h3>⚔ Combat</h3>
Building or crafting	⚒	<h3>⚒ Crafting</h3>
System or mechanics	⚙	<h3>⚙ Mechanics</h3>
Rules or legal text	§	<h3>§ Rules</h3>
Community	◎	<h3>◎ Community</h3>
Location or target	⌖	<h3>⌖ Location</h3>

Additional neutral symbols

•  ‣  ▪  ▫  ◆  ◇  ◈  ○  ●  ◦
★  ☆  ✦  ✧  ❖  ✤  ✥  ✣
→  ➜  ➤  ➥  ↗  ↘  ↑  ↓
✓  ✔  ✕  ✖  ✗
✎  ✏  ✒
⚔  ⚒  ⚙  ⚖  §
⌂  ⌖  ⌕

 Avoid colorful emoji as structural icons.
 Emoji appearance varies significantly between operating systems. Prefer monochrome Unicode symbols that behave like ordinary text.

 Standard: Use one symbol per heading. Do not place every heading inside an icon badge or create decorative icon rows without a functional reason.

10. Color Standard

The unified palette is controlled through Common.css. Use established classes whenever possible. Direct color values should be reserved for isolated emphasis, verified channel colors, or documented special cases.

Core palette

Role	Color	Value	Use
Page shell	Dark blue-black	#11161d	Main article shell
Panel	Dark brown-black	#181214	Cards, tables, notes, and utility panels
Body text	Off-white	#f4efe6	Normal readable text
Muted text	Muted parchment	#c9bda9	Secondary information
Gold	Sinfar gold	#d8b46a	Eyebrows, labels, borders, and accents
Bright gold	Bright gold	#f0d28a	Headings and important labels
Link blue	Link blue	#8fc6ff	Internal and external links
Hover blue	Light blue	#b8d6ff	Hovered links
Danger red	Muted red	#9f4b3e	Danger and high-priority warnings
Success green	Muted green	#2f5d3a	Positive states and success badges
Information blue	Muted blue	#334e7a	Information states
Category purple	Muted purple	#60456f	Category and area badges

Approved text classes

Gold label text
Muted supporting text
Highlighted value
Positive value

<span class="sf-label">Gold label text</span>

<span class="sf-muted">Muted supporting text</span>

<span class="sf-value">Highlighted value</span>

<span class="sf-good">Positive value</span>

Direct inline color

<span style="color:#d8b46a;">Gold emphasis</span>

<span style="color:#f0d28a;">Bright gold emphasis</span>

<span style="color:#8fc6ff;">Blue reference text</span>

<span style="color:#9fe6bd;">Positive result</span>

<span style="color:#ff9c8f;">Danger result</span>

Colored legacy cards

<div class="sf-card sf-card--green">
  <h3>Green Card</h3>
  <p>Use only when color communicates a meaningful category.</p>
</div>

<div class="sf-card sf-card--blue">
  <h3>Blue Card</h3>
  <p>Use only when color communicates a meaningful category.</p>
</div>

<div class="sf-card sf-card--red">
  <h3>Red Card</h3>
  <p>Use for danger or a clearly established red category.</p>
</div>

<div class="sf-card sf-card--purple">
  <h3>Purple Card</h3>
  <p>Use only when color communicates a meaningful category.</p>
</div>

 Do not create a new color system on individual pages.
 The shared palette exists so pages remain visually related. New colors should be added to Common.css only when they represent a reusable, approved meaning.

 Body-text standard: Use #f4efe6 for readable text inside dark panels. Use gold for headings, labels, and controlled emphasis—not for entire paragraphs.

11. Typography

Typography establishes the information hierarchy of a page. Contributors should use the established Sinfar heading classes, body text, labels, links, and supporting-text styles rather than creating new font systems on individual pages.

Standard hierarchy

Element	Source	Use
Page title	<h1>Page Title</h1>	Used once inside the page hero.
Main section	<h2 class="sf-section-title">Section</h2>	Begins a major page chapter.
Subsection	<h3 class="sf-subheading">Subsection</h3>	Divides a major chapter into smaller subjects.
Card heading	<h3>Card Title</h3>	Names the subject contained inside a card.
Body paragraph	<p>Body text.</p>	Normal explanatory information.
Supporting text	<span class="sf-muted">Supporting text</span>	Secondary details that should remain readable but visually quieter.
Label	<span class="sf-label">Label</span>	Short gold labels, metadata names, and category indicators.

Heading example

Area Guide

The Western Frontier

A complete reference for the region, its routes, and its important locations.

Points of Interest

The Northern Road

The northern road provides access to the oldest ruins in the region.

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Area Guide</div>
  <h1>The Western Frontier</h1>
  <p>A complete reference for the region, its routes, and its important locations.</p>
</div>

<h2 class="sf-section-title">Points of Interest</h2>

<h3 class="sf-subheading">The Northern Road</h3>

<p>The northern road provides access to the oldest ruins in the region.</p>

Readable paragraph standard

• Keep paragraphs focused on one subject.
• Break long explanations into subsections or lists.
• Use bold for important words, not entire paragraphs.
• Use italics for titles, terms, or limited emphasis.
• Use underlining only when there is a specific reason.
• Avoid writing important instructions entirely in uppercase.

Text alignment

Alignment	Source	Recommended Use
Left	<div style="text-align:left;">Text</div>	Default for paragraphs, lists, and most table cells.
Center	<div style="text-align:center;">Text</div>	Short labels, image captions, statistics, and selected visual elements.
Right	<div style="text-align:right;">Text</div>	Rarely needed; may be useful for compact numerical presentation.

 Do not center entire articles.
 Centered paragraphs are harder to scan and should be reserved for short visual statements, labels, and selected page elements.

Font-size reference

Purpose	Source
Small supporting note	<span style="font-size:.85rem;">Supporting note</span>
Normal body text	<span style="font-size:1rem;">Normal text</span>
Moderate emphasis	<span style="font-size:1.15rem;">Emphasized text</span>

 Typography standard: Use the established heading hierarchy before changing font size manually. Consistent heading levels improve navigation, accessibility, and page maintenance.

12. Layout Standards

Sinfar pages use several recurring layout families. Select the family that matches the article’s purpose rather than forcing every subject into the same structure.

Compact utility page

The compact utility layout is the default for informational pages, system references, troubleshooting, rules, commands, scripts, and technical documentation.

__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Player Resource</div>
  <h1>Page Title</h1>
  <p>A direct explanation of the page’s purpose.</p>
</div>

<div class="sf-note">
  <b>At a glance:</b> Essential information or an important limitation.
</div>

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

<p>Opening information.</p>

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

<table class="sf-table">
<tr>
  <th scope="col">Subject</th>
  <th scope="col">Information</th>
</tr>
<tr>
  <td>Example</td>
  <td>Example information.</td>
</tr>
</table>

<div class="sf-footerlinks">
[[Related Page]] · [[Main Page]]
</div>

</div>

Guide page

Use the guide layout for leveling routes, crafting instructions, housing setup, event participation, travel, and other action-oriented subjects.

__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Player Guide</div>
  <h1>Guide Title</h1>
  <p>What the reader will learn or accomplish.</p>
</div>

<div class="sf-start-status">
  <div><b>Difficulty</b><br><span>Beginner</span></div>
  <div><b>Recommended Level</b><br><span>1–10</span></div>
  <div><b>Party Size</b><br><span>Solo or group</span></div>
  <div><b>Primary Goal</b><br><span>Guide outcome</span></div>
</div>

<h2 class="sf-section-title">Before You Begin</h2>

<ul>
  <li>Requirement one</li>
  <li>Requirement two</li>
</ul>

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

<p>First instructions.</p>

<h2 class="sf-section-title">Recommended Approach</h2>

<p>Main guidance.</p>

<h2 class="sf-section-title">Related Pages</h2>

<div class="sf-footerlinks">
[[Related Page One]] · [[Related Page Two]]
</div>

</div>

Area or location page

Area pages should quickly explain what the location is, where it connects, why players may visit, and what risks or activities exist there.

__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Area Guide</div>
  <h1>Area Name</h1>
  <p>A short description of the area and its identity.</p>
</div>

<div class="sf-start-status">
  <div><b>Region</b><br><span>Region name</span></div>
  <div><b>Recommended Level</b><br><span>Level range</span></div>
  <div><b>Area Type</b><br><span>Exploration</span></div>
  <div><b>Primary Access</b><br><span>Connecting area</span></div>
</div>

<div class="sf-img-frame">
  [[File:Area_Overview.jpg|center|1000px|alt=Overview of the area.]]
</div>

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

<p>Explain the location and why it matters.</p>

<h2 class="sf-section-title">How to Reach It</h2>

<p>Provide useful directions and connecting areas.</p>

<h2 class="sf-section-title">Points of Interest</h2>

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

  <div class="sf-card">
    <h3>First Location</h3>
    <p>Description.</p>
  </div>

  <div class="sf-card">
    <h3>Second Location</h3>
    <p>Description.</p>
  </div>

  <div class="sf-card">
    <h3>Third Location</h3>
    <p>Description.</p>
  </div>

</div>

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

<gallery mode="packed" heights="170">
File:Area_First.jpg|First location
File:Area_Second.jpg|Second location
File:Area_Third.jpg|Third location
</gallery>

<div class="sf-footerlinks">
[[Exploration]] · [[Area Directory]] · [[Main Page]]
</div>

</div>

System documentation page

Use this layout for crafting systems, server mechanics, custom features, commands, and builder-facing technical documentation.

__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">System Documentation</div>
  <h1>System Name</h1>
  <p>What the system does and who uses it.</p>
</div>

<div class="sf-note">
  <b>Scope:</b> State what this page documents and any important version limitation.
</div>

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

<p>Explain the purpose and basic operation.</p>

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

<table class="sf-table">
<tr>
  <th scope="col">Requirement</th>
  <th scope="col">Details</th>
</tr>
<tr>
  <td>Example</td>
  <td>Requirement details.</td>
</tr>
</table>

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

<p>Explain the system in a logical order.</p>

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

<table class="sf-table">
<tr>
  <th scope="col">Function</th>
  <th scope="col">Result</th>
</tr>
<tr>
  <td>Example function</td>
  <td>Example result.</td>
</tr>
</table>

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

<div class="sf-alert sf-alert-warning">
  <b>Common issue</b>
  <span>Explain the cause and correction.</span>
</div>

<div class="sf-footerlinks">
[[Builder Resources]] · [[Related System]]
</div>

</div>

Landing or hub page

Landing pages organize major resource categories. They may use more visual presentation than ordinary utility pages, but should still remain clear and navigable.

__NOTOC__

<div class="sf-page">

<div class="sf-hero">
  <div class="sf-eyebrow">Resource Hub</div>
  <h1>Player Resources</h1>
  <p>Guides, references, systems, and tools for playing on Sinfar.</p>
</div>

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

  <div class="sf-card">
    <h3>Getting Started</h3>
    <p>Installation, setup, and first steps.</p>
    <p class="sf-action-links">[[Getting Started|Open resources]]</p>
  </div>

  <div class="sf-card">
    <h3>Character Progression</h3>
    <p>Leveling, equipment, and mechanical guidance.</p>
    <p class="sf-action-links">[[Character Progression|Open resources]]</p>
  </div>

  <div class="sf-card">
    <h3>Exploration</h3>
    <p>Locations, routes, dungeons, and discoveries.</p>
    <p class="sf-action-links">[[Exploration|Open resources]]</p>
  </div>

</div>

</div>

Layout selection table

Page Subject	Recommended Layout
Chat commands, settings, rules, scripts	Compact utility page
Leveling, gold-making, travel, crafting instructions	Guide page
Builder-created regions, towns, dungeons, scenic locations	Area or location page
Custom mechanics, crafting systems, commands, technical features	System documentation page
Major category navigation	Landing or hub page

 Avoid decorative overbuilding.
 Ordinary resource pages should prioritize usable information. Reserve large cinematic presentation for the Main Page and selected major landing pages.

13. Navigation Standards

Every page should connect readers to the next useful destination. Navigation should be intentional, descriptive, and limited to genuinely related resources.

Internal links

[[Player Housing]]

[[Player Housing|housing guide]]

[[Player Housing#Buying a Property|buying a property]]

Footer navigation

Getting Started · Player Resources · Main Page

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

Navigation cards

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

  <div class="sf-card">
    <h3>Getting Started</h3>
    <p>Installation, settings, and first steps.</p>
    <p class="sf-action-links">
      [[Getting Started|Open the guide]]
    </p>
  </div>

  <div class="sf-card">
    <h3>Player Housing</h3>
    <p>Property ownership, building, and customization.</p>
    <p class="sf-action-links">
      [[Player Housing|Open the guide]]
    </p>
  </div>

  <div class="sf-card">
    <h3>Exploration</h3>
    <p>Areas, routes, dungeons, and scenic locations.</p>
    <p class="sf-action-links">
      [[Exploration|Open the directory]]
    </p>
  </div>

</div>

Action list

<ul class="sf-action-list">
  <li>[[Getting Started|Install and configure the game]]</li>
  <li>[[Recommended Settings|Apply recommended settings]]</li>
  <li>[[Chat Channels|Learn the communication channels]]</li>
</ul>

Page-directory links

[[#Overview|Overview]]
[[#Requirements|Requirements]]
[[#Troubleshooting|Troubleshooting]]

Redirects for alternate names

#REDIRECT [[Canonical Page Title]]

Related-page standards

• Link the canonical page rather than reproducing the same instructions.
• Use descriptive link text when the page title does not fit naturally into the sentence.
• Do not create a footer containing every remotely related article.
• Test section links after publishing because heading changes can break them.
• Intentional red links may be used to identify planned pages.
• Remove accidental red links caused by spelling or capitalization mistakes.

Categories as navigation

[[Category:Player Guides]]
[[Category:Builder Resources]]
[[Category:Area Guides]]

 Navigation standard: A page should normally end with related links, one or more verified categories, or both. Readers should not reach the bottom and have nowhere useful to continue.

14. Templates

MediaWiki templates allow repeated content to be stored once and inserted into many pages. Use templates for information that must remain consistent across multiple articles.

Basic template use

{{Template Name}}

Template with named parameters

{{Area Summary
 |name=Western Frontier
 |region=Western Isles
 |level=5–10
 |type=Exploration
}}

Template with numbered parameters

{{Example Template|First value|Second value}}

Displaying a default parameter value

{{{name|Unnamed location}}}

Basic template source

<div class="sf-card">
  <h3>{{{name|Unnamed location}}}</h3>
  <p><span class="sf-label">Region:</span> {{{region|Unknown}}}</p>
  <p><span class="sf-label">Suggested Level:</span> {{{level|Not specified}}}</p>
  <p><span class="sf-label">Type:</span> {{{type|General}}}</p>
</div>

Template documentation pattern

<nowiki><noinclude>
== Usage ==

<pre>
{{Area Summary
 |name=
 |region=
 |level=
 |type=
}}

Parameters

Parameter	Required	Description
name	Yes	Displayed area name
region	No	Larger region containing the area
level	No	Suggested level range
type	No	Area category or activity type

</nowiki>

Template-control tags

Tag	Purpose
<noinclude>	Content shown on the template page but not inserted into articles.
<includeonly>	Content inserted into articles but normally hidden from the template page itself.
<onlyinclude>	Limits transclusion to the content placed inside the tag.

When to create a template

✓ Good Template Uses

• Repeated information boxes
• Standard notices
• Navigation shared across many pages
• Repeated tables with consistent fields
• Content that must be updated globally

✗ Poor Template Uses

• Content appearing on only one page
• Large unique page layouts
• Temporary text
• Simple formatting already handled by CSS classes
• Avoiding ordinary writing

 Do not create undocumented templates.
 Every reusable template should explain its purpose, parameters, expected values, and a copyable usage example.

 Framework rule: CSS classes control visual design. Templates control reusable content and repeated structures. Do not use templates merely as substitutes for documented sf-* snippets.

15. Common Page Patterns

The following patterns provide recommended information structures for common Sinfar subjects. They are not rigid forms; remove irrelevant fields and add sections only when the subject requires them.

Area guide pattern

Section	Information to Include
Hero	Area name, category, and short identity statement
Status bar	Region, level range, area type, primary access
Overview	What the area is and why players may visit
How to Reach It	Connecting areas and useful travel directions
Points of Interest	Important buildings, encounters, vistas, NPCs, and systems
Dangers	Level concerns, PvP status, traps, encounters, and restrictions
Gallery	Useful identifying images

Crafting-system pattern

Section	Information to Include
Overview	Purpose of the system and what it produces
How to Begin	Required placeables, tools, skills, items, or locations
Materials	Inputs and where they are obtained
Process	How the player uses the system
Progression	Ranks, experience, unlocks, or increasing difficulty
Outputs	Products, qualities, rewards, and uses
Troubleshooting	Common mistakes and failure states

Event page pattern

Section	Information to Include
Event Summary	What happens and who may participate
Schedule	Date, frequency, duration, or scheduling method
Location	Where the event occurs and how to reach it
Requirements	Levels, equipment, registration, team size, or character restrictions
Rules	Event-specific rules and prohibited behavior
Rewards	Prizes, recognition, or participation benefits
Gallery or History	Past events, winners, screenshots, or notable moments

Leveling-guide pattern

Section	Information to Include
Recommended Range	Character levels and expected equipment
Preparation	Supplies, resistances, party composition, and travel needs
Route	Areas or activities in practical order
Risks	Enemy types, traps, PvP exposure, and difficulty spikes
Alternatives	Other routes for different builds or groups
Next Step	Where the player should continue afterward

Script documentation pattern

Section	Information to Include
Purpose	What the script does
Event	Where the script is attached or fired
Required Setup	Variables, tags, resrefs, includes, objects, or module systems
Source	Complete copyable code
Configuration	Values builders are expected to change
Behavior	What happens during execution
Troubleshooting	Compile errors, event problems, and common setup mistakes

Lore or organization pattern

Section	Information to Include
Summary	Identity and role in the setting
History	Relevant development over time
Location	Associated regions, buildings, or territories
Structure	Leadership, ranks, membership, or organization
Activities	What the group does in practice
Player Interaction	How characters may encounter, join, oppose, or work with it

 Pattern rule: Use these structures to prevent important practical information from being omitted. They are reference outlines, not mandatory questionnaires.

16. Accessibility

Accessible pages are easier to read, navigate, search, and maintain. Accessibility also improves the experience for readers using mobile devices, screen readers, zoomed interfaces, or reduced-vision settings.

Heading order

<h1>Page Title</h1>

<h2 class="sf-section-title">Main Section</h2>

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

<h3 class="sf-subheading">Another Subsection</h3>

<h2 class="sf-section-title">Next Main Section</h2>

 Do not skip heading levels for appearance.
 Do not jump from an h2 directly to an h4 merely because the smaller size looks desirable.

Alternative text

[[File:Western_Frontier.jpg
|thumb
|right
|320px
|alt=Stone road passing through pine forest toward distant ruins.
|The road leading into the Western Frontier.
]]

Writing useful alternative text

Poor	Better
Screenshot	Stone road leading through a pine forest toward ruined towers.
Cooking image	Player using a campfire cooker with ingredients placed in its inventory.
Map	Map showing the route from the central crossroads to the western ruins.

Decorative images

An image that communicates no useful information may use an empty alternative description:

[[File:Decorative_Divider.png|600px|link=|alt=]]

Table headers

<table class="sf-table">
<tr>
  <th scope="col">Area</th>
  <th scope="col">Level</th>
  <th scope="col">Notes</th>
</tr>
<tr>
  <th scope="row">Forest Road</th>
  <td>3–6</td>
  <td>Introductory route</td>
</tr>
</table>

Color and meaning

Do not rely on color alone to communicate a status.

✓ Recommended ⚠ Restricted

<span class="sf-badge sf-badge-best">✓ Recommended</span>

<span class="sf-badge">⚠ Restricted</span>

Link wording

Avoid	Use
[[Player Housing|Click here]]	Read the [[Player Housing|Player Housing guide]].
[[Getting Started|This page]]	Follow the [[Getting Started|installation guide]].

Readable structure

• Use descriptive headings.
• Keep navigation links meaningful outside their surrounding sentence.
• Use sufficient text contrast.
• Avoid communicating essential information through images alone.
• Do not create extremely wide tables without a scrolling wrapper.
• Do not place large amounts of text in tiny font sizes.
• Check the page at narrow browser widths.

 Accessibility standard: The page should remain understandable when images fail to load, colors are difficult to distinguish, or the reader navigates primarily through headings and links.