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.|
This tutorial outlines how to create a MediaWiki skin. The files for each skin are in the skin's directory, which itself is in the skins/ folder of your MediaWiki installation.
You use the
wfLoadSkin() in LocalSettings.php to "activate" the skin, or in other words, let your MediaWiki instance know of the skin's existence. (Prior to MediaWiki 1.25, you must instead use the
This page is part 1 of the skinning tutorial and 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 elements are required (and outlined below) in order to allow users to interact with the wiki properly.
Remember to take into consideration the different ways your skin may appear. When you are creating a mock-up of the skin's layout and of the main body content, these are samples of the ways your skin may appear or may need to display:
- 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.
Here is a typical set of items on a page:
|Some of the most visible components||Sample screenshot of the Vector skin shows|
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.
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 a page, and so on. Many skins display these as tabs or menu items. You have two formats you can work with: 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
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 https://blog.redwerks.org/blog/2012/02/08/by-htm/ made by Daniel Friesen under his employer Redwerks.|