MediaWiki skin

VisualWikitext
No edit summary
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This page documents and demonstrates the [[mw:Skin:WMAU|WMAU skin]] for MediaWiki. This skin is being developed in 2021 to help make Wikimedia Australia's website more focused on ''readers'' than editors, and to make it easier to find out who we are and what we do.
This page documents and demonstrates the [[mw:Skin:WMAU|WMAU skin]] for MediaWiki. This skin was developed in 2021 to help make Wikimedia Australia's website more focused on ''readers'' than editors, and to make it easier to find out who we are and what we do.


* Demonstration: {{fullurl:{{PAGENAME}}|useskin=wmau}}
* Demonstration: {{fullurl:{{PAGENAME}}|useskin=wmau}}
* Homepage: https://www.mediawiki.org/wiki/Skin:WMAU
* Homepage: https://www.mediawiki.org/wiki/Skin:WMAU
* Source code: https://github.com/Wikimedia-AU/MediaWiki-skin
* Source code: https://gerrit.wikimedia.org/r/a/mediawiki/skins/WMAU.git
* Issues list: https://github.com/Wikimedia-AU/MediaWiki-skin/issues
* Issues list: https://phabricator.wikimedia.org/tag/wmau
* Documentation:


The rest of this page demonstrates various features of the skin. If you don't have the skin enabled, you can preview this page using the skin, by appending {{code|1=?useskin=wmau}} to the URL.
The rest of this page demonstrates various features of the skin. If you don't have the skin enabled, you can preview this page using the skin, by appending {{code|1=?useskin=wmau}} to the URL (link above).


== Typography ==
== Typography ==
Line 24: Line 23:
# look
# look
# like this.
# like this.
Block quotations:
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut tincidunt massa. Donec nec nibh in nisi porta posuere. Vestibulum feugiat tellus dignissim, placerat augue sit amet, bibendum leo.
</blockquote>
Poetry:
<poem>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
    Phasellus ut tincidunt massa.
Donec nec nibh in nisi porta posuere.
    Vestibulum feugiat tellus dignissim, placerat
augue sit amet, bibendum leo.
</poem>
== Menus ==
Menus are configured in [[mediawiki:wmau-config.json]]. For more information, see [[wm:Skin:WMAU#Configuration]].


== Images ==
== Images ==


[[File:Australian cart.jpg|thumb|right|Right-floated thumbs look like this.]]
[[File:Australian cart.jpg|thumb|right|Right-floated thumbs look like this, with a long caption that goes lorem ipsum lorem ipsum for a while.]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id.[[File:AndrewMercerIMG 5585 Australian Water Dragon.jpg|left|thumb|Left-floated thumbs look like this.]] Sed non dignissim orci. Vivamus diam enim, commodo id consectetur ut, gravida quis erat. Vivamus molestie lobortis mattis. Quisque pretium, enim in tincidunt posuere, ligula odio vestibulum dolor, in tristique quam nulla eget nulla. Nam id dolor ac ligula aliquet varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id.[[File:AndrewMercerIMG 5585 Australian Water Dragon.jpg|left|thumb|Left-floated thumbs look like this.]] Sed non dignissim orci. Vivamus diam enim, commodo id consectetur ut, gravida quis erat. Vivamus molestie lobortis mattis. Quisque pretium, enim in tincidunt posuere, ligula odio vestibulum dolor, in tristique quam nulla eget nulla. Nam id dolor ac ligula aliquet varius. Vivamus diam enim, commodo id consectetur ut, gravida quis erat. Vivamus molestie lobortis mattis. Quisque pretium, enim in tincidunt posuere, ligula odio vestibulum dolor, in tristique quam nulla eget nulla. Nam id dolor ac ligula aliquet varius. Vivamus diam enim, commodo id consectetur ut, gravida quis erat. Vivamus molestie lobortis mattis. Quisque pretium, enim in tincidunt posuere, ligula odio vestibulum dolor, in tristique quam nulla eget nulla. Nam id dolor ac ligula aliquet varius.


[[File:Island Archway, Great Ocean Rd, Victoria, Australia - Nov 08.jpg|center|thumb|And a centered thumb is all on its own.]]
[[File:Island Archway, Great Ocean Rd, Victoria, Australia - Nov 08.jpg|center|thumb|And a centered thumb is all on its own.]]
[[File:Echidnawyanbene.jpg|thumb|This is a thumb with no alignment specified.]]


=== Banners ===
=== Banners ===


Pages can have banner images, similar to those on Wikivoyage.
Pages can have banner images, similar to those on Wikivoyage. For example, the banner at the top of this page is produced by adding the following wikitext:
{{PAGEBANNER:Hackathon Banner above Hacking Area.jpg}}
<pre><nowiki>
{{PAGEBANNER:Hackathon Banner above Hacking Area.jpg}}
</nowiki></pre>
 
See [[mw:Extension:WikidataPageBanner#Usage]] for full details.
 
=== Cards ===
See [[mw:Extension:LinkCards]] for more information and usage instructions.
 
{{#linkcards:
|link1  = Card link destination
|title1 = This is the card title
|image1 = Beech Forest (AU), Great Otway National Park -- 2019 -- 1294.jpg
|body1  = Card body text can be anything.
 
|link2 = Lorem ipsum
|body2 = This card has no title.
|image2 = Pemberton Forest, Pemberton,Western Australia.JPG
}}
 
== Rows and columns ==
 
Column widths are ratios.
 
<div class="row">
<div class="col-1" style="background-color:lightblue">This is <code>.col-1</code></div>
<div class="col-2" style="background-color:lightpink">This is <code>.col-2</code></div>
</div>
<div class="row">
<div class="col-3" style="background-color:lightgreen">This is <code>.col-3</code></div>
<div class="col-1" style="background-color:lightcyan">This is <code>.col-1</code></div>
</div>


{{PAGEBANNER:Wikimedia Hackathon 2019 Hacking Space.jpg}}
<syntaxhighlight lang="html">
<div class="row">
<div class="col-1" style="background-color:lightblue">This is <code>.col-1</code></div>
<div class="col-2" style="background-color:lightpink">This is <code>.col-2</code></div>
</div>
<div class="row">
<div class="col-3" style="background-color:lightgreen">This is <code>.col-3</code></div>
<div class="col-1" style="background-color:lightcyan">This is <code>.col-1</code></div>
</div>
</syntaxhighlight>


== Tables ==
== Tables ==

Latest revision as of 05:36, 5 January 2024

This page documents and demonstrates the WMAU skin for MediaWiki. This skin was developed in 2021 to help make Wikimedia Australia's website more focused on readers than editors, and to make it easier to find out who we are and what we do.

The rest of this page demonstrates various features of the skin. If you don't have the skin enabled, you can preview this page using the skin, by appending ?useskin=wmau to the URL (link above).

Typography

The usual bold and italics are handled, as well as inline code.

Links are in three colours: blue for internal links that exist, red for non-existing pages, and green for external links.

  • Unordered
  • lists
  • look like this,

and

  1. ordered ones
  2. look
  3. like this.

Block quotations:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut tincidunt massa. Donec nec nibh in nisi porta posuere. Vestibulum feugiat tellus dignissim, placerat augue sit amet, bibendum leo.

Poetry:

Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
    Phasellus ut tincidunt massa.
Donec nec nibh in nisi porta posuere.
    Vestibulum feugiat tellus dignissim, placerat
augue sit amet, bibendum leo.

Menus

Menus are configured in mediawiki:wmau-config.json. For more information, see wm:Skin:WMAU#Configuration.

Images

Right-floated thumbs look like this, with a long caption that goes lorem ipsum lorem ipsum for a while.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id.

Left-floated thumbs look like this.

Sed non dignissim orci. Vivamus diam enim, commodo id consectetur ut, gravida quis erat. Vivamus molestie lobortis mattis. Quisque pretium, enim in tincidunt posuere, ligula odio vestibulum dolor, in tristique quam nulla eget nulla. Nam id dolor ac ligula aliquet varius. Vivamus diam enim, commodo id consectetur ut, gravida quis erat. Vivamus molestie lobortis mattis. Quisque pretium, enim in tincidunt posuere, ligula odio vestibulum dolor, in tristique quam nulla eget nulla. Nam id dolor ac ligula aliquet varius. Vivamus diam enim, commodo id consectetur ut, gravida quis erat. Vivamus molestie lobortis mattis. Quisque pretium, enim in tincidunt posuere, ligula odio vestibulum dolor, in tristique quam nulla eget nulla. Nam id dolor ac ligula aliquet varius.

And a centered thumb is all on its own.
This is a thumb with no alignment specified.

Banners

Pages can have banner images, similar to those on Wikivoyage. For example, the banner at the top of this page is produced by adding the following wikitext: 

{{PAGEBANNER:Hackathon Banner above Hacking Area.jpg}}

See mw:Extension:WikidataPageBanner#Usage for full details.

Cards

See mw:Extension:LinkCards for more information and usage instructions.

This is the card title Card body text can be anything.
This card has no title.

Rows and columns

Column widths are ratios.

This is .col-1
This is .col-2
This is .col-3
This is .col-1
<div class="row">
<div class="col-1" style="background-color:lightblue">This is <code>.col-1</code></div>
<div class="col-2" style="background-color:lightpink">This is <code>.col-2</code></div>
</div>
<div class="row">
<div class="col-3" style="background-color:lightgreen">This is <code>.col-3</code></div>
<div class="col-1" style="background-color:lightcyan">This is <code>.col-1</code></div>
</div>

Tables

This is the caption of the table.
Header A Header B Header C Header D Header E
Data A1 Data B1 Data C1 Data D1 Data E1
Data A2 Data B2 Data C2 Data D2 Data E2

Some tables can get very wide, so we let them extend into the margins on wide screens (and scroll on narrow ones):

Header 1 Header 2 Header 3 Header 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id.
Retrieved from "https://wikimedia.org.au/w/index.php?title=MediaWiki_skin&oldid=21480"
Discuss this page