Wiki contribution guide/Advanced: Difference between revisions
Noggisoggi (talk | contribs) m (→Bordered title box: Spelling correction. Editing on mobile is a crappy experience :() |
Noggisoggi (talk | contribs) (Finished the 2nd example and added "page is W.I.P" notice) |
||
| Line 1: | Line 1: | ||
{{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. | ||
| Line 10: | Line 11: | ||
<div width=100% style="font-size: 20px;text-align: center;">''Airing 24/7, on OVH® TV and streaming on MediaWiki®''</div></nowiki> | <div width=100% style="font-size: 20px;text-align: center;">''Airing 24/7, on OVH® TV and streaming on MediaWiki®''</div></nowiki> | ||
In the first div, the width is set to 100% to make the text properly centered.<br> | In the first <code><nowiki><div></nowiki></code>, the width is set to 100% to make the text properly centered.<br> | ||
The text encased in triple-apostrophes are '''bolded'''.<br> | The text encased in triple-apostrophes are '''bolded'''.<br> | ||
The rest of the parameters should be self-explanatory; here's the result: | The rest of the parameters should be self-explanatory; here's the result: | ||
<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: 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> | |||
Now to get some animators, composers and we'll have the best anime— | Now to get some animators, composers and we'll have the best anime— | ||
| Line 22: | Line 23: | ||
=== Bordered title box === | === Bordered title box === | ||
Suppose one | 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. | ||
<nowiki><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></nowiki> | |||
The <code><nowiki><div></nowiki></code> container has: | |||
* a [https://developer.mozilla.org/en-US/docs/Web/CSS/border-width 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 [https://developer.mozilla.org/en-US/docs/Web/CSS/margin margin] and [https://developer.mozilla.org/en-US/docs/Web/CSS/padding padding] to move it away from the page borders. | |||
* a 10px [https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius border radius] to make the corners rounded. | |||
* the warehouse image size set to 100px and aligned to the right side of the page. | |||
<div style="border: solid #737680; border-width: 10px 0px 10px 0px; background-color: #DCDCDC; margin: 10px 0; padding: 10px; border-radius: 10px;"> | <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]] | |||
[[File:Warehouselargeview.png| | |||
Need a consistent supply of materials?<br> | Need a consistent supply of materials?<br> | ||
<b>The [[UIP Warehouse]] has you covered!</ | <span style="font-size: 1.2em; text-align: left;"><b>The [[UIP Warehouse]] has you covered!</b></span> | ||
</div> | </div> | ||
Now that's a sleek advert, though [[:File:UIP-Warehouse-Advertisement.png|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. | |||
Revision as of 14:18, 20 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.
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:
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.