SgWiki:Guidebook/Editing & Formatting: Difference between revisions

From SgWiki
Jump to navigation Jump to search
← Older edit
Supernutorcrazy (talk | contribs)
37,682 edits
→HTML & CSS: New sgWiki common CSS class code
No edit summary
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{| style="text-align:left;background-color:none;margin:auto;min-width:300px;border-collapse:collapse" cellspacing=0 cellpadding=0 width=95%
{| style='font-family:"Exo 2";width:100%;border-collapse:collapse;white-space:nowrap;'
|- style="text-align:center;"
|style="padding:0 0.5em;border-bottom:1px solid #888;"|[[SgWiki:Guidebook|Introduction]]
!style="border:2px solid darkgray;"|[[SgWiki:Guidebook|Introductions]]
|style="padding:0 0.5em;border:1px solid #888;border-top:3px solid #F00;border-bottom:none;"|[[SgWiki:Guidebook/Editing & Formatting|Editing & Formatting]]
!width=6 style="border-bottom:2px solid darkgray;"|
|style="padding:0 0.5em;border-bottom:1px solid #888;"|[[SgWiki:Guidebook/Links|Links]]
!style="border:2px solid darkgray;border-bottom:none;background-color:#F2F200"|Editing & Formatting
|style="padding:0 0.5em;border-bottom:1px solid #888;"|[[SgWiki:Guidebook/Citation|Citing sources]]
!width=6 style="border-bottom:2px solid darkgray;"|
|style="padding:0 0.5em;border-bottom:1px solid #888;"|[[SgWiki:Guidebook/sgWiki Buses|sgWiki Buses]]
!style="border:2px solid darkgray;"|[[SgWiki:Guidebook/Links|Links]]
|style="padding:0 0.5em;border-bottom:1px solid #888;"|[[SgWiki:Guidebook/Ban|Ban & Warning Points]]
!width=6 style="border-bottom:2px solid darkgray;"|
|style="width:100%;border-bottom:1px solid #888;"|
!style="border:2px solid darkgray;"|[[SgWiki:Guidebook/Citation|Citing sources]]
|}
!width=6 style="border-bottom:2px solid darkgray;"|
!style="border:2px solid darkgray;"|[[SgWiki:Guidebook/sgWiki Buses|sgWiki Buses]]
!width=6 style="border-bottom:2px solid darkgray;"|
!style="border:2px solid darkgray;"|[[SgWiki:Guidebook/sgWiki Trains|sgWiki Trains]]
!width=6 style="border-bottom:2px solid darkgray;"|
!style="border:2px solid darkgray;"|[[SgWiki:Guidebook/Ban|Ban & Warning Points]]
|-
|style="border:2px solid darkgray;border-top:none;padding:5px;" colspan=20|Editing and Formatting of sgWiki articles are much more simpler than html codes. To simply edit an article, just click 'Edit' button/tab on the Top Left-hand button. If the article is not yet created, press 'Create'.


===Basic Formatting===
<div style='font-family:"Exo 2" !important;'>
To apply basic formatting to text - such as '''bold''' and ''italic'', you just need to add "<nowiki>'</nowiki>" before and after the text. Do note that the amount of "<nowiki>'</nowiki>" before the text must match the amount of "<nowiki>'</nowiki>" after the text.
Contributors must follow SGWiki formatting standards. Proper editing ensures consistency, accuracy, and readability.
 
==Text Formatting==
===Bold===
Use three apostrophes before and after the text.


====Example 1====
To bold the word "sgWiki" in the following sentence: "Welcome to sgWiki", all you need is to type in the following code.<br>
{{dottedbox|@=Code|#=<nowiki>Welcome to '''sgWiki'''</nowiki>}}
{{dottedbox|@=Code|#=<nowiki>Welcome to '''sgWiki'''</nowiki>}}
{{dottedbox|@=Result|#=Welcome to '''sgWiki'''}}
{{dottedbox|@=Result|#=Welcome to '''sgWiki'''}}


====Example 2====
===Italic===
To italic the word "sgWiki" in the following sentence: "Welcome to sgWiki", all you need is to type in the following code.<br>
Use two apostrophes before and after the text.
 
{{dottedbox|@=Code|#=<nowiki>Welcome to ''sgWiki''</nowiki>}}
{{dottedbox|@=Code|#=<nowiki>Welcome to ''sgWiki''</nowiki>}}
{{dottedbox|@=Result|#=Welcome to ''sgWiki''}}
{{dottedbox|@=Result|#=Welcome to ''sgWiki''}}


===Headers===
===Underline===
Headers are meant to create sections of an articles. This help to keep the articles neater and finding information without an article faster. To put it in simper terms, treat 'Headers' as your textbook/stories books chapters. Just like your textbook chapters which have sub-chapters, there will be sub-headers.
Use <nowiki><u></nowiki> and <nowiki></u></nowiki> tags.
 
To create a header, simply add "<nowiki>=</nowiki>" before and after the text. Do note that the amount of "<nowiki>=</nowiki>" before the text must match the amount of "<nowiki>=</nowiki>" after the text.


To create a sub-header, simply add an additional "<nowiki>=</nowiki>" before and after the text. Do note that the amount of "<nowiki>=</nowiki>" before the text must match the amount of "<nowiki>=</nowiki>" after the text.
{{dottedbox|@=Code|#=<nowiki>Welcome to <u>sgWiki</u></nowiki>}}
{{dottedbox|@=Result|#=Welcome to <u>sgWiki</u>}}


Do take note that the number of "<nowiki>=</nowiki>" refers to the type of headers. 1 "<nowiki>=</nowiki>" represents Header 1 which is the biggest header while 6 "<nowiki>=</nowiki>"s represents Header 6 which is the smallest header.
===Strikethrough===
Use <nowiki><s></nowiki> and <nowiki></s></nowiki> tags.


====Example 3====
{{dottedbox|@=Code|#=<nowiki>Welcome to <s>sgWiki</s></nowiki>}}
To create a header with the text "Hi" and a sub-header with the text "Welcome", all you need is to type in the following code.<br>
{{dottedbox|@=Result|#=Welcome to <s>sgWiki</s>}}
{{dottedbox|@=Code|#=<nowiki>===Hi===</nowiki><br><nowiki>====Welcome====</nowiki>}}


===Tables===
==Headers==
Tables are meant to display information in rows and columns like an excel spreadsheet. It is greatly useful for data as this will present a neater presentation and a glance of a single data can pinpoint to two different information.
Headers divide articles into sections and subsections. They keep pages structured and easy to navigate.
* Use the equals sign (<nowiki>=</nowiki>) before and after text.
* The number of equals signs must match on both sides.
* More equals signs = smaller header level (1–6).
* Level 1 is the largest; Level 6 is the smallest.


To create a table, simply add "<nowiki>{|</nowiki>" to the start of the table and "<nowiki>|}</nowiki>" to the end of the table.
To create a header "Deployments" and a sub-header "SBS Transit":


A table could consists of rows (horizontal bar) or columns (vertical bar).
{{dottedbox|@=Code|#=<nowiki>==Deployments==</nowiki><br><nowiki>===SBS Transit===</nowiki>}}


To add a row, just add "<nowiki>|-</nowiki> before the table row on a new line.
==Tables==
Tables are used to present structured information such as specifications, deployments, and service lists. They ensure data is displayed neatly in rows and columns.
* Start with <nowiki>{|</nowiki> and end with <nowiki>|}</nowiki>.
* Add a new row with <nowiki>|-</nowiki>.
* Header cells → <nowiki>!</nowiki>
* Data cells → <nowiki>|</nowiki>
* Use class="wikitable" for standard styling.
* Apply mw-collapsible for large datasets.


There are 2 types of columns, or table cells. 1 is called header cells, 1 is data cells. Header cells is a data cells, but typically, header cells came in bold.
To create a table with two columns and one data row:


To add a header cell(s), just add "<nowiki>!</nowiki>" before the cell on a new line.
{{dottedbox|@=Code|#=<nowiki>{| class="wikitable"</nowiki><br><nowiki>!Column 1</nowiki><br><nowiki>!Column 2</nowiki><br><nowiki>|-</nowiki><br><nowiki>|Data A</nowiki><br><nowiki>|Data B</nowiki><br><nowiki>|}</nowiki>}}
 
</div>
To add a data cell(s), just add "<nowiki>|</nowiki>" before the cell on a new line.
 
To style a cell(s), you may use CSS inline-styling. For more information on the available CSS inline-styling, you may wish to read [http://www.w3schools.com/cssref/pr_tab_table-layout.asp W3Schools].
 
It is a common practice to use a collapsed table then non-collapsed table for neat view.
 
====Example 4====
To create a collapsed table with 2 rows and 2 columns, the first row is a header row and styled with red background. All you need is to type in the following code.<br>
{{dottedbox|@=Code|#=<nowiki>{| style="border-collapse:collapse"</nowiki><br><nowiki>|- style="background-color:#FF000;"</nowiki><br><nowiki>!Column 1</nowiki><br><nowiki>!Column 2</nowiki><br><nowiki>|-</nowiki><br><nowiki>|Column 1</nowiki><br><nowiki>|Column 2</nowiki><br><nowiki>|}</nowiki>}}
 
===HTML & CSS===
sgWiki also allows HTML and CSS codes. sgWiki could utilise the more powerful HTML5 and CSS3 codes provided that your internet browser supported it. However, please limit the usage of certain commands as it may not be compatible to older PCs which some users may use. For more information about HTML5 and CSS3, you may wish to read [http://www.w3schools.com/ W3Schools].
 
For common background colours and font colours used regularly in sgWiki, we had added in new HTML elements classes with specified codes. The following are some of the example:
*Operators
**class="LTA" - Background - #004250, Text - #FFFFFF
**class="SBST" - Background - #5D1E79, Text - #FFFFFF
**class="SMRT" - Background - #E3031E, Text - #FFFFFF
**class="TTS" - Background - #009548, Text - #FFFFFF
**class="GAS" - Background - #FFCC33, Text - #FD1E23
*MRT Colours
**class="NSL"
**class="EWL"
**class="NEL"
**class="CCL"
**class="DTL"
**class="TEL"
**class="BPLRT"
**class="SKLRT"
**class="PGLRT"
|}

Latest revision as of 00:18, 8 July 2026

Introduction Editing & Formatting Links Citing sources sgWiki Buses Ban & Warning Points

Contributors must follow SGWiki formatting standards. Proper editing ensures consistency, accuracy, and readability.

Text Formatting

Bold

Use three apostrophes before and after the text.

Code

Welcome to '''sgWiki'''

Result

Welcome to sgWiki

Italic

Use two apostrophes before and after the text.

Code

Welcome to ''sgWiki''

Result

Welcome to sgWiki

Underline

Use <u> and </u> tags.

Code

Welcome to <u>sgWiki</u>

Result

Welcome to sgWiki

Strikethrough

Use <s> and </s> tags.

Code

Welcome to <s>sgWiki</s>

Result

Welcome to sgWiki

Headers

Headers divide articles into sections and subsections. They keep pages structured and easy to navigate.

  • Use the equals sign (=) before and after text.
  • The number of equals signs must match on both sides.
  • More equals signs = smaller header level (1–6).
  • Level 1 is the largest; Level 6 is the smallest.

To create a header "Deployments" and a sub-header "SBS Transit":

Code

==Deployments==
===SBS Transit===

Tables

Tables are used to present structured information such as specifications, deployments, and service lists. They ensure data is displayed neatly in rows and columns.

  • Start with {| and end with |}.
  • Add a new row with |-.
  • Header cells → !
  • Data cells → |
  • Use class="wikitable" for standard styling.
  • Apply mw-collapsible for large datasets.

To create a table with two columns and one data row:

Code

{| class="wikitable"
!Column 1
!Column 2
|-
|Data A
|Data B
|}
Retrieved from "https://sgwiki.com/index.php?title=SgWiki:Guidebook/Editing_%26_Formatting&oldid=735931"