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:

1. Go to your mediawiki directory;
2. Copy the monobook directory and name it with the name of your skin: happy;
3. Copy the MonoBook.php file and name it with the name of your skin: Happy.php;
4. Edit Happy.php and change the class name to SkinHappy:

   class SkinHappy extends SkinTemplate;
   

5. In Happy.php, change the template class to have your skin name together with the word 'Template':

   class HappyTemplate extends QuickTemplate;
   

6. Also in Happy.php, make the references to the skin match the names:

       function initPage( &$out ) {
           SkinTemplate::initPage( $out );
           $this->skinname  = 'happy'; // matches the physical directory name
           $this->stylename = 'happy'; // matches the physical directory name
           $this->template  = 'HappyTemplate'; // matches the template class name
       }
   

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

Nice Examples

1. http://en.opensuse.org/Welcome_to_openSUSE.org
2. http://www.mono-project.com/Main_Page
3. http://beagle-project.org/Main_Page
4. http://en.opensuse.org/Welcome_to_openSUSE.org
5. 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 nice theme. Now they are running a commercial opensource 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.

Cascading Style Sheets = A technology that deals with the presentation of content on the web