MediaWiki/Guide/Configure/Skins
A Guide for installing Skins in MediaWiki
This article is part of a series compiled as a guide to encourage and assist those building a MediaWiki-based website in a hosted environment.
Each article links to relevant documentation from the MediaWiki.org website and the Wikimedia.org website. Where the official documentation does not adequately cover the issues for a hosted site, or is too 'advanced', additional information, explanation and advice is provided.
Choosing a Skin
By loading a different Skin you can change the 'look and fee' of MediaWiki. Instead of the 'Wikipedia' look you can use a Skin which has different styles, menu position, interactive items and more.
Some skins are responsive - adapting to the user's device, from phones to smart TVs. For example, the skin used on this website is called Pivot. Like a similar skin called Foreground, it uses the Zurb Foundation CSS Framework.
Several skins are included with MediaWiki. Others are listed on the MediaWiki.org website. Of the available skins only some are regarded as stable. Of those you should check compatibility with the current version of MediaWiki. At minimum, a skin should be compatible with MediaWiki 1.25+.
- Skins Explained
- The resource Customization:Explaining skins from Wikimedia.org provides an excellent overview of skins for MediaWiki.
- List of All skins
- The MediaWiki Category:All skins provides a comprehensive list. The best feature is the list of sub-categories, for example Skins based on Bootstrap, or Mobile-first skins - which includes Foreground and several others.
- Stable Skins
- The Category:Stable skins are skins with a Release status: stable, which means they are known to work as described, and have few compatibility problems. Some show a version history going back over a long time, indicating continuous development.
Manuals and Links
Configuring a Skin
- Setting the default skin
- The default skin is configured in LocalSettings.php with the variable $wgDefaultSkin. To work, the skin has to be installed and loaded. If more than one skin is loaded then you can also allow registered users to select their own skin via preferences.
- Download, install and configure a skin
- The Manual:Skin configuration is a guide for systems administrators covering topics downloading,enabling, setting default, and more. The Manual assumes a usage of Git for downloading, but most skin authors provide links to compressed files in .tar.gz format which can be easily downloaded.
Skins and Cascading Style Sheets (CSS)
Each skin has a file skin_name.css which contains the styles used by the skin to create it's distinctive 'look and feel'.
- Customising a skin's css
- The Help:Skins describes how you can customize the current skin's .css file - without modifying it. That is important because if you modify the skin's .css file and then upgrade to a later version you may use all of your changes. It is always better to separate your own customization from the original source.
- MediaWiki:Common.css
- The file MediaWiki:Common.css contains your own styles which will be applied to all skins. The page is empty by default. If you add css to MediaWiki:Common.css and it does not over-ride the skin css then try the subpage option above.
- Other stylesheets in MediaWiki
- The Manual:Interface/Stylesheets provides a List of stylesheets used in MediaWiki. Follow each link for more information.
Advanced Topic: Skinning
Would you like to modify an existing skin or create your own skin?
MediaWiki.org provides a three-part tutorial Manual:Skinning.
- Part 1 starts with an overview of the components within MediaWiki which need to be considered when designing your skin
- Part 2 works through an example skin which can be downloaded and installed, so you can literally 'learn by example'
- Part 3 discusses MediaWiki's support for printing; internationalization; and accessibility - all of which should be addressed in your skin design. There is also a short list of regular MediaWiki features to test.
The Manual:Skins has been used as a reference when developing this page.
Disclaimer
The information or advice provided in this Guide is based on, or links to, official documentation for MediaWiki and was accurate when this article was created. However, some variation may occur between versions of MediaWiki; and the specifics of web hosting varies by service provider. Consequently, you should always create an effective backup before making any changes; ensure that you can restore your database and website; read the Release Notes before upgrading; and apply best practices to the management of your website. Any action that you take based on information provided here is at your own risk and the author accepts no liability for any loss or damage.
