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.

17. Performance

Efficient pages load faster, remain easier to edit, and reduce the likelihood of rendering problems. Most performance issues come from oversized images, duplicated inline styling, excessive markup, and unnecessarily complex layouts.

Image performance

• Resize screenshots before uploading when full original resolution is unnecessary.
• Use JPEG or WebP for ordinary scenic screenshots where transparency is not required.
• Use PNG for icons, transparent assets, diagrams, and images requiring lossless detail.
• Avoid placing many full-resolution images directly on one page.
• Use galleries for groups of related screenshots.
• Do not upload the same image repeatedly under different filenames.

Source performance

Avoid	Preferred
Repeated large inline style blocks	Shared classes defined in Common.css
Tables used for ordinary page layout	sf-grid-2, sf-grid-3, and cards
Deeply nested containers	Simple, direct component structures
Duplicated instructions across many pages	One canonical page with internal links
Large decorative animations	Static, purposeful imagery
One-off custom color systems	The shared Sinfar palette

Component reuse

<div class="sf-alert sf-alert-warning">
  <b>Warning</b>
  <span>Reusable alert using the shared stylesheet.</span>
</div>

This is preferable to repeatedly defining backgrounds, borders, spacing, and typography through inline styles.

Collapsible sections

Collapsible sections are useful when a page contains large reference blocks that many readers will not need immediately.

<div class="mw-collapsible mw-collapsed sf-card">
  <h3>Advanced Reference</h3>

  <div class="mw-collapsible-content">
    <p>Long or advanced information.</p>
  </div>
</div>

 Do not hide essential information.
 Requirements, warnings, and primary instructions should remain visible. Collapse extended examples, optional details, or advanced reference material.

Page-size management

• Keep one canonical article per subject.
• Split a page only when it has become difficult to navigate or maintain.
• Do not fragment closely related information merely to shorten the source.
• Use a side directory, section navigation, or collapsible references before creating many small dependency pages.
• Move reusable repeated structures into templates only when repetition actually exists.

 Performance standard: Build the simplest structure that presents the information clearly. Complexity should solve a real display or maintenance problem.

18. Publishing Checklist

Use this checklist before publishing a new article or completing a major refit.

✓ Structure

• Page is wrapped in sf-page
• Hero contains the correct title
• Heading levels are ordered correctly
• All opening HTML tags are closed
• Sections follow a logical order

✓ Content

• Information is current
• Technical names are exact
• Instructions are complete
• Examples are clearly identified
• Duplicate information is linked instead

✓ Navigation

• Internal links were opened
• External links were opened
• Red links are intentional
• Footer navigation is useful
• Categories were verified

✓ Images

• Filenames are correct
• Images are appropriately sized
• Alternative text is useful
• Captions explain relevant images
• Gallery images are related

✓ Tables

• Headers identify every column
• Column widths are practical
• Wide tables can scroll
• Cells align consistently
• Tables are not used as page layout

✓ Presentation

• Shared classes are used
• Body text remains readable
• Color is used consistently
• Mobile or narrow layout was checked
• No unnecessary dead space remains

Preview process

1. Select Show preview.
2. Read the page from the beginning rather than inspecting only the edited section.
3. Check tables, cards, images, links, and section spacing.
4. Select Show changes and confirm only the intended source was added or removed.
5. Write a specific edit summary.
6. Publish the page.
7. Open the live article and perform one final review.

Edit-summary examples

Weak	Useful
Update	Added area access directions and points-of-interest table.
Fix	Corrected broken image filenames and repaired gallery captions.
Page creation	Created initial guide for the Western Frontier area.
Changed stuff	Reorganized crafting requirements and added progression details.

Change-log standard

Where a maintained page includes a visible change log, record meaningful content or structural revisions rather than every spelling correction.

<h2 class="sf-section-title">Change Log</h2>

<ul>
  <li>Created the initial page structure and area overview.</li>
  <li>Added travel directions, points of interest, and image gallery.</li>
  <li>Reorganized encounter information into a reference table.</li>
</ul>

 Ready to publish:
 The page should render correctly, answer its intended subject, use the shared visual system, and direct readers toward the next useful resource.

19. Troubleshooting

The page stops rendering halfway through

Likely Cause	Correction
Unclosed <nowiki> or <pre>	Search the source above the failure point and confirm both tags are closed.
Malformed nested example	Display nested tags using HTML entities such as &lt; and &gt;.
Editor paste limit	Paste the source in smaller, clearly ordered sections.
Large block omitted during copying	Search for the next section heading and compare against the original source.

A card or grid extends beyond the page

• Confirm the component is inside the sf-page wrapper.
• Check for fixed pixel widths applied through inline styles.
• Replace fixed page-layout tables with an approved grid class.
• Use minmax(0, 1fr) only in shared CSS rather than individual page source.
• Place very wide tables inside sf-table-scroll.

An image does not appear

Check	Example
Exact filename	Example.png is different from example.PNG on some systems.
Extension	Confirm whether the uploaded file is PNG, JPG, JPEG, GIF, or WebP.
File namespace	Use [[File:Filename.png]].
Upload completion	Open the file page and confirm the asset is present.
Cached replacement	Refresh or purge after overwriting an existing filename.

An internal link is red

• Open the intended destination and verify its exact title.
• Check spelling, punctuation, and capitalization.
• Use a piped link when the displayed wording differs from the page title.
• Leave the link red only when the missing page is intentionally planned.

[[Exact Page Title|Displayed wording]]

Raw HTML appears on the page

• Confirm the tag is supported by MediaWiki.
• Check that the tag is not accidentally inside nowiki.
• Do not use raw <a href> links; use MediaWiki link syntax.
• Check for malformed quotation marks in class or style attributes.
• Use ordinary straight quotation marks rather than typographic quotation marks in code.

A table is misaligned

• Confirm every row contains the intended number of cells.
• Check rowspan and colspan values.
• Confirm every opening tr, th, and td has a closing tag.
• Set explicit column widths when the browser distributes them poorly.
• Use table-layout:fixed only through an approved shared class or controlled style.

New CSS does not appear

1. Save the change to MediaWiki:Common.css.
2. Confirm the selector matches the source class exactly.
3. Refresh the affected page.
4. Perform a hard refresh if necessary.
5. Purge the Wiki page cache.
6. Inspect whether a later CSS rule overrides the new rule.

The source editor cannot paste the full page

 Use controlled insertion blocks.
 Divide the source by numbered sections, paste them in order, and leave unique insertion comments between blocks until the page is complete.

<!-- PART TWO INSERTS BELOW THIS LINE -->

<!-- PART THREE INSERTS BELOW THIS LINE -->

Finding a specific source block

Search for a unique sentence, heading ID, or comment rather than a common class name such as sf-card or sf-codeblock.

id="manual-troubleshooting"

<!-- PART II-B — INSERT SECTIONS 17–21 BELOW THIS COMMENT -->

20. Copy/Paste Cookbook

This section collects the most frequently needed Sinfar page structures in one location.

Blank Sinfar page

__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Page Category</div>
  <h1>Page Title</h1>
  <p>One-sentence page description.</p>
</div>

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

<p>Page content.</p>

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

</div>

[[Category:Appropriate Category]]

Two-column information section

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

  <div class="sf-card">
    <h3>First Subject</h3>
    <p>First subject information.</p>
  </div>

  <div class="sf-card">
    <h3>Second Subject</h3>
    <p>Second subject information.</p>
  </div>

</div>

Three-column resource section

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

  <div class="sf-card">
    <h3>First Resource</h3>
    <p>Description.</p>
    <p class="sf-action-links">[[First Page|Open resource]]</p>
  </div>

  <div class="sf-card">
    <h3>Second Resource</h3>
    <p>Description.</p>
    <p class="sf-action-links">[[Second Page|Open resource]]</p>
  </div>

  <div class="sf-card">
    <h3>Third Resource</h3>
    <p>Description.</p>
    <p class="sf-action-links">[[Third Page|Open resource]]</p>
  </div>

</div>

Status bar

<div class="sf-start-status">
  <div><b>Region</b><br><span>Region name</span></div>
  <div><b>Level</b><br><span>Level range</span></div>
  <div><b>Activity</b><br><span>Activity type</span></div>
  <div><b>Status</b><br><span>Active</span></div>
</div>

Quick reference bar

<div class="sf-quickbar">
  <div><b>Requirement</b><br>Requirement information.</div>
  <div><b>Location</b><br>Location information.</div>
  <div><b>Reward</b><br>Reward information.</div>
  <div><b>Related Guide</b><br>[[Related Page]]</div>
</div>

Information alert

<div class="sf-alert sf-alert-info">
  <b>Information</b>
  <span>Important supporting information.</span>
</div>

Warning alert

<div class="sf-alert sf-alert-warning">
  <b>Warning</b>
  <span>A risk, limitation, or common mistake.</span>
</div>

Danger alert

<div class="sf-alert sf-alert-danger">
  <b>Danger</b>
  <span>High-risk or critical information.</span>
</div>

Neutral note

<div class="sf-note">
  <b>Note:</b> Supporting information.
</div>

Basic comparison table

<table class="sf-table">
<tr>
  <th scope="col">Option</th>
  <th scope="col">Advantages</th>
  <th scope="col">Limitations</th>
</tr>
<tr>
  <td>First option</td>
  <td>Advantages.</td>
  <td>Limitations.</td>
</tr>
<tr>
  <td>Second option</td>
  <td>Advantages.</td>
  <td>Limitations.</td>
</tr>
</table>

Wide scrolling table

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

<table class="sf-table">
<tr>
  <th scope="col">Name</th>
  <th scope="col">Type</th>
  <th scope="col">Level</th>
  <th scope="col">Location</th>
  <th scope="col">Reward</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>

Packed image gallery

<gallery mode="packed" heights="170" caption="Gallery Title">
File:First_Image.jpg|First caption|alt=First image description.
File:Second_Image.jpg|Second caption|alt=Second image description.
File:Third_Image.jpg|Third caption|alt=Third image description.
</gallery>

Collapsible reference block

<div class="mw-collapsible mw-collapsed sf-card">
  <h3>Advanced Information</h3>

  <div class="mw-collapsible-content">
    <p>Advanced or optional information.</p>
  </div>
</div>

Related-page footer

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

Category block

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

21. Complete Examples

These complete page sources demonstrate how the individual components work together. Replace the sample text, links, categories, and filenames with verified information for the actual subject.

Complete area-guide example

__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Area Guide</div>
  <h1>The Western Frontier</h1>
  <p>A rugged region of forest roads, abandoned ruins, and scenic mountain overlooks.</p>
</div>

<div class="sf-start-status">
  <div><b>Region</b><br><span>Western Isles</span></div>
  <div><b>Suggested Level</b><br><span>5–10</span></div>
  <div><b>Area Type</b><br><span>Exploration</span></div>
  <div><b>Primary Access</b><br><span>Central Crossroads</span></div>
</div>

<div class="sf-img-frame">
  [[File:Western_Frontier_Overview.jpg
  |center
  |1000px
  |link=
  |alt=Forest road leading toward distant stone ruins.
  ]]
</div>

<div class="sf-note">
  <b>At a glance:</b> The Western Frontier is suitable for exploration, light adventuring, and scenic travel. Some northern routes contain traps and stronger enemies.
</div>

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

<p>The Western Frontier begins beyond the central crossroads and contains several connected forest and ruin areas. It is frequently used by travelers, explorers, and lower-level adventuring groups.</p>

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

<p>Travel west from the central crossroads and follow the main stone road. The first fork leads toward the forest settlement, while the northern branch continues toward the ruins.</p>

<div class="sf-alert sf-alert-warning">
  <b>Travel warning</b>
  <span>The northern path contains hidden traps and enemies stronger than those found along the main road.</span>
</div>

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

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

  <div class="sf-card">
    <h3>Forest Settlement</h3>
    <p>A small inhabited settlement used by travelers and local merchants.</p>
  </div>

  <div class="sf-card">
    <h3>Ancient Ruins</h3>
    <p>Overgrown stone structures containing hostile encounters and hidden passages.</p>
  </div>

  <div class="sf-card">
    <h3>Western Overlook</h3>
    <p>A scenic clifftop viewpoint overlooking the surrounding islands.</p>
  </div>

</div>

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

<table class="sf-table">
<tr>
  <th scope="col">Location</th>
  <th scope="col">Suggested Level</th>
  <th scope="col">Primary Interest</th>
  <th scope="col">Notes</th>
</tr>
<tr>
  <td>Forest Road</td>
  <td>5–7</td>
  <td>Travel and exploration</td>
  <td>Primary route through the region.</td>
</tr>
<tr>
  <td>Ancient Ruins</td>
  <td>7–10</td>
  <td>Combat and discovery</td>
  <td>Contains traps and stronger enemies.</td>
</tr>
<tr>
  <td>Western Overlook</td>
  <td>Any</td>
  <td>Scenic location</td>
  <td>Reached through the upper forest trail.</td>
</tr>
</table>

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

<gallery mode="packed" heights="170" caption="Western Frontier">
File:Western_Frontier_Road.jpg|Forest road|alt=Stone road passing through dense pine trees.
File:Western_Frontier_Ruins.jpg|Ancient ruins|alt=Overgrown stone ruins surrounded by trees.
File:Western_Frontier_Overlook.jpg|Western overlook|alt=Clifftop view across distant islands.
</gallery>

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

<h2 class="sf-section-title">Change Log</h2>

<ul>
  <li>Created the initial area guide.</li>
  <li>Added access directions, points of interest, reference table, and gallery.</li>
</ul>

</div>

[[Category:Area Guides]]
[[Category:Exploration]]

Complete crafting-system example

__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Crafting System</div>
  <h1>Campfire Cooking</h1>
  <p>Prepare gathered ingredients, improve cooking skill, and produce useful meals.</p>
</div>

<div class="sf-start-status">
  <div><b>Difficulty</b><br><span>Beginner</span></div>
  <div><b>Primary Tool</b><br><span>Campfire cooker</span></div>
  <div><b>Progression</b><br><span>Chef ranks</span></div>
  <div><b>Output</b><br><span>Prepared food</span></div>
</div>

<div class="sf-note">
  <b>System purpose:</b> Campfire cooking allows characters to convert gathered ingredients into meals with varying quality and usefulness.
</div>

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

<ul>
  <li>Locate an available campfire cooker.</li>
  <li>Gather valid cooking ingredients.</li>
  <li>Place the ingredients inside the cooker.</li>
  <li>Use the cooker dialogue to review and begin the batch.</li>
</ul>

<h2 class="sf-section-title">Basic Process</h2>

<div class="sf-progress-line">
  <div><b>1</b><span>Gather</span></div>
  <div><b>2</b><span>Load</span></div>
  <div><b>3</b><span>Review</span></div>
  <div><b>4</b><span>Cook</span></div>
  <div><b>5</b><span>Collect</span></div>
</div>

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

<table class="sf-table">
<tr>
  <th scope="col">Ingredient Type</th>
  <th scope="col">Size</th>
  <th scope="col">Batch Weight</th>
  <th scope="col">Notes</th>
</tr>
<tr>
  <td>Small ingredient</td>
  <td>Small</td>
  <td>1</td>
  <td>Fastest and safest to cook.</td>
</tr>
<tr>
  <td>Medium ingredient</td>
  <td>Medium</td>
  <td>3</td>
  <td>Moderate cooking time and risk.</td>
</tr>
<tr>
  <td>Large ingredient</td>
  <td>Large</td>
  <td>5</td>
  <td>Longer cooking time and greater batch pressure.</td>
</tr>
</table>

<h2 class="sf-section-title">Batch Guidance</h2>

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

  <div class="sf-card">
    <h3>Safe Batch</h3>
    <p>Low total weight and full experience efficiency.</p>
  </div>

  <div class="sf-card">
    <h3>Overloaded Batch</h3>
    <p>Greater production but reduced experience efficiency.</p>
  </div>

  <div class="sf-card">
    <h3>Extreme Batch</h3>
    <p>High risk with little or no progression value.</p>
  </div>

</div>

<div class="sf-alert sf-alert-warning">
  <b>Do not abandon an active batch.</b>
  <span>Finished food may burn if it is left unattended beyond the available grace period.</span>
</div>

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

<table class="sf-table">
<tr>
  <th scope="col">Problem</th>
  <th scope="col">Likely Cause</th>
  <th scope="col">Correction</th>
</tr>
<tr>
  <td>Cooking cannot begin</td>
  <td>No valid ingredients were recognized</td>
  <td>Review the cooker contents and remove unsupported items.</td>
</tr>
<tr>
  <td>Another player cannot use the cooker</td>
  <td>The cooker is currently owned by an active chef</td>
  <td>Wait for the batch to finish or use another cooker.</td>
</tr>
<tr>
  <td>Food burned</td>
  <td>The completed batch was left unattended</td>
  <td>Collect finished food before the grace period expires.</td>
</tr>
</table>

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

</div>

[[Category:Crafting Systems]]
[[Category:Player Guides]]

Complete technical-reference example

<nowiki>__NOTOC__

<div class="sf-page">

<div class="sf-hero sf-hero-compact">
  <div class="sf-eyebrow">Builder Resource</div>
  <h1>Exterior Lighting Switch</h1>
  <p>Transition players between alternate area versions to simulate a lighting or weather change.</p>
</div>

<div class="sf-note">
  <b>Implementation:</b> Neverwinter Nights does not provide a universal runtime command for replacing every exterior area-lighting property. This setup uses alternate versions of the same area.
</div>

<h2 class="sf-section-title">Required Setup</h2>

<table class="sf-table">
<tr>
  <th scope="col">Requirement</th>
  <th scope="col">Example</th>
</tr>
<tr>
  <td>Primary area</td>
  <td>Exterior house at sunset</td>
</tr>
<tr>
  <td>Alternate area</td>
  <td>Exterior house during a storm</td>
</tr>
<tr>
  <td>Control object</td>
  <td>Lever, command panel, or conversation placeable</td>
</tr>
<tr>
  <td>Destination waypoint</td>
  <td>Matching arrival point in the alternate area</td>
</tr>
</table>

<h2 class="sf-section-title">OnUsed Script</h2>

<pre class="sf-codeblock">
void main()
{
    object oUser = GetLastUsedBy();
    object oDestination = GetWaypointByTag("WP_STORM_VERSION");

    if (!GetIsObjectValid(oUser) ||
        !GetIsObjectValid(oDestination))
    {
        return;
    }

    AssignCommand(oUser, JumpToObject(oDestination));
}

Configuration

• Replace WP_STORM_VERSION with the destination waypoint tag.
• Place equivalent transition controls in both area versions.
• Keep walkmesh, placeable positions, and arrival points consistent where possible.
• Copy persistent state between area versions when the design requires it.

 Player-state warning
 Objects, creatures, doors, and local variables do not automatically synchronize between separate area instances.

Troubleshooting

Problem	Correction
Nothing happens when used	Confirm the script is assigned to the placeable’s OnUsed event.
The player arrives at the wrong location	Verify the waypoint tag and placement.
Multiple players must transition together	Loop through eligible party members or nearby players according to the intended design.

Builder Resources · Scripting · Player Housing

</nowiki>

 The unified standard
 New pages should now be created from these documented components and patterns. This reduces future conversion work and keeps additions visually compatible with the wider Sinfar Wiki.

Contribution Guide · Editing Existing Pages · Sinfar Author's Handbook · Sinfar Wiki Image Guide · Wanted Articles

Change Log

• Created the complete Sinfar Wiki page-construction and style reference.
• Documented MediaWiki markup, supported HTML, shared CSS components, images, galleries, tables, icons, colors, typography, layouts, navigation, templates, accessibility, and performance.
• Added publishing checks, troubleshooting guidance, copy-and-paste components, and complete example pages.
• Established the unified construction standard for future Sinfar Wiki articles.