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	38 (Ranked 15th)
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 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]].
$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;
}