Wiki contribution guide/Advanced

ℹ️ 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.

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.