Customizing MediaWiki CSS

From Zanecorpwiki

This article deals with changing the CSS associated with your MediaWiki skin. Also refer to the general article on Customizing MediaWiki Look and Feel.

First, a brief overview of how MediaWiki pages get rendered. There are three common kinds of pages in the default MediaWiki installation: article pages, category pages, and special pages. These all have some content. Article pages content is completely user generated, category page content is a combination of user content and a listing of pages tagged as part of the category itself, and special pages generate special content, often to control some aspect of the wiki or how the wiki renders.

However it is generated, the content is combined with other structural elements which are laid and according to the 'skin'. If you look in the MediaWiki install directory, you'll see a sub-dir called 'skins' where the skin information is kept. The directories in this skin directory correspond to the different skins available. MonoBook is the default, best supported, and generally all around best skin for normal use.

Creating or modifying the structure of a skin is out of the scope of this article. However, you can greatly influence the look and feel of a skin by changing the CSS associated with the skin. For instance, to achieve the stock, monochrome look of this wiki, we removed the gray wavy background that's in the upper-left hand corner of many wikis and heightened the contrast of the body by opening the file 'lt;wiki home dirgt;/skins/monobook/main.css' and changing:

body {
        font: x-small sans-serif;
        background: #f9f9f9 url(headbg.jpg) 0 0 no-repeat;
        ...
}

to

body {
        font: x-small sans-serif;
        background-color: #e8e8e8;
        ...

I recommend copying the changed files to to 'lt;original namegt;.orig' before making changes (e.g., main.css.orig).

You can use firebug to inspect the wiki page and determine where and how style elements are defined.

For reference, here's the probably incomplete and possibly out of date list of stuff I changed for this wiki:

1. got rid of the upper right hand background image as shown above
2. darkened the body background
3. changed '#p-personal li a' to show black, underlined links
4. changed '#p-personal li a:hover' to show black on white
5. added '.portlet a' selector to change all portlet links to grey
6. changed '.portlet ul' to kill the list-style-image(: none), and change the list marker to black
7. grey scaled the 'powered by mediawiki image' (lt;wiki installgt;/skins/common/images/poweredby_mediawiki_88x31.png), upped contrast and downed brightness
8. did same for the 'external link' image ((lt;wiki installgt;/skins/monobook/external.png)
9. killed selections for visited and active links
10. made basic link grey with bottom border (not underline, so I can make the thing faint)
11. basic link goes white with black background when hovered (had to add new selector for external links as well since the external link selector is more precise)
12. killed the bottom border (underline) on portlet links
13. changed the 'pre' border to black
14. greyed the '#p-cactions li a'
15. changed the '#p-cactions li a' border to black
16. hid the 'talk' tab, along with the user page etc. with 'display: none'