Modifying Your MediaWiki Skin

So, you have a MediaWiki site up and running, you set up a local copy of the MediaWiki environment, you created a development environment and you have a wiki skin ready to be modified. Now what? Here’s where the fun begins.

What do you want your wiki to look like? If you have graphic skills great. Create a mockup and convert that image into standard css and html. If you are graphically challenged, find someone who isn’t and get their help. I called on PetWebDesigner.com to come up with the basic design, and I took it from there. (My daughter created the logo.)

For the sake of simplicity, let’s say that you name your skin MySkin. To modify your skin, you will be editing two files: MySkin.php, found directly in the skins folder and main.css, which is in skins/myskin folder. There is no need to touch anything besides these two files and your LocalSettings.php file, which is in the root directory.

Let’s start with changing the logo. I put the logo for The Pet Wiki in the skins/thepetwikiskin folder. Since I’m working on a few different wikis (check out The Met Wiki), it’s easier for me to keep the different logos for the different skins straight. After you’ve saved the file to the place you want, you’ll need to add a line to your LocalSettings.php file, located in the root directory of the wiki. Add or modify the following line:

$wgLogo = “$wgScriptPath/skins/myskin/YourLogo.jpg”;

If you keep the logo somewhere else, change the path to match where it’s coming from. That’s it. Your logo has now been changed.

The first thing I did, before trying to modify anything, was put a bunch of debug text in MySkin.php. Brilliant text like “Where is this,” so I could figure out the different elements and how to move them around. I modified the php file as little as possible. Most of the work gets done in the main.css.

A few things to keep in mind:

1. Each section of the page is its own div. No tables are used to create the page. Be careful with how you layer them or some may get lost. If a section gets lost, check and set the z-index correctly. They’ll show up again. (To use z-index, make sure that your position is absolute.)
2. More often than not, to change the location of any of these divs, you’ll change the padding  for the element in main.css.
3. The p-personal div (the login pod) is not connected to the other navigation divs. If you want to move it to the left hand side, you need to deal with it separately. All other left hand navigation will move when you move the p-navigation div.
4. The tabs at the top are actually done as a list.
5. If you don’t want to use a specific element and it’s getting in the way, hide it.
6. Make styles for specific elements that are not already defined. You can add as much as you want to tweak it to be perfect for you.

I wanted to change the search box to be front and center and to use graphics, so I needed to create a new function in the php file to handle the formatting. I then called the function from the class where I wanted it to go and hid the old search functionality, and walla, new search box added.

You will also need to take out the references to the monobook css from MySkin.php.

Change:

$out->addStyle( ‘monobook/main.css’, ‘screen’ );

to:

$out->addStyle( ‘myskin/main.css’, ‘screen’ );

And take out all references to other css files. Delete the following:

$out->addStyle( ‘monobook/IE50Fixes.css’, ‘screen’, ‘lt IE 5.5000’ );
$out->addStyle( ‘monobook/IE55Fixes.css’, ‘screen’, ‘IE 5.5000’ );
$out->addStyle( ‘monobook/IE60Fixes.css’, ‘screen’, ‘IE 6’ );
$out->addStyle( ‘monobook/IE70Fixes.css’, ‘screen’, ‘IE 7’ );

These did nothing to fix my skin, and caused me a lot of headache that was solved when I deleted them. Ironic that the files are ‘Fixes’.

If you’ve been following this series of blog posts, you should have set up source control. I suggest saving to source control when you’re happy with large changes. Don’t wait until the end of the day. You may find that you need to go back a few steps. Css changes are hard to remember, so don’t lose the good with the bad.

Test your wiki on multiple browsers before you release. I tested on FireFox, IE, and Chrome, but still got it wrong and went out with a skin that didn’t work properly on IE 7 (I had IE 8 installed). Css is treated differently in each browser. Make sure it works on the major ones before you go out.

Are you happy with what you have and are you ready to go live? Move the files over, including the logo. Move the skin files over before you move the changes that you make to the LocalSettings.php. Login on your live site and change your personal preferences to use your new skin. You won’t have the logo yet, but everything else should work. If you’re happy with what you see, reset your preferences to use the default skin. Change the following line in LocalSettings.php so that it uses your skin as the default.

Change:

$wgDefaultSkin = ‘monobook’;

to:

$wgDefaultSkin = ‘myskin’;

Move it over, and you’re done.

Just go out and play around with it. Use big numbers and crazy colors to figure things out. We built the whole development environment so we could have a good time and not break anything on your live site. Have fun.