jonobacon@home

Archive for November 24th, 2005


Posted on November 24, 2005 - by jono

Customising MediaWiki

OK, I have had a few requests from some of you asking if I could knock up some instructions about how to customise MediaWiki to not look like a wiki, but instead resemble a normal site. Instead of giving you a step by step guide about how to do it, I will instead just tell you the changes that I made and the files that you need to know about.

Now, before you begin, bear in mind that wiki pages have a cache. It is likely that you are going to make changes to a page and you will not see the results immediately. You have a couple of options here. Firstly, you can hammer that F5 key into oblivion. The other option is that you add ?action=purge to the end of an URL. This should purge the cache and you will be, as they say in some parts of London…golden.

Getting started

Start by going and grabbing one of the many MediaWiki skins and pick one that looks as close to your final design as possible. I picked this one. Now install the skin into your mediawiki skins/ directory and update LocalSettings.php to set $wgDefaultSkin to the name of the new skin. In the case of the skin I chose, I replaced the MonoBook skin, so I renamed my old skin and then installed the new one.

Reskinning

Reskinning is largely a case of commenting out the stuff that you don’t want. Inside the skins/ directory you will see a main file for your skin (such as MonoBook.php). This is where most of the skin layout happens. Identify something that you don’t want on the page, and then load up this file and comment it out. As an example, I didn’t want any of that Powered By information on the page. Inside the skin file, look out for the code that resembles that block. In the skin I chose, much of it had comments to indicate where it is. So, the code responsible was:

<div>
    data['poweredbyico']) { ?&gt;
        html('poweredbyico') ?&gt;

    data['copyrightico']) { ?&gt;
        html('copyrightico') ?&gt;

</div>

Just add some comments around it:

    data['poweredbyico']) { ?&gt;
        html('poweredbyico') ?&gt;

    data['copyrightico']) { ?&gt;
        html('copyrightico') ?&gt;

</div>
--&gt;

Reload and it should work (remember you may need to purge the cache or hammer F5). Now go through the rest of the page and pick out the other sections that you need to hide.

Changing the design

In the theme I chose, there is a main image on the page. I simply right clicked the image and saved it to my disk, then fired up the GIMP and created a new image, using the same image dimensions (actually I cheated and made it a little bigger). Here is my new image:

You can then upload the image to the same place on the web server to replace it and as such see it in the page.

One thing to bear in mind is where the image and the CSS meet in the design. If you look at the previous image, you can see that the red bar extends out a bit at the right. This bar then hooks up with the top background image:

This image is repeated across the page by the CSS. The main css file, main.css can be found in the skins/monobook directory and you need to edit:

#titleBar {
    background: url(titlebar_bg.png) repeat-x; /* blue and white background */
}

Restricting logins and adjusting edit links

When I was skinning my MediaWiki installation, I wanted it to only allow edits from a single account – the admin account. The primary function of the wiki was to enable a number of admins to edit the pages without logging into a shell or requiring a huge CMS. The MediaWiki documentation about this was rather confusing as it did not clearly differentiate between the versions prior to and post version 1.5. There are however some key changes.

For versions later than 1.5, you need to add these settings to LocalSettings.php after the require_once( "includes/DefaultSettings.php" ); line:

$wgGroupPermissions['*'    ]['createaccount']   = false;
$wgGroupPermissions['*'    ]['read']            = true;
$wgGroupPermissions['*'    ]['edit']            = false;

Check the documentation about what these settings mean.

When you add a new section to the page, you will typically see the edit links appear. This is rather unsightly, and I wanted to be able to turn this off. There is an official way to do this, but it did not work for me, so I just went into a file and commented out the code that displays the link. The problem is that I can’t remember which file, so you will need to look for this yourself. :P

One thing I certainly wanted to change was to move the edit links from the sidebar to just underneath the main content of the page. The first thing was to head over to MonoBook.php and comment out the editing tools block. I then jumped to the footer

<

div> tag and added a slightly modified editing tools block:

data['content_actions'] as $key =&gt; $action) { ?&gt;
    <a>"&gt;

        </a>

Finally, I jumped to the top of the sidebar column (called column-one) and added an unordered list that displays some hardcoded links to the main pages on your site.

You can see the results of my work on the LUGRadio Live 2006 website. You also really check the MediaWiki FAQ as it is quite expansive.