MediaWiki Skins – A visual feast

The structure and design of most wikis looks like Wikipedia, which is now over ten years old. It does not have to be like this. If you want to give your wiki a different look, you need to use a different skin. Changing the appearance of a MediaWiki (and also BlueSpice) installation also changes how it handles. I have collected together a few tips and ideas here and I also explain the steps planned for the BlueSpice skin.

Update 2017: Please see also the recent article The top 10 MedaWiki skins.

MediaWiki is becoming more diverse

Look at these wikimedia projects which all use the current “Vector” skin. Vector was developed in 2009 for MediaWiki 1.16+ as part of the Wikipedia Usability Initiative and improves on its predecessor Monobook, giving a clearer presentation and better usability. In addition, some special functions can be downloaded as vector extensions.

MediaWiki is already working on the further development of the standard skins. The next stage, the Athena skin, will support mobile devices, amongst other things. You can get a visual impression of Athena here.

Wikipedia redefined shows a more comprehensive approach to making a possible new design for Wikipedia. This is a possible outline for the future design of Wikipedia which has been published be an advertising agency not connected to the Wikimedia Foundation. It is very interesting. The designers explain their motivation and the development of their design. The changes deal above all with presenting the information as clearly as possible. The plain design directs the focus to the contents and fits in the current Google+ and Windows 8 layouts by having large buttons and a very “angular” display. These target users of tablet and other mobile equiptment.

There is also movement in Wikipedia’s and MediaWiki’s skinning. The choice of alternative skins available for MediaWiki is, however, still manageable. One of the reasons for this is that, for example, software such as WordPress with its rich choice of themes has ten times as many downloads and so more installations too. The development community is simply larger and as such so is the number of commercial skin providers. Another reason is that many wiki operators want their wiki to look like Wikipedia so that the users recognise it and they do not endanger the acceptance among the co-authors. However, opinion has been changing here too over the last few years and we are experiencing a greater interest in new, individual designs than before both on the web and from our MediaWiki customers.

An overview of alternative skins can be found in the gallery of the MediaWiki webpage. Further nice examples can also be found here:

wikiHow – The world’s how to manual

A very extensive design is the skin from wikiHow. At first glance, WikiHow looks like an ordinary blog. The actions a user can perform on the platform are shown at the top. Identifying features of a wiki, such as creating a new article and recent changes and also the navigation system are found on the right side in a menu that reminds one a lot of WordPress’s widget bar. The focus is initially on existing articles and categories. The typical “Edit”, “Talk” and “Version” field are only seen underneath. A navigation bar and further links are generally found right at the end of the page.

Examples based on BlueSpice

Let us now take a quick look at the world of BlueSpice. BlueSpice is a free MediaWiki distribution for businesses and organisations.

The DESERTEC Foundation’s knowledge base

Desertec Mainpage
Desertec Mainpage

DESERTEC has started a knowledge platform for renewable energies, DESERTEC Knowledge Platform The platform is based on MediaWiki, functionally extended with BlueSpice free. In contrast to Wikipedia, there is a banner in the header containing extra links to the most important theme portals. Apart from that, DESERTEC uses the whole width of the screen, like Wikipedia, thus making the page instantly recognisable.

BlueSpice, the business wiki’s, skin

With the standard skin from BlueSpice, some rather different design features are shown to those at DESERTEC. The standard skin is actually an answer to the MediaWiki Usability Initiative at the business level. The distribution also brings with it a very extensive set of extra functions. These, however, should not distract one from the content.

For this reason, the navigation system is divided up into tabs to some extent. This gives one more flexibility and allows the user the possibility to access it individually.
The banner is dispensed with giving more room for the contents. Having only a navigation bar leaves room for search, personal settings and links to other applications, for example to the firm’s blog or to the CRM system. The idea is to set up a widget bar like that on a blog, similar to wikiHow. BlueSpice gives you an individual widget bar which can be opened and closed at the touch of a button. Place has been specifically set aside for functions and inserts relevant to all users (adverts or automatic notifications, for example news from other business applications).
Information relevant to the current article is summarised, such as category, authors or subpages. Functions which are not used so often and those offered via expansions are placed in the widget bar.

The display is left-justified and given a fixed width, but also made narrower to allow the contents to be grasped more quickly. This narrowing also matches the normal displays you find on the web. Here, websites with thinner, centred content areas have undergone a boom. However, a BlueSpice skin for the whole width of the screen is often required, as one can see with DESERTEC. Setting up these varying skins will soon be easy (see below: FlexiSkin). Two more examples for BlueSpice skins:

Design of the BlueForge home page

BlueForge Mainpage
BlueForge Mainpage

Changing the skin and the logo in MediaWiki

How can I do it myself? Currently, MediaWikis are delivered with, amongst other things, the Vector skin as standard. Small changes can be carried out relatively quickly.

You change the logo, for example, by copying your logo into the skins folder (\mediawiki-1.XX.0\skins\vector) and changing the variable $wgLogo in the main folder (\mediawiki-1.XX.0). There is also a screencast with a short description. The free MediaWiki distribution BlueSpice places these settings conveniently next to that controlling the image formats allowed.

If a new skin is to be made available for the wiki, you need to copy this skin (PHP data and the skin folder) into the MediaWiki’s skin folder (\mediawiki-1.XX.0\skins\). To set it as standard, one needs to change the file Localsettings.php: simply enter the correct skin name as the variable $wgDefaultSkin.

The Wiki’s skin can be switched by users both in MediaWiki and also in BlueSpice. This option can be found under personal settings > appearance. There, any skin available can be activated.

After the installation and the allocation of a new skin, it is important to look again at the different areas of the wiki quite closely. Particularly when you have extra extensions deployed, the display might change in some places due to the new skin. It is not really possible to plan the skin in advance for all conceivable situations as there are more than 1000 extensions with differing ranges of functions.

Developing your own MediaWiki skin

For further adjustments to the skin, for example adapting it to the company’s CI, it is recommended to get support from a professional web designer. Just like for other web projects, one needs to weigh up whether developing a new skin from scratch is really worth the effort or if it is better to take an existing skin and change it somewhat. It can take between one and five days. It only becomes complicated when one has to take account of a larger set of extensions. Otherwise, the data-structure is manageable.

There is a PHP file in the skins folder above, which has the name of the relevant skin. This refers to CSS and image files from a subfolder. Extensions generally have their own CSS files which may override the skin formatting. Unfortunately, this makes the process somewhat difficult to manage. Also, MediaWiki uses a great number of variables which one will not be familiar with from other web projects. One has to get an overview first.

The skin is also not based on any of the well-known frameworks. Thus, when developing a new skin or adapting an existing one, one has to pay particular attention to browser compatibility. You can find a helpful introduction on wikiHow.

The skin for BlueSpice is also becoming flexible

At the moment, further development of the BlueSpice skins is concentrated more on flexibility and adaptability. The next BlueSpice release will be compatible with Vector so that BlueSpice and MediaWiki can mutually profit even more from developments.

Also, the wishes of many users and the need for greater flexibility in cloud services will lead to the reintroduction of the flexi-skin module. Administrators can then make the most important adjustments conveniently via the admin area.

The BlueSpice skin will also get more stable as regards the cloud. The aim is to fall back on CSS frameworks like YAML or YUI CSS Grids. In this vein, the CSS is tidied up and, where possible, modularised. A high level of compatibility with other extensions is also desirable. For this, all the MediaWiki standard hooks and “areas” need to be supported. These steps are very complex and are part of the BlueSpice roadmap for Version 2.0.

 

You Might Also Like

7 Comments

  • Pingback:Install MediaWiki – Step by step instructions | BlueSpice

  • yury katkov

    February 4, 2013

    Very nice article! Thank you very much for the links to the alternative skins you have provided. Is it possible to find a person or an agency which can make a new skin for us – not only the design, but also the implementation?

    Replay
  • Rado

    February 4, 2013

    Dear Yury,

    thank you for your approval! We have developed most of the discussed skins for Hallo Welt! customers (www.hallowelt.biz). So if you need a full service from design to implementation, feel free to contact me. We will provide best practices and we will develop a suitable solution in cooperation with you and your ideas.

    Replay
  • Pingback:BlueSpice for MediaWiki skins for free | BlueSpice

  • saml

    April 18, 2014

    For anyone having a lot of Microsoft products, and users, you might be interested in the Sharepoint lookalike skin we are providing at https://rilpartner.se/mediawiki-skins/ . Since it it unfortunately the 2010 look, we recently dumped the prices, and hope to be able to release a lookalike of the new Sharepoint soon. (We provide custom skin development upon request too!)

    Replay
    • RichardHeigl

      May 21, 2014

      Nice 🙂 Are you still working on MediaWiki skins? I wonder if we could cooperate. Richard

      Replay
  • Pingback:The top 10 MediaWiki skins - BlueSpice Blog

Leave a Reply to Wikis at the touch of a button: BlueSpice automating software development. - BlueSpice Blog Cancel reply