Skin:Metrolook

From MediaWiki.org
Jump to: navigation, search
MediaWiki skins manual - category
Crystal Clear device blockdevice.png
Metrolook

Release status: stable

Metrolook skin.png
Description Custom Metro-styled skin, created for wikis on PidgiNet
Author(s) immewnity, Paladox, Craig Davison, lagleki
Latest version
MediaWiki 1.29+ requires 7.x.x
MediaWiki 1.28+ requires 6.x.x
MediaWiki 1.27+ requires 5.x.x
MediaWiki 1.26+

4.0 (2015-10-11; 21 months ago (2015-10-11)) [±]

MediaWiki 1.25+

3.2.0 (2015-10-11; 21 months ago (2015-10-11)) [±]

MediaWiki 1.24+

2.7.0 (2015-10-11; 21 months ago (2015-10-11)) [±]

MediaWiki 1.23+

1.6.0 (2015-10-11; 21 months ago (2015-10-11)) [±]

MediaWiki 1.22+

0.3.14 (2015-10-11; 21 months ago (2015-10-11)) [±]

MediaWiki 1.21+

0.2.4 (2015-10-11; 21 months ago (2015-10-11)) [±]

Latest preview version
MediaWiki 1.27+

5.0 alpha 1 (2015-10-11; 21 months ago (2015-10-11)) [±]

MediaWiki 1.26+
License GPL-2.0+
Download
README
Changelog
Example PidgiWiki and Random Wikisaur
Parameters
  • $wgMetrolookFeatures
  • $wgMetrolookUseSimpleSearch
  • $wgMetrolookUseIconWatch
  • $wgMetrolookLogo
  • $wgMetrolookSiteNameLogo
  • $wgMetrolookSiteName
  • $wgMetrolookSiteNameText
  • $wgMetrolookSiteText
  • $wgMetrolookSearchBar
  • $wgMetrolookDownArrow
  • $wgMetrolookLine
  • $wgMetrolookUploadButton
  • $wgMetrolookMobile
  • $wgMetrolookBartile
  • $wgMetrolookDisableAvatar

Translate the Metrolook skin if it is available at translatewiki.net

Check usage and version matrix;

Issues:

Open tasks · Report a bug

Metrolook is a Metro-inspired fork of the Vector skin. It was written by and for PidgiWiki.

Like the Refreshed skin, and unlike the current (as of 11:42, 14 July 2015 (UTC)) iteration of the Vector skin, Metrolook is fully responsive, meaning it's usable on mobile devices (smartphones, tablets) as well as on desktop.

The latest development preview version requires MediaWiki 1.25 or greater.

Installation[edit]

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

To users running MediaWiki 1.24 or earlier:

The instructions above describe the new way of installing skins using wfLoadSkin(), since MediaWiki 1.25. If you need to install this skin in earlier versions, instead of wfLoadSkin( 'Metrolook' );, you need to use:

require_once "$IP/skins/Metrolook/Metrolook.php";

(To run an skin on an earlier release, you may need to download the version of it tagged for that release from Special:SkinDistributor.)

Configuration[edit]

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 array( 'collapsiblenav' => array( '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 $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[edit]

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 colour 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 colour by changing the background-color: element and possibly background for some css. But you will be able to tell where I changed the colours.

@import "mediawiki.mixins";

#mw-page-base {
	background-color: dodgerBlue !important;
	background-image: none;
}

@media (max-width:768px) {
#mw-page-base {
	background-color: dodgerBlue;
}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
#mw-page-base {
	background-color: dodgerBlue;
}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
#mw-page-base {
	background-color: dodgerBlue;
}
}

div.vectorTabs a:hover {
	background-color: blue;
}

div.onhoverbg:hover {
	background-color: blue;
}

img.downarrow:hover{
	background-color: blue;
}

div.vectorMenu:hover h5 a {
	background-color: blue;
}

div.vectorMenu h5 a {
	background-color: dodgerBlue; 
}

div.vectorMenu:hover {
	background-color: blue;
}

div.vectorMenu ul {
	border: solid 2px dodgerBlue;
	border-top: none;

}

@media (max-width: 768px) {
#hamburgerIcon:hover {
	background-color: blue;
}

img.editbutton:hover {
	background-color: blue;
}

div.actionmenu ul {
	border-top: solid 2px dodgerBlue;
}

#left-navigation {
	background-color: dodgerBlue;
}
}

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 colour[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 colour*/

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