Manual:Interface/Stylesheets

MediaWiki:Common.css is a Cascading Style Sheet loaded after the active Skin's stylesheet. This stylesheet is loaded with all and a similar stylesheet specific to the skin – named "" – is appended to it (see below). Although only Monobook.css is listed on Special:AllMessages, the other skin-specific stylesheets will work nonetheless.

If is set to true, users can customize the interface for themselves only by creating user subpages with lowercase titles (see below).

Global stylesheets won't load on special restricted pages like login or preferences, unless you enable.

They also won't load if safemode is used.

Global stylesheets
These are stylesheets that affect all users of the wiki, depending on their setup — what skin they use, their user group, etc.


 * MediaWiki:Common.css - all skins and all the users, except for the MobileFrontend
 * MediaWiki:skinname.css - per skin, skinname is the value of that variable in the PHP file of your skin, for example MediaWiki:Vector.css, MediaWiki:Monobook.css
 * - per user group, for example MediaWiki:Group-sysop.css
 * MediaWiki:Noscript.css - for users viewing without JavaScript ; may be replaced with a selector
 * MediaWiki:Print.css - for "printable versions" of pages
 * MediaWiki:Mobile.css - for Mobile themes, used with
 * MediaWiki:Filepage.css - specifically targeted to have Commons file pages (foreign repositories) work on 'local' file pages.

Personal stylesheets
These are stylesheets that only yourself and users with the right, usually interface admins, can edit.


 * User:Example/common.css - all skins - introduced in MW v1.17
 * User:Example/skinname.css - per skin, for example User:Example/vector.css and User:Example/monobook.css
 * User:Example/global.css - per wiki family, if is in use in for this family

CSS selectors
In the Monobook skin, the CSS selectors relevant for the style of the page body include the following. As far as possible, examples are given, which show the result for the current style settings:


 * : link – unvisited link – example: help:index ; default: help:index
 * : visited – visited link
 * : link#contentTop
 * : link.external – http://example ; default:  http://example
 * : link.extiw – interwiki link in page body – example ; default: en:example
 * : link.image – link from full image to image description page
 * : link.internal – link to file itself (Media:), and links from thumbnail and magnifying glass icon to image description page (note that color and font size specified for a.internal are only applicable in the first case) - [[Media:example.png]]
 * : link.new – doesnotexist ; default: doesnotexist
 * .allpagesredirect – abc – redirects in Special:Allpages and Special:Prefixindex
 * body.ns-0, ..., body.ns-15 (namespaces)
 * div#bodyContent
 * div#column-content
 * div#editsection
 * div#globalWrapper
 * div#tocindent
 * div.tocline
 * h1.firstHeading
 * h2
 * h3
 * – example
 * table.toc
 * : link and : visited – It's a common mistake to use "a" instead of ": link" or ": visited" to style links (unvisited and visited, respectively). Whereas later pseudoclasses apply only to links, "a" applies to both links and named anchors (e.g. ).


 * #p-lang a – for interlanguage links

One may also have the style depend on the value of an attribute, e.g. with the selectors:



to color-code or highlight particular users (including oneself) and/or links to particular pages (like the bolding of watched pages on Recent Changes).


 * See also Help:Watching pages

The watchlist and Recent Changes use two classes:
 * .autocomment example
 * .new (see below)

The page history has classes autocomment and:
 * .user
 * .minor

Thus the font specified for user applies in the page history, but not in the watchlist or Recent Changes.

Edit page
example1 example2
 * Edit box: textarea#wpTextbox1
 * Edit summary box: input#wpSummary

Non-display
One extreme "style" for a text or image is not displaying it, with .classname {display: none}
 * 1) id {display: none}

Non-displayed links do not work (as opposed to links in a very small font).

One application is the use of a.

It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in link targets, etc.

These can now be done with ParserFunctions

While "display: none" produces nothing, "visibility: hidden" produces blank spaces replacing the content; its opposite is "visibility: visible".

Example:
 * gives p q r