User:Ayjayaredii/Wiki Help
This page serves as a comprehensive guide for wiki editors to understand and effectively use various editing syntax and CSS styling within the Starship Simulator wiki. This knowledge is crucial for creating well-formatted, visually appealing, and dynamic pages.
Introduction
This wiki uses MediaWiki's own simplified markup, but also incorporates standard HTML tags and inline CSS for more advanced formatting and layout control. Additionally, MediaWiki provides its own unique tags and parser functions that are essential for template creation and specialized content display.
Understanding these tools will allow you to:
- Format text and elements precisely.
- Create custom layouts and boxes.
- Develop robust and flexible templates.
- Display code examples without unintended rendering.
This guide is divided into the following sections:
- Editing Syntax: Covers both standard HTML elements and MediaWiki-specific tags/functions for content structure and processing.
- Styling with CSS: Explains how to apply visual properties to elements using CSS.
Editing Syntax
This section covers the core syntax used for structuring content on this wiki, including common HTML tags and MediaWiki's specialized tags and parser functions.
<code> - Code Snippet
Purpose: Used to display short fragments of computer code or literal input/output, typically rendered in a monospaced font. It helps to differentiate code from regular text.
Syntax: <code>Value</code>
Examples:
| Code | Result |
|---|---|
| Press <code>F</code> to interact! | Press F to interact!
|
| To teleport ship type <code>/shiptp</code> into the chat box in game | To teleport ship type /shiptp into the chat box in game
|
<div> - Division
Purpose: A generic container tag used to group block-level content. It does not have any inherent visual formatting beyond creating a new line, but it is extremely useful for applying CSS styles to a block of content or for creating complex layouts).
Syntax: <div>Content</div>
Example:
Code
<div style="background-color: #F8F8F8; padding: 10px; border-radius: 5px;">This content is within a custom div box.</div>
Result
<span> - Span
Purpose: A generic inline container tag used to group small fragments of text or other inline elements. Like `<div>`, it has no inherent visual formatting but is useful for applying CSS styles to a specific piece of text *without* starting a new line.
Syntax: <span>Text</span>
Example:
| Code | Result |
|---|---|
| This is <span style="color: red; font-weight: bold;">urgent</span>! | This is urgent! |
| When the valve is open you will see a <span style="color: green; font-style: italic;">Green</span> light on the display. | When the valve is open you will see a Green light on the display. |
<nowiki> - No Wiki Markup
Purpose: Prevents MediaWiki from parsing any wiki markup (like `links`, `Template:Templates`, `bold`) within its tags. The content is displayed exactly as typed. Essential for showing code examples of wiki markup.
Syntax: <nowiki>Content with {{markup}}</nowiki>
Example:
| Code | Result |
|---|---|
| Use <nowiki>[[Magellan Class]] to link to the ship.</nowiki> | Use [[Magellan Class]] to link to the ship. |
| <nowiki>This is a <span style="color: red; font-weight: bold;">example</span>of a '''tag'' being ''ignored!''</nowiki> | This is a <span style="color: red; font-weight: bold;">example</span>of a '''tag'' being ''ignored!'' |
<includeonly> & <noinclude> - Transclusion
Purpose: Sets the condition on a template page that will either be displayed or not when viewing the template when transclusion to a page itself directly using the {{{template:page}}} function.
<includeonly> Only Include
Purpose:
Content wrapped in <includeonly> tags on a template page will only be processed and displayed when that template is transcluded (used) on another page. It will not be visible when viewing the template page itself directly.
Syntax: <includeonly>Content for transclusion only</includeonly>
<noinclude> No Include
Purpose:
Content wrapped in <noinclude> tags on a template page will only be processed and displayed when viewing the template page itself directly. It will not be included or displayed when the template is transcluded onto another page.
Syntax: <noinclude>Documentation and categories for the template.</noinclude>
Common Text & Formatting Tags
These HTML tags are used for basic text formatting and structural elements. While MediaWiki has its own simplified markup for bold, italic, and horizontal rules, these HTML tags offer alternatives and are useful when you need to embed styling directly within more complex HTML structures.
| Tag | Purpose | Syntax | Example Code | Result |
|---|---|---|---|---|
| <b> / <strong> | Bolds text, or indicates strong importance. | <b>Bold Text</b> or <strong>Strong Text</strong> | The reactor is <b>ONLINE</b>. | The reactor is ONLINE. |
| <i> / <em> | Italicizes text, or indicates emphasis. | <i>Text</i> or <em>Emphasized Text</em> | This is an <i>important</i> detail. | This is an important detail. |
| <u> | Underlines text. (Note: Underlining is often discouraged for web text as it can be confused with hyperlinks). | <u>Text</u> | <u>Warning: Unstable Plasma!</u> | Warning: Unstable Plasma! |
| <br> | Creates a single line break. | <br> or <br /> | Section One<br />Section Two | Section One Section Two |
| <hr> | Creates a thematic break or horizontal line. | <hr> or <hr /> | Section One<hr />Section Two | Section One Section Two |
| <sup> | Displays text slightly above the normal line (superscript). | Text<sup>Superscript</sup> | Mass: 1.04 x Sol<sup>2</sup> | Mass: 1.04 x Sol2 |
| <sub> | Displays text slightly below the normal line (subscript). | Text<sub>Subscript</sub> | Coolant: H<sub>2</sub>O | Coolant: H2O |
| <ul> | Defines an unordered (bulleted) list. | Used for grouping related items where order doesn't matter. | <ul><li>Item 1</li><li>Item 2</li></ul> |
|
| <ol> | Defines an ordered (numbered) list. | Used for grouping related items where the order or sequence is important. | <ol><li>Step 1</li><li>Step 2</li></ol> |
|
| <<li> | Defines an item within a list. | Must be used inside an <ul> or <ol> tag. | <li>List item content</li> |
|
Styling with CSS
CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements, such as colors, fonts, spacing, and layout. In MediaWiki, CSS is most commonly applied using the `style` attribute directly within an HTML tag (inline styles).
General Syntax
Inline Style Attribute: The `style` attribute is placed inside the opening tag of an HTML element (e.g., <div style="color: blue;">Content</div>).
Properties and values are separated by a colon (`:`), and multiple property-value pairs are separated by a semi-colon (`;`).
<div style="background-color: #ABCDEF; border: 2px solid black; padding: 10px; width: 50%; border-radius: 15px; margin: 0 auto; text-align: center;">This is a box with multiple styles applied.</div>
px(pixels): An absolute unit, good for fixed sizes (e.g., `100px`).%(percentage): Relative to the parent element's size (e.g., `50%` of parent's width).em: Relative to the font size of the element (e.g., `1em` is current font size; `2em` is twice). This is good for scaling.rem: Relative to the font size of the root HTML element.auto: Browser automatically calculates values (e.g., used for `margin` to center block elements).
Common Text Styles
These properties control the appearance of text within an element.
| Property | Purpose | Example Code | Result |
|---|---|---|---|
| `color` | Sets the text color. | style="color: red;"
|
Red Text |
| `font-size` | Sets the size of the text. | style="font-size: 1.2em;"
|
Larger Text |
| `text-align` | Aligns inline content (text, images) horizontally within an element. | style="text-align: center;"
|
Centered Text
|
| `font-weight` | Sets the boldness of the text. Common values are `bold` or numerical values like `700`. | style="font-weight: bold;"
|
Bold Text |
Common Box/Layout Styles
These properties control the appearance and positioning of block-level elements like `div`s.
| Property | Purpose | Example Code | Result |
|---|---|---|---|
| `background-color` | Sets the background color of the element. Can use color names (`blue`), hex codes (`#ABCDEF`), or RGB (`rgb(255,0,0)`). | style="background-color: #ABCDEF;"
|
Colored Background
|
| `border` | Sets all properties of an element's border (width, style, color) in one go. | style="border: 2px solid black;"
|
Bordered Box
|
| `border-radius` | Rounds the corners of an element's border. | style="border-radius: 15px;"
|
Rounded Corners
|
| `padding` | Creates space *inside* an element, between its content and its border. | style="padding: 10px;"
|
Padded Content
|
| `width` | Sets the width of an element. | style="width: 50%;"
|
Half-width Box
|
| `margin` | Creates space *outside* an element, between its border and other elements. Used with `auto` to center a block element with a defined width. | style="margin: 0 auto;"
|
Centered Box
|
| `float` | Positions an element to the left or right, allowing other content to wrap around it. | style="float: left;"
|
Floated Left This text wraps.
|
| `clear` | Forces an element to move below (clear) any preceding floated elements. | style="clear: both;"
|
Floated Left Cleared Below
|
| `display` | Specifies how an element is displayed (e.g., `block`, `inline`, `flex`). `flex` is powerful for complex layouts. | style="display: flex;"
|
Item 1Item 2
|
| `box-sizing` | Defines how an element's total width and height are calculated (whether padding and border are included in the specified `width`/`height`). `border-box` is often preferred for layout. | style="box-sizing: border-box;"
|
Box content. (This box is 100px wide, including padding/border)
|