MediaWiki/Theming

You can change the look and layout of your Mediawiki site. The place to start is the wikimedia groups' meta pages.

There is the design document and the info on skins or just dive into all the examples of user styles

How to chage the Logo

You can change the Logo of the wiki by altering the $wgLogo variable in LocalSettings.php to the name of the image you want to use as a logo. Please note that this logo should be placed in the /skins/common/images/ folder.

$wgLogo             = "$wgStylePath/common/images/freephile_sm_logo.gif";

How to change the favicon

You can change the icon that is displayed in the address bar of your browser by setting a value for $wgFavicon in the LocalSettings.php file

$wgFavicon          =  "http://www.freephile.com/images/logos/favicon.ico";

How to make your own skin

A skin generally has it's own directory, plus two setup files. If you wanted to create a skin called 'Happy' you would have

happy
Happy.php
Happy.deps.php

in the 'skins' directory.

The easiest way to create your skin is to copy the monobook skin and start from there.

You can create a skin all by yourself by following the steps provided below:

Go to your mediawiki directory;
Copy the monobook directory and name it with the name of your skin: happy;
Copy the MonoBook.php file and name it with the name of your skin: Happy.php;
Edit Happy.php and change the class name to SkinHappy:
```
class SkinHappy extends SkinTemplate;
```
In Happy.php, change the template class to have your skin name together with the word 'Template':
```
class HappyTemplate extends QuickTemplate;
```
Also in Happy.php, make the references to the skin match the names:

        $this->skinname  = 'happy'; // matches the physical directory name
        $this->stylename = 'happy'; // matches the physical directory name
        $this->template  = 'HappyTemplate'; // matches the template class name

In your happy directory edit the image and CSS files until your heart is content;
Edit and customise Happy.php as you please;

Making your Skin Available

To make your skin available sitewide, and the default skin, set it in LocalSettings.php e.g. set $wgDefaultSkin = 'happy'.

To let your users decide which skin they can use, you can enable user preferences.

Nice Examples

The skin used on this site is based on the excellent work of Paul Gu

I've seen some other projects that have nice mediawiki skins, but I never bothered to write them down. A quick search reveals several projects by Suse:

I hesitate to call it a 'nice example' because it doesn't seem all that compelling, but there is the mozilla project wiki https://wiki.mozilla.org/Main_Page I'm fairly certain without checking the wayback machine that developer.mozilla.org used to run mediawiki, with a very nice theme and lots of custom templates and graphics. Now they are running a commercial opensource wiki product.

Resources

The Layout Design Document might cover some relevant info, but a quick glance makes it seem that it's circa 2004.

The skinning manual http://www.mediawiki.org/wiki/Manual:Skinning is probably the most comprehensive and best introduction to how the skin system works aside from digging into the code in the 'skins' directory.