Manual:Skinning Part 1

From MediaWiki.org
(Redirected from Manual:Skinning)
Jump to: navigation, search
MediaWiki version: 1.18

This tutorial details the creation of a custom skin for MediaWiki. The skin is packaged as a directory you can drop into a MediaWiki installation's skins/ directory and require_once() in LocalSettings.php to install, similar to other skins and extensions.

  • Part 2 of this tutorial deals with the files required to create a skin.
  • This page outlines the things you need to take into consideration when creating your skin.
  • The actual creation of the HTML, CSS, images, any mockups, or even the idea of what a skin should look like is out of the scope of this tutorial. You'll have to either have the markup, styles, and resources ready, or build up the empty boilerplate and start building the skin from there.

There is more to a MediaWiki skin than it might seem at the first glance. A design of a generally usable skin needs to include certain easily overlooked elements.

It's very easy to create a beautiful design for your site and only later realize that you forgot the page actions links (e.g. links for editing or deleting pages), created a layout that doesn't fit the edit form, revision differences view or special pages, or didn't reserve a place for any user or site notices.

You don't need to restrict yourself to the norm: feel free to relocate portions of areas into other spots, like taking the username/talk links out of personal URLs. The important thing is to make sure you don't leave out the things MediaWiki needs to output when you think up the design.

Body area and layout[edit | edit source]

When mocking up the body area and layout of your skin remember there are many special types of pages in MediaWiki: You can view a diff between two versions of an article, there's the edit page, and there are some special pages like recent changes to think of. Many of these can be very heavy pages, so much so that you may want to consider giving them a modified wider page in your design if you are doing a fixed width design. Consider including a mock up using recent changes or an edit page in the body area.

Subtitles and taglines[edit | edit source]

When placing the title in your design remember that MediaWiki has some subtitles that usually go below the title. These are usually in the form of a sub page hierarchy, redirected from line, diff/permalink navigation, or delete line. You don't need to use the same type of attached title+subtitle+body typically used in Mono Book/Vector but do keep in mind where such subtitles will go and how they will look.

Site notices and user notifications[edit | edit source]

MediaWiki has three built-in types of notifications: the site notice, user notice for new talk page messages, and a floating JavaScript message dynamic actions (like adding a page to your watch list). When you mock up your design remember to plan where these notices will go and how will they look.

Search[edit | edit source]

MediaWiki has a built in search functionality, and the search form is a key part of skins. When designing your skin remember to include a search input in your design, including a style for the search bar that fits in with the rest of the skin. Consider the behavior of built-in search suggestions.

Personal tools[edit | edit source]

MediaWiki includes a bar with a number of personal tools (links to log in/log out, user and talk page, watch list, preferences; more can be added by extensions). You can implement custom behaviors for particular items, but remember that other links can be added to this bar and you should have some location for the rest of the functionality you didn't add custom stuff for in your skin.

Actions[edit | edit source]

MediaWiki includes a number of page specific actions, these are typically displayed as tabs on a page. You have two formats you can work with this in, a single flat list (see Mono Book for reference) and a set of lists categorized into namespaces, variants, views, and actions (see how Vector separates them into separate areas and menus). Whether you use a flat list, grouped lists, or even pull some of them out and make buttons be sure you have a place for these: they are an important part of MediaWiki and easy to forget about if you are used to doing things for other CMS like WordPress.

Navigation[edit | edit source]

MediaWiki includes a built-in sidebar for navigation. It isn't the only type of navigation you can add to a skin, however it's the only type currently with a built-in way of generating it. You can use whatever type of navigation you want in a design, but remember that if you don't use a sidebar then you'll either have to hard code pieces of it or have someone program something like the sidebar's parser for your navigation for now.

That said, don't hesitate to come up with a new layout that uses whatever type of navigation fits your skin and site best.

Toolbox[edit | edit source]

MediaWiki skins usually also include the functionality that Mono Book and Vector group into a toolbox. These tools include generic things like a special pages link and other page specific things like permalinks, feed links, block links, and printable links. Like the personal tools you can move pieces of these wherever you want, but since more links can be added to these tools be sure to have a place for the rest of the links you have not moved.

Language links[edit | edit source]

MediaWiki has support for inter language links from one page to the same page in a wiki of another language. One of the skin's responsibilities is to define a place for this list of language lines to go. Be sure to consider a place for it, even if you just throw it in a sidebar like Mono Book and Vector do.

Footer icons and footer links (optional)[edit | edit source]

Skins typically include a series of links and icons. These include things like the license / copyright of the wiki, a "powered by" icon, links to about, disclaimer, and privacy policy. When designing your skin consider if you want these or have a reason to leave them out of your design. When including them also consider how you are going to style them.

Further reading[edit | edit source]