Joe Maller.com

Two little MonoBook styling hacks for MediaWiki

Recently, I’ve spent some time working with MediaWiki for Lila’s school’s web site. A small part of what I’ve been doing has been implementing an exisiting design onto the wiki backend. In an effort not to overcomplicate anything (think longevity) I built the entire design adaptation on the default MediaWiki MonoBook theme. Everyone who’s visited Wikipedia has seen what this looks like. Monobook is a very well constructed theme with clearly defined parts that degrade nicely without its stylesheets. So far, with the exception of these two small changes, I’ve able to do everything I needed to with the default page structure.

First change: Fixing bad portlet IDs

Editing Mediawiki:Sidebar allows for nearly complete customization of the sidebar links. Custom sections automatically get custom IDs which can then be styled. There is one thing that seems like a bug however: If a section heading has a space in it, the portlet ID will have an illegal name. Classes can have spaces in their selectors, but IDs can’t. Here’s what I did:

<div class='portlet' id='p-<?php echo htmlspecialchars($bar) ?>'>

and the new one:

<div class='portlet' id='p-<?php echo str_replace(' ', '_',htmlspecialchars($bar)) ?>'>

Simple enough, PHP’s str_replace is used to swap underscores for spaces. I’m still feeling my way around the MediaWiki codebase, so this might not be the best solution to the problem, but it does what it needs to with a very lightweight function.

Second change: Classes from page title

I needed to change the background of the globalWrapper element depending on the page, the way I accomplished this was to use the page-title. This has one initial drawback, namely that colons are not allowed in CSS class names. However the workaround above can be recast here with added benefit. Switching colons for spaces results in multiple class names, so namespaces can be styled too.

Here’s the old code:

<div id="globalWrapper">

And the new code:

<div id="globalWrapper" class="<?php echo str_replace(':', ' ', $this->data['titleprefixeddbkey'])?>">

This method would seem preferrable to adding a CSS import rule which would look for a custom-named file. Even though CSS load errors don’t break pages with visible 404 errors, they would slow down page loads and litter the server logs. Checking that the CSS file exists is somewhat costly, and I suspect MediaWiki’s cacheing isn’t something that can be quickly skimmed over and implemented.

There appears to be a pageCSS extension somewhere, the hooks are even specified in MonoBook’s header, but I couldn’t find a working download and CVS repository doesn’t seem to be working anymore.