Knowledgebase

How to make CSS modifications in MediaWiki

In MediaWiki there's an easy way to make CSS (Cascading Style Sheets) changes to the style of your site. You can make such modifications to remove default elements (e.g. tabs, buttons, links), to change colors, font style and size, etc. These changes can be performed straight on the frontend of the site; there are special pages for making CSS changes. You don't have to edit any core files. In this way the changes are preserved after upgrading the application.

The pages for making CSS changes are stored in the MediaWiki namespace of your site. This means that the namespace prefix MediaWiki: is added together with the name of the page to the main URL to form the URL address of the CSS page.

  • The main page for making CSS changes is MediaWiki:Common.css. Just add that name to the base URL of your MediaWiki site and open it to access the page. If, for example, your site's address is yourdomain.com, then the URL of the page will be yourdomain.com/index.php/MediaWiki:Common.css.

To make a CSS change just edit the page like any regular page and in the content add the CSS code with the modification that you want to perform, and save the page. The page MediaWiki:Common.css affects the whole site. This means that the changes that you make with it can potentially be applied to each of the installed skins. This depends on the CSS code of the skins. The element that you want to change may be labeled with different IDs and classes in the code of the skins. Many skins use the same IDs, but some can have different ones. The CSS change that you make will be applied to all skins that have the same IDs that you've specified on the MediaWiki:Common.css page.

  • CSS changes can also be made per skin. Each installed skin has a corresponding CSS page in the MediaWiki namespace. The name of the skin is used for the name of the page. The changes added to that page will affect only the particular skin. For example, the page of the Vector skin is MediaWiki:Vector.css. That of the MonoBook skin is MediaWiki:Monobook.css, the one for the Modern skin is MediaWiki:Modern.css, and of the Cologne Blue skin it's MediaWiki:Cologneblue. To access such a page simply add the name to the base URL of the site (e.g. yourdomain.com/index.php/MediaWiki:Vector.css).

  • By default, only users belonging to the admin/sysop group can edit pages in the MediaWiki namespace. That namespace contains not only the CSS pages for style modifications but also the pages for changing the default interface text and messages. The user right that gives permission to edit the pages in that namespace is editinterface. So if you want users to be able to edit MediaWiki:Common.css, the CSS pages of the individual skins, as well as the interface messages, then you can either put them in admin user group or you can create a new user group and give the editinterface right to that group. For more information on user groups check out the tutorial on how to manage users, user groups and permissions in MediaWiki (or the shorter article version).

  • Keep in mind that CSS changes are only changes to the style, meaning that they are, so to say, cosmetic. So if, for example, you hide the buttons/links to particular pages, this doesn't mean that those pages won't be accessible. They can still be accessed by directly opening their respective URL addresses. This being said, hiding buttons/links to pages will practically stop the majority of the traffic to them.

  • After you make a CSS change, in order to see the result you should clear the browser cache and then refresh/reload a page on the site.

  • As we mentioned, each element (e.g. button, link, etc.) on the site is defined in the CSS code (or to be more precise in the HTML) with some ID or class. Some skins use the same IDs and classes, but others may have different ones. This means that a particular CSS modification may work for some skins but not for others. In this case the only thing that has to be changed to the code that you add to MediaWiki:Common.css is the ID of the element. There are easy ways to find out what the ID of an element is with the help of your web browser. For example, if you use Mozilla Firefox or Google Chrome, just click with the right mouse button on an element on the page and from the menu that appears select Inspect element. This will display at the bottom of the browser the HTML code (with the element highlighted) and the CSS code associated with it. A useful extension for this purpose for Mozilla Firefox is Firebug.

When it comes to making specific CSS changes you may find the following articles in our knowledge base useful:

Was this answer helpful?

 Print this Article

Also Read