How to theme any cms using firebug (and mediawiki as an example)

GFX9.COM share How to theme any cms using firebug (and mediawiki as an example), you can download now.

Often in my career as a web ninja, I've been asked to skin or theme open source projects to bring them in line with my clients brand. Depending on the project this can be more, or less frustrating (I'm looking at you Magento) but MediaWiki is one of the easier projects to work with because of the limited number of files and things to adjust. In this tutorial we'll go through the theming process I used to style the upcoming PSDTUTS Wiki, but the process, particularly using Firebug, could be applied to pretty much any CMS.

Theming an existing set of code, even if it was made to be easy to theme can be a daunting task. Here, I'll lay out how to get this done as quickly as possible, with the cleanest code that is pragmatic. Here are the steps we'll go through:

  • Evaluation - Evaluating the design you'll be working with, and the nature of the theming system
  • Thought Process - Learning the basics of CSS inheritance and specificity
  • Writing CSS - Actually getting down and dirty wrangling our design into standards compliant code
  • Using Firebug to find elements - Using the brilliant Firefox plugin (Get Firebug) to find, and figure out how to correct, the elements of your new design
  • Overview - Every good project get's evaluated.

The Project

So a quick word on the project. I was hired by Collis from Eden to theme a MediaWiki install for the upcoming PSDTUTS Photoshop Wiki they are working on. Here's the design I was given:

Evaluation - Sorting it out


The first thing to do when theming any third party project is evaluate how much work is needed by taking a look at the directory structure. In our case with MediaWiki, all of the editing will be done on two files inside of the /skins file (MonoBook.php and monobook/main.css) as well as uploading a few images. One of the great things about MediaWiki is that since we're only dealing with two files we can spend a majority of the our time fine tuning the design to conform to our clients specs, not figuring out where to make changes.

The MediaWiki files

After you sort out the files you'll be editing, it's important to evaluate if this will be a ground up re-write, or if you'll just be tweaking an existing design's colors and styling. My client only required me to adjust the default MediaWiki theme. Since we're not having to completely re-write the theme, I typically copy the files we'll be changing as backups on the server (in this case monoBook.php.backup and main.css.backup) and begin editing the original files to minimize the amount of time I'll have to spend.

The orginal theme vs Our new theme

Thought Process - Bringing the code to life

I'm not going to go into the entire process of converting a mockup of a website into a living, breathing website; but what we are going to focus on is finding the bits you want to change, and over-riding those in our template files.

One of the most amazing things about web development and design in the aftermath of the web standards movement is the consistent utilization of CSS to style websites and web software like MediaWiKi. Because of the work of our web geek fore-fathers (and mothers!), we can rest assured that any project we tackle will typically be utilizing these advanced technologies. Let's look into how we can leverage this for our styling an existing theme.

Cascading Style Sheets are called that because of a cascade or rules of inheritance that it follows. If you have an external style sheet that sets this rule:

body {
background: blue;

But then, later on in that same style sheet there is a second definition as follows:

body {
background: red;

The documents you are dealing with will actually have a red background because this was the last declaration that was made. In the same way, CSS will obey any rules that are more specific, as an example, if you have a style set on all

Similar content