Identify Interface Classes

A Guide to Using MediaWiki in a Hosted Environment

An instructional website by the developer of mh370wiki.net - a MediaWiki site about Malaysia Airlines Flight MH370.

Identify CSS Classes

To customise the appearance of a MediaWiki-based website it will be necessary to identify the CSS classes defined by MediaWiki and the current Skin. This website uses the Vector skin and also the Extension:CollapsibleVector which enables drop-down menus in the Sidebar.

Firefox Developer Edition is used here to display the page source for the Main page on this website, with many of the sections expanded to reveal the CSS classes.

The next image expands the navigation parts at the page header.

The next image expands the panel containing the Sidebar and the first menu item(s).

This final image captures the Tools menu and the Footer.

Two Sources of CSS Classes

MediaWiki developers follow naming conventions which enable us to identify the source of each CSS class:-

1. MediaWiki code prefixes each class with mw-, for example mw-panel or mw-list-item
2. Styles used by the skin, in this case Vector, are prefixed vector-, for example vector-menu-content-list
3. Styles used by the Extension:CollapsibleVector are less obvious. This extension enables a drop-down menu which must have two states - expanded or collapsed. Wherever those terms are used in conjunction with other Vector classes it can be assumed that CollapsibleVector is the source.

Notice that a menu (below a heading) is an unordered list and although the container is vector-menu-content-list the actual list items use the MediaWiki class mw-list-item.

A List of Classes

The following list is likely not complete, and although each MediaWiki-based website will have all or most of these same classes there will be differences depending on the MediaWiki version, the Skin and the skin version, and any Extensions which affect the interface

.mw-body
.mw-head
.mw-portlet
.mw-first-heading
.mw-body-content
.mw-page-title-main
.mw-panel
.mw-navigation
.mw-list-item
.mw-normal-catlinks
.mw-footer

.vector-body
.vector-menu-heading 
.vector-menu-heading-label
.vector-menu-content
.vector-menu-content-list
.vector-search-box
.vector-search-box-form

Where are Default Classes Defined?

The article Searching for Default Settings describes a method to find where CSS Classes used by MediaWiki and the installed Skin are defined.

Customising a Style

Each of the MediaWiki classes prefixed mw- could be customised with CSS in MediaWiki:Common.css. The changes would apply to all skins.

Each of the classes related to Vector and the Extension:CollapsibleVector could be customised with CSS in MediaWiki:Vector.css

If Vector is the only Skin available to all users, for convenience all custom styles applied to the interface could be added to MediaWiki:Vector.css. That is what I did for the mh370wiki.net website, because I already have a lot of CSS in MediaWiki:Common.css.

Cascading Style Sheets - definitions for style and layout of web pages. Enables separation of presentation and content.

Styles used to format webpages. MediaWiki users can store custom css in the page MediaWiki:Common.css.

Cascading Style Sheets (CSS)