Chapter 13 Display and customization

MediaWiki allows for a lot of customization of its look-and-feel, including changing the text of the interface itself. Such customization is available for both for administrators and users – we'll get to both in this chapter.

Logged-in users on a wiki can change many of their settings via the Special:Preferences page. This page is available conveniently through a link at the top of the page (in most skins), called “Preferences”. This page is split up into tabs, and lets you change a wide variety of settings: the skin you use (see the next section), your language of choice, your time zone, your preferred way to display the time, and a variety of other settings relating to the look-and-feel of the rest of MediaWiki's functionality. You can choose which “gadgets” you want to use, out of the ones installed on this wiki (see here).

From this page, you can also make changes to your basic user account – your password and email address. Users cannot change their username, though – usernames can't be changed at all within core MediaWiki, though the Renameuser extension , which comes bundled in with MediaWiki, lets administrators do it.

It is the skin in use on Wikipedia, and on most MediaWiki installations. It was designed for maximum readability and usability, and underwent significant user testing, and it is indeed very user-friendly.

An even newer skin designed along the same lines is Vector 2022 , which, as its name suggests, is a variant of Vector, and was created in 2022:

Vector 2022 represents a significant amount of research and development into making the Vector interface easier to understand more modern-looking. Figure 13 shows the top of a page from the English-language Wikipedia, using the Vector 2022 skin. (Vector 2022 is already the default skin on some languages of Wikipedia, though not yet the English one.) The top of the page is where you can see most of the differences from the Vector skin: the search input has been moved to the very top instead of being among the tabs; the user action links have been replaced with icons; the set of interwiki links to other languages has been moved to a dropdown at the top instead of being within the sidebar; and the tabs have a more modern look, being represented by just a line at the bottom instead of a tab outline.

And a good place to see the current “landscape” of skins is on the site WikiApiary , which has a list of MediaWiki skins ranked by popularity:

One interesting, unconventional usage of skins is as a way to turn a wiki into a more standard content-publishing system. The idea is that users who can edit the wiki (of whom there will be relatively few), and who are logged in, will see the wiki with a normal skin; while the majority of users/readers, who aren't logged in, will see the wiki with a custom skin that doesn't show the history and edit tabs, the standard sidebar, etc.: it's a lightweight method of making a regular-looking website with the editing convenience of a wiki. The custom actions are usually still there, if users manually type in URLs that end with "action=history" and the like; but the absence of links on the screen will mean that the vast majority of users will never know that there's a wiki behind the scenes, let alone see the history of page, the set of recent changes, etc. If you go with this approach, you would still most likely want to block non-logged-in users from being able to edit the wiki, but that's easy to accomplish (see here).

There's also a good non-responsive way to get a mobile-friendly display from within the browser itself. If you go to Wikipedia on a mobile phone, you'll see a minimized, easy-to-read display even without a Wikipedia app. That's accomplished through the MobileFrontend extension, which is quite easy to install and use. See here:

What about creating your own skin? Unfortunately, MediaWiki makes it rather difficult to create and maintain good skins. Part of the problem is that the set of functions that need to be defined and called by the skin keeps changing with new MediaWiki versions; although the rate of change seems to have subsided in more recent versions.

Finally, there's also the old style of mobile support: native apps. There are a variety of apps for viewing Wikipedia for both iOS and Android, including an official one, Wikipedia Mobile, developed by the Wikimedia Foundation. However, there don't appear to be any apps yet for viewing an arbitrary MediaWiki wiki.

One notable extension in that group is AdManager , which allows setting of specific sidebar ads in specific pages, or groups of pages – it's a more complex approach than that offered by the other ad extensions. You can read about it here:

For all the criticism MediaWiki gets about the simplicity of its display, it actually makes use of an enormous amount of JavaScript and CSS. The JavaScript in MediaWiki is especially worth examining, since it is complex and still evolving – which is not surprising, since the state of the art for JavaScript as a whole is complex and evolving as well.

Let's take a look at some of the JavaScript libraries that MediaWiki makes use of, to understand both the current state and where things are headed:

The last three lines are standard elements that have special handling, so their connection to the display is not obvious, but Figure 13 shows how that appears in the sidebar within the standard Vector skin.

MediaWiki:Common.js, as you could guess, is meant to contain custom JavaScript that will be added to every page. It is often used to add additional functionality to help with the viewing or editing experience. The more standardized way to add such functionality is via the Gadgets extension (here), although there you're restricted to the gadgets that the administrator has selected for the wiki.

In addition to Common.css and Common.js, there are pages that you can use to define custom JavaScript or CSS to be used only for one skin, or only for one user group. These follow a standard naming convention: to add CSS only for the MonoBook skin, for instance, you would add it to the page MediaWiki:monobook.css, while to add CSS only for the “bureaucrat” group, you would add it to the page MediaWiki:group-bureaucrat.css.

Every MediaWiki wiki has a default language, which is determined by the value of $wgLanguageCode in LocalSettings.php (this variable takes in the IETF language tag for the language, which is often, though not always, a two-letter abbreviation – see https://en.wikipedia.org/wiki/IETF_language_tag). This is the language used for both content messages and user messages, by default. A logged-in user, however, can choose to display user messages (though not content messages) in any other language, if they click on the "User preferences" link and change their language within the main "User profile" tab. So a user can view a wiki with content messages in one language and user messages in another.

All of these messages can be modified within the wiki, via pages in the "MediaWiki:" namespace, as described previously. But modifying a page like "MediaWiki:message-name" will actually override that message's value in every language: if it's a user message, that means that even if someone views your wiki in another language, they'll still see that exact text you entered. You may not want that to happen; if not, you can set translations to only apply to one language, by using the structure "MediaWiki:message-name/language-code" instead. This will set the value for the language specified by that language code (again, usually a two-letter value). For instance, to change the sidebar only for Italian speakers, you would edit the page "MediaWiki:summary/it". Unfortunately, this can be done for every language except for the wiki's main language: if your wiki is in English, changing the value of “MediaWiki:summary/en” will have no effect.

What about running multi-language wikis, though, where the page contents can themselves be in different languages? That is covered in the section "Multi-language wikis", on here.