Skin:Metrolook

**MediaWiki skins manual** - **category**
Metrolook; 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
Download	Download skin ; Git [?]: Download Git master; browse repository (GitHub); commit history; repository contributors (GitHub); code review; ; README; Changelog
Example	Wikimedia Skins Lab
Parameters
	$wgMetrolookFeatures; $wgMetrolookUseSimpleSearch; $wgMetrolookUseIconWatch; $wgMetrolookLogo; $wgMetrolookSiteNameLogo; $wgMetrolookSiteName; $wgMetrolookSiteNameText; $wgMetrolookSiteText; $wgMetrolookSearchBar; $wgMetrolookDownArrow; $wgMetrolookLine; $wgMetrolookUploadButton; $wgMetrolookMobile; $wgMetrolookBartile; $wgMetrolookDisableAvatar;
	Hooks provided MetrolookRightPanel; MetrolookAfterToolbox; SkinMetrolookStyleModules;
Quarterly downloads	49 (Ranked 12th)
Public wikis using	87 (Ranked 35th)
Public wikis using as default skin	27
	Translate the Metrolook skin if it is available at translatewiki.net
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.

Installation

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' );
```
Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configuration

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 `true`and this variable is `true`, the tile menu will be generated from `[[MediaWiki:Metrolook-tiles]]`. If `$wgMetrolookDownArrow` is `true`and this variable is `false`, then the tile menu will be generated from `[[MediaWiki:Metrolook-tiles-second]]`.
`$wgMetrolookFeatures`	{ '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.

Customization

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:

* http://www.pidgi.net/wiki/|PidgiWiki|http://images.pidgi.net/pidgiwikitiletop.png
* http://www.pidgi.net/press/|PidgiWiki Press|http://images.pidgi.net/pidgipresstiletop.png
* http://www.pidgi.net/jcc/|The JCC|http://images.pidgi.net/jcctiletop.png
* http://www.petalburgwoods.com/|Petalburg Woods|http://images.pidgi.net/pwntiletop.png

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]].

ADDITIONAL HELP:

Just go to: www.yourwebsite.com/index.php/MediaWiki:Metrolook-tiles 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

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";
#mw-page-base
{background-color: #9933ff !important;
background-image: none;}
@media (max-width:768px)
{#mw-page-base
{background-color: #9933ff;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
{#mw-page-base
{background-color: #9933ff;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
{#mw-page-base
{background-color: #9933ff;}
}
div.vectorTabs a:hover
{background-color: #c5a6ff;}
div.onhoverbg:hover
{background-color: #c5a6ff;}
img.downarrow:hover
{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;}
div.vectorMenu:hover
{background-color: #c5a6ff;}
div.vectorMenu ul
{border: solid 2px #9933ff;
border-top: none;}
@media (max-width: 768px)
{#hamburgerIcon:hover
{background-color: #c5a6ff;}
img.editbutton:hover
{background-color: #c5a6ff;}
div.actionmenu ul
{border-top: solid 2px #9933ff;}
#left-navigation
{background-color: #9933ff;}
}

Change bullet icon

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

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;
}

This skin is included in the following wiki farms/hosts and/or packages:

This is not an authoritative list. Some wiki farms/hosts and/or packages may contain this skin even if they are not listed here. Always check with your wiki farms/hosts or bundle to confirm.