Book Image

MediaWiki Skins Design

Book Image

MediaWiki Skins Design

Overview of this book

Table of Contents (16 chapters)
MediaWiki Skins Design
Credits
About the Author
About the Reviewer
Preface

Customized MediaWiki Skins


An easy option to brighten up your wiki is to change the color scheme of MonoBook. Memory Alpha (http://www.memory-alpha.org) is a good example of the MonoBook skin that uses a different color scheme, but the monotony of MonoBook is still noticeable. However, it does make skinning MediaWiki more rewarding.

Adobe Labs Wiki

The Adobe Labs wiki (http://labs.adobe.com/wiki/) provides information on upcoming technologies at Adobe. It allows the developers to evaluate them before they are fully launched, with information about the application's prerequisite requirements in both hardware and software.

The article content draws focus to itself due to its white background that contrasts with the gray color used in the background and in the column on the left. The article, discussion, view source or edit, and the history links also draw your focus.

In order to edit the articles, visitors must register and log in, as edits by anonymous editors are disabled. Interestingly, visitors can edit articles' discussion pages without the need to register, thus helping to preserve the content of the article with minimal poor quality edits.

The bright red color of the Adobe logo pulls the focus away from the page's main content. Also, the wide column on the left-hand side lessens the width of the article content, thereby diminishing its ability to pull the visitor's eye towards the content.

AboutUs

AboutUs (http://www.aboutus.org) is a wiki whose goal is to maintain up-to-date information about other websites and topics or information created by the community. Take a look at the following screenshot:

The conspicuous, brightly colored edit link is the focus of the page, drawing your attention to the content on the page. Its "make constructive edits anywhere you see fit" encourages short but constructive edits to be made to the articles.

While Wikipedia's more subdued skin buries the edit link in the page, AboutUs uses color and the positioning of the edit feature on the top left to make it incredibly obvious that you can edit the content yourself. Wikipedia may be happy to allow only the more seasoned wiki users to edit content, but as an emerging website, AboutUs actively encourages its visitors to contribute to it.

A more careful look at AboutUs reveals the absence of the discussion pages seen on Wikipedia and other wikis. This lessens the number of links required on each page that are not directly related to the page's content, thereby allowing AboutUs to appear simpler than Wikipedia.

The Find feature presents itself as an "obstacle" to the visitors, thus inviting them to search for the content that they are looking for. The advertising in the right-hand column does not detract from the page's content, and the complementary colors that are used help to make the adverts appear as if they are organic content, rather than a way to generate income for the website.

Another innovation of the AboutUs wiki is that it creates the basis of an article on your behalf by locating the domain name's title, and a description extracted from the website.

The WordPress Codex

WordPress (http://www.wordpress.org), the blog platform, uses MediaWiki to store its documentation in the WordPress Codex (http://codex.wordpress.org).

The Codex MediaWiki skin is a vast improvement on MonoBook. The WordPress logo is very attractive. Using a gray header and white text, the logo draws the visitors' attention.

The neutral blue background color for the "sectional" heading "Codex", and the log in and register links towards the right, orientate the visitor to the Codex. These elements help in determining the section of the WordPress website in which we are currently working. They also determine the visitor's ability to log in and even access some other features. The highlighted Docs tab in the navigation also helps to orientate the user.

Although the links are not underlined, the blue color indicates that the visitors can click on them. The headings within the page are well-spaced so as to indicate their importance within the page.