Wiki contribution guide/Advanced: Difference between revisions

From RetroMC
Jump to navigation Jump to search
(Added tables section)
(Added another table example)
Line 2: Line 2:
{{notice|This guide is still a work-in-progress, and there may be errors.<br>You're more than welcome to fix any grammatical errors, formatting mistakes and whatnot.}}
{{notice|This guide is still a work-in-progress, and there may be errors.<br>You're more than welcome to fix any grammatical errors, formatting mistakes and whatnot.}}
It's recommended that you familiarise yourself with the [[wiki contribution guide]] before you read this subesection.<br>
It's recommended that you familiarise yourself with the [[wiki contribution guide]] before you read this subesection.<br>
This page documents various tools that can be used to improve and decorate articles on this very wiki and other sites using MediaWiki.
This page documents various tools that can be used to improve and decorate articles on this very wiki and other sites using MediaWiki, via the use of examples.


== HTML and CSS ==
== HTML and CSS ==
Line 49: Line 49:


== Tables ==
== Tables ==
See [https://www.mediawiki.org/wiki/Help:Tables Help:Tables] on MediaWiki for more info.
You can use wiki markup alongside HTML and CSS in tables, as seen in the following examples.
=== Item rarity list ===
=== Item rarity list ===
  <nowiki>{| class="wikitable" style="margin:auto"
  <nowiki>{| class="wikitable" style="margin:auto"
Line 65: Line 67:
  * Music discs
  * Music discs
  |}</nowiki>
  |}</nowiki>
The <code>wikitable</code> [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class class] sets the theme/appearance for the table.<br>
The <code>margin</code> property is set to <code>auto</code>, so that the table is centered.<br>
Table markup is roughly as follows:
* <code>{|</code> - Table start
* <code>!</code> - Header cell
* <code>|+</code> - Table caption
* <code>|-</code> - Table row
* <code>|</code> - Data cell
* <code>|}</code> - Table end


{| class="wikitable" style="margin:auto"
{| class="wikitable" style="margin:auto"
Line 80: Line 92:
* Diamonds
* Diamonds
* Music discs
* Music discs
|}
=== MobArena ===
From [[MobArena#Classes]]:
<nowiki>{| class="wikitable" style="margin:auto"
|+ Damage
! Attribute !! Mercenary !! Warrior !! Archer
|-
! Armor
|colspan="2"|
* Iron Chestplate
* Iron Leggings
* Iron Boots
|
* Leather Cap
* Leather Tunic
* Leather Pants
* Leather Boots
|-
! Weaponry
|
* Iron Sword
* Bow + 256 Arrows (4 stacks)
| Diamond Sword
|
* Golden Sword
* Bow and 832 Arrows (13 stacks)
|-
! Food
| 4 Mushroom Stews
|colspan="2"|3 Mushroom Stews
|}</nowiki>
The <code>colspan</code> and <code>rowspan</code> parameters change how a single cell spans across the table (a <code>colspan</code> of <code>2</code> would make the cell occupy 2 columns).<br>
Header cells can also be applied vertically, and obviously, the list markup works here.
{| class="wikitable" style="margin:auto"
|+ Damage
! Attribute !! Mercenary !! Warrior !! Archer
|-
! Armor
|colspan="2"|
* Iron Chestplate
* Iron Leggings
* Iron Boots
|
* Leather Cap
* Leather Tunic
* Leather Pants
* Leather Boots
|-
! Weaponry
|
* Iron Sword
* Bow + 256 Arrows (4 stacks)
| Diamond Sword
|
* Golden Sword
* Bow and 832 Arrows (13 stacks)
|-
! Food
| 4 Mushroom Stews
|colspan="2"|3 Mushroom Stews
|}
|}

Revision as of 00:41, 21 August 2024

ℹ️ Notice: This guide is still a work-in-progress, and there may be errors.
You're more than welcome to fix any grammatical errors, formatting mistakes and whatnot.

It's recommended that you familiarise yourself with the wiki contribution guide before you read this subesection.
This page documents various tools that can be used to improve and decorate articles on this very wiki and other sites using MediaWiki, via the use of examples.

HTML and CSS

<span style="">text</span> (inline/single-line) and <div style="">text</div> (block/multiline) is the primary method for advanced styling; for an in-depth look, see Manual:CSS on MediaWiki.

Large center title

As a potentially nonsensical example, suppose you want to make a large title for a fictional anime adaptation of RetroMC airing on OVH TV and MediaWiki. From the source of the fer page:

<div width=100% style="font-size: 45px;text-align: center;"><span style="color:#55FF55;">'''Retro'''<span style="color:#55FFFF;">'''MC'''</span></span>: The Legacy Community Adventures</div>
 <div width=100% style="font-size: 20px;text-align: center;">''Airing 24/7, on OVH® TV and streaming on MediaWiki®''</div>

In the first <div>, the width is set to 100% to make the text properly centered.
The text encased in triple-apostrophes are bolded.
The rest of the parameters should be self-explanatory; here's the result:

RetroMC: The Legacy Community Adventures
Airing 24/7, on OVH® TV and streaming on MediaWiki®

Now to get some animators, composers and we'll have the best anime—

And we went over budget.. nevermind.

Bordered title box

Suppose one of the U.I.P's members contacted you to spread the word of the UIP Warehouse via a rectangular box, like an advert.

<div style="border: solid #737680; border-width: 10px 0px 10px 0px; background-color: #DCDCDC; margin: 10px 0; padding: 10px; border-radius: 10px;">
 [[File:Warehouselargeview.png|100px|right]]
 Need a consistent supply of materials?<br>
 <span style="font-size: 1.2em; text-align: left;"><b>The [[UIP Warehouse]] has you covered!</b></span>
 </div>

The <div> container has:

  • a border width of 10px at the top, 0px at the left, 10px at the bottom and 0px at the right, in that order.
  • a 10px margin and padding to move it away from the page borders.
  • a 10px border radius to make the corners rounded.
  • the warehouse image size set to 100px and aligned to the right side of the page.

Need a consistent supply of materials?
The UIP Warehouse has you covered!

Now that's a sleek advert, though the other one may be more effective.

Please note that the image may or may not be aligned properly depending on the device/screen you're viewing on.

Tables

See Help:Tables on MediaWiki for more info. You can use wiki markup alongside HTML and CSS in tables, as seen in the following examples.

Item rarity list

{| class="wikitable" style="margin:auto"
 |+ Some items and blocks 
 ! Common !! Uncommon !! Rare
 |-
 |
 * (Cobble)stone
 * Wood logs/planks
 * Dirt, sand, gravel
 |
 * Iron, clay
 * Obsidian
 |
 * Diamonds
 * Music discs
 |}

The wikitable class sets the theme/appearance for the table.
The margin property is set to auto, so that the table is centered.
Table markup is roughly as follows:

  • {| - Table start
  • ! - Header cell
  • |+ - Table caption
  • |- - Table row
  • | - Data cell
  • |} - Table end
Some items and blocks
Common Uncommon Rare
  • (Cobble)stone
  • Wood logs/planks
  • Dirt, sand, gravel
  • Iron, clay
  • Obsidian
  • Diamonds
  • Music discs

MobArena

From MobArena#Classes:

{| class="wikitable" style="margin:auto"
 |+ Damage
 ! Attribute !! Mercenary !! Warrior !! Archer
 |-
 ! Armor
 |colspan="2"|
 * Iron Chestplate
 * Iron Leggings
 * Iron Boots
 |
 * Leather Cap
 * Leather Tunic
 * Leather Pants
 * Leather Boots
 |-
 ! Weaponry
 |
 * Iron Sword
 * Bow + 256 Arrows (4 stacks)
 | Diamond Sword
 |
 * Golden Sword
 * Bow and 832 Arrows (13 stacks)
 |-
 ! Food
 | 4 Mushroom Stews
 |colspan="2"|3 Mushroom Stews
 |}

The colspan and rowspan parameters change how a single cell spans across the table (a colspan of 2 would make the cell occupy 2 columns).
Header cells can also be applied vertically, and obviously, the list markup works here.

Damage
Attribute Mercenary Warrior Archer
Armor
  • Iron Chestplate
  • Iron Leggings
  • Iron Boots
  • Leather Cap
  • Leather Tunic
  • Leather Pants
  • Leather Boots
Weaponry
  • Iron Sword
  • Bow + 256 Arrows (4 stacks)
Diamond Sword
  • Golden Sword
  • Bow and 832 Arrows (13 stacks)
Food 4 Mushroom Stews 3 Mushroom Stews