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:
- mediawiki2u: Free MediaWiki Skins
- paulgu.com: MediaWiki Skins
- Richard Carter Consultancy: Stunning MediaWiki skin design
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 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:
- BlueSpice Helpdesk – with a banner in the header
- BlueForge – using the free space on the right for adverts and notices
Design of the BlueForge home page
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.