MediaWiki skins manual - category
Release status: stable
Description Custom Metro-styled skin, created for wikis on PidgiNet
Author(s) immewnity, Paladox, Craig Davison, lagleki
Latest version 7.0 alpha 3 (2020-08-03)
MediaWiki 1.27+
License GNU General Public License 2.0 or later
Example Wikimedia Skins Lab
  • $wgMetrolookFeatures
  • $wgMetrolookUseSimpleSearch
  • $wgMetrolookUseIconWatch
  • $wgMetrolookLogo
  • $wgMetrolookSiteNameLogo
  • $wgMetrolookSiteName
  • $wgMetrolookSiteNameText
  • $wgMetrolookSiteText
  • $wgMetrolookSearchBar
  • $wgMetrolookDownArrow
  • $wgMetrolookLine
  • $wgMetrolookUploadButton
  • $wgMetrolookMobile
  • $wgMetrolookBartile
  • $wgMetrolookDisableAvatar
Quarterly downloads 49 (Ranked 13th)
Public wikis using 87 (Ranked 35th)
Public wikis using as default skin 27
Translate the Metrolook skin if it is available at
Issues : Open tasks · Report a bug

Metrolook is a Metro-inspired fork of the Vector skin. It was originally written by Immewnity for use PidgiWiki, and was forked by Paladox to create this public version.

Like the Refreshed skin, and unlike the base Vector skin, Metrolook is fully responsive, meaning it adapts to different screen sizes like smartphones and tablets, as well as on desktop.


  • Download and place the file(s) in a directory called Metrolook in your skins/ folder.
  • Add the following code at the bottom of your LocalSettings.php file:
    wfLoadSkin( 'Metrolook' );
  • Yes Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.


Setting Default value Notes
$wgMetrolookUseSimpleSearch true Search form look.

- true = use an icon search button - false = use Go & Search buttons

$wgMetrolookUseIconWatch true Watch and unwatch as an icon rather than a link.

- true = use an icon watch/unwatch button - false = use watch/unwatch text link

$wgMetrolookLogo true Setting this to false prevents the #p-logo and #p-logo-custom portlets from being generated.
$wgMetrolookSiteName true Setting this to false prevents certain portlets, which display the site's name, from being generated.
$wgMetrolookSiteText To use this configuration variable, first set $wgMetrolookSiteNameText = false; and then set $wgMetrolookSiteText = 'Enter text here';
$wgMetrolookSearchBar true When set to false, the search bar is not generated. Useful for (semi-)private/read-only wikis.
$wgMetrolookDownArrow true This configuration variable has to be true for the tiles (see below) to be generated.
$wgMetrolookLine true If set to false, then the img.line element (white divider line in the top menu, between the site name and the down arrow/"Upload file" link) won't be generated.
$wgMetrolookUploadButton true When enabled, an "Upload file" link is generated in the top menu bar, before the content-specific action links ("History", "Discussion", etc.)
$wgMetrolookMobile true When enabled, <meta name="viewport" content="width=device-width; initial-scale=1;"> is added to the HTML output so that the responsive mode works as intended.
$wgMetrolookBartile true When $wgMetrolookDownArrow is trueand this variable is true, the tile menu will be generated from [[MediaWiki:Metrolook-tiles]]. If $wgMetrolookDownArrow is trueand this variable is false, then the tile menu will be generated from [[MediaWiki:Metrolook-tiles-second]].
	'collapsiblenav': {
		'global': false,
		'user': true
Controls the enabling/disabling of the collapsible sidebar portlets feature. Set $wgMetrolookFeatures = array( 'collapsiblenav' => array( 'global' => false, 'user' => false ) ); to completely disable the collapsible sidebar for everyone.
$wgMetrolookDisableAvatar true To disable please do $wgMetrolookDisableAvatar = false;

Additionally registered and logged-in users can enable or disable Metrolook's collapsible sidebar portlets at will via Special:Preferences. A system administrator can set the global defaults by configuring $wgMetrolookFeatures appropriately, i.e. $wgMetrolookFeatures = array( 'collapsiblenav' => array( 'global' => true, 'user' => true ) ); to have the feature always on but to allow users to toggle it via preferences.


The tile menu (the menu which is opened by clicking the small down arrow next to the site name in the top menu bar) is customizable via [[MediaWiki:Metrolook-tiles]] and [[MediaWiki:Metrolook-tiles-second]]. The format of the message is:

* URL to the site|alternative text|image URL

For example:

*|PidgiWiki Press|
*|The JCC|
*|Petalburg Woods|

The alt text can also be the name of another system message (for international compatibility). Likewise, it's possible to have different tiles for French users, for example, by creating [[MediaWiki:Metrolook-tiles/fr]] and [[MediaWiki:Metrolook-tiles-second/fr]].


Just go to: and then simple edit the page, like written above and it will automatically change the images and links, on all the pages. Remember, you have to login as admin, to be able to edit this page or else you will not get the edit option.

Change the color of the top bar[edit]

Set this in the theme.less if you use mediawiki 1.22 or higher or use theme.css file if you use mediawiki 1.21 or lower

You can change color by changing the background-color: element and possibly background for some css. But you will be able to tell where I changed the colors.

@import "../../variables.less";
@import "mediawiki.mixins";
{background-color: #9933ff !important;
background-image: none;}
@media (max-width:768px)
{background-color: #9933ff;}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
{background-color: #9933ff;}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
{background-color: #9933ff;}
div.vectorTabs a:hover
{background-color: #c5a6ff;}
{background-color: #c5a6ff;}
{background-color: #c5a6ff;}
div.vectorMenu:hover h5 span
{background-color: #c5a6ff;}
div.vectorMenu h5 span
{background-color: #9933ff;}
div.vectorMenu:hover h5 a
{background-color: #c5a6ff;}
div.vectorMenu h5 a
{background-color: #9933ff;}
{background-color: #c5a6ff;}
div.vectorMenu ul
{border: solid 2px #9933ff;
border-top: none;}
@media (max-width: 768px)
{background-color: #c5a6ff;}
{background-color: #c5a6ff;}
div.actionmenu ul
{border-top: solid 2px #9933ff;}
{background-color: #9933ff;}

Change bullet icon[edit]

Set this in the theme.less if you use mediawiki 1.22 or higher or use theme.css file if you use mediawiki 1.21 or lower

You only need to add @import "mediawiki.mixins"; if you haven't set the above.

/* To change bullet icon to a circle */

@import "mediawiki.mixins";

ul {
list-style-type: disc;
.list-style-image-svg('images/bullet-circle-icon.svg', 'images/bullet-circle-icon.png');

Change the tile bar background color[edit]

Set this in the theme.less if you use mediawiki 1.22 or higher or use theme.css file if you use mediawiki 1.21 or lower

You only need to add @import "mediawiki.mixins"; if you haven't set the above.

/* To change the tile bar background color*/

// For green background tile.
.tilebar {
background: green !important;