Manual:Skinning Part 1
|This page in a nutshell: This page is part 1 of a three-part tutorial on creating skins. It explains what you need to consider when you’re designing the look and feel of your skin.|
- 1 Skin elements
- 2 Body area and layout
- 3 Subtitles and taglines
- 4 Site notices and user notifications
- 5 Search
- 6 Personal tools
- 7 Actions
- 8 Navigation
- 9 Page status indicators
- 10 Footer icons and footer links (optional)
- 11 Other elements
- 12 VisualEditor compatibility
- 13 Further reading
|MediaWiki version:||≥ 1.18|
This tutorial details the customisation of MediaWiki. The skin is packaged as a directory you can drop into a MediaWiki installation's skins/ directory and enable by calling the
wfLoadSkin() function in LocalSettings.php. (Prior to MediaWiki 1.25, you must instead use the
This Skinning Part 1 outlines the things you need to take into consideration when creating your skin. Part 2 of this tutorial deals with the files required to create a skin.
The actual design of your skin, including mockups, photo editing, HTML and CSS, images, is not covered by this series.
The default MediaWiki pages are composed out of a limited set of components, which you must consider for your skin creation to be wholesome. Some components are kind of discret and should not be forgotten, e.g. the page actions links to delete or move pages; or created a layout that doesn't fit the edit form, revision differences view and special pages; or didn't reserve a place for any user or site notices.
|Doctored screenshot of the Vector skin shows||Some of the most visible components|
Using CSS and/or JS, you can largely change this default outline. 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 may need to output when you think up the design.
Body area and layout
When mocking up the body area and layout of your skin remember that besides the regular display of an article on the wiki, there are other views of a page and other kinds of pages in MediaWiki:
- users can edit the page, possibly using VisualEditor
- users can view a diff between two versions of a page, a history of the page, etc.
- pages in the File: namespace present images and video
- there are many special pages such as Special:RecentChanges
- extensions can modify pages and add new kinds of pages, such as Flow discussion boards
- users may be able to enable gadgets on the wiki
Many of these can result in very "heavyweight" 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. When designing, you can include a mock up of recent changes or an edit page in the body area of your skin.
Subtitles and taglines
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 subpage hierarchy, redirected from line, diff/permalink navigation, or delete line. You don't need to use MonoBook and Vector's approach of attached title+subtitles+body, but do keep in mind where such subtitles will go and how they will look.
Site notices and user notifications
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.
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.
MediaWiki includes a number of page-specific actions: anyone can read, edit, and view history, and logged-in users can add to watchlist, move, etc.. Many skins display these as tabs or menu items. You have two formats you can work with this in, a single flat list (see MonoBook 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 skinning other content platforms like WordPress.
MediaWiki includes a built-in sidebar for site navigation that its MediaWiki:Sidebar. You can adapt this with CSS to whatever type of navigation you want in a design, and you can create additional or replacement site-defined navigation specific to your skin.class generates from the on-wiki configuration "message"
MediaWiki skins usually also include the functionality that MonoBook and Vector group into a toolbox. These tools include generic links such as a special pages link and page-specific links such as permanent link, What links here, 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.
MediaWiki supports 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 as MonoBook and Vector do.
Page status indicators
|MediaWiki version:||≥ 1.25|
Vector shows these elements at the bottom:
- Content pages can be in one or more categories, and skins show these as links somewhere.
- Extensions can add content to a page in a
SkinAfterContenthook, which skins normally display after the content.
- There is some technical HTML that must be output at the end of a page.
class BaseTemplate(explained in Part 2) has a
printTrail()method that handles these, if your skin doesn't use it then you need to output:
- a debugging toolbar that may be enabled during development
- "bottom" scripts that can run after the HTML of the page
- performance timing information.
If you want your skin to be compatible with VisualEditor, you should consider whether it is possible to place an editing toolbar somewhere sensible. VisualEditor also has some requirements regarding the skin structure (see VisualEditor/Skin requirements) and might require additional styling work.
- Read Manual:Skinning Part 2 for the code to make your skin display something to the user.
- Read Manual:Skinning Part 3 for additional things you need to consider and test for your skin.
|This tutorial is based on the CC BY-SA 3.0 licensed tutorial at http://blog.redwerks.org/2012/02/08/mediawiki-skinning-tutorial/ made by Daniel Friesen under his employer Redwerks.|