How to Theme any CMS Using Firebug (and MediaWiki as an Example)

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.

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.

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 <ul> or unordered list elements like so:


		ul {margin-left: 100px;}

But then re-set that rule for lists with a certain class such as;


		ul.monkey {margin-left: 0px;}

Due to the rules of specificity, all the lists that have the class set to monkey will have no margin on the left hand side, while most unordered list elements will have the margin on the left of 100 pixels. This is amazingly useful and effective because you can just reset the styles at the end of your stylesheet for your particular project in order to make corrections to the style and bring in more in line with your new site! (see how I did that for this project at the end of the style sheet)

Writing our CSS - Getting down and dirty with code

We've explored a bit about how to correct the style and bring it into shape for your new theme, but let's get down and dirty and start writing some code. The theme that Collis came up with is basically a re-styling of the current "default" MediaWiKi theme into the colors and feel of PSDTUTS, so I knew that the background was going to be this color:

Easily done! I just opened up the "main.css" file we talked about earlier in the /skins/monobook/ directory and inserted the following code:


	/*Things added to make it look like PSDTUTS!*/


	body { background: #2b241e;}

The first line is called a comment, if you're already writing a lot of code (Css, Xhtml, Php, or C++!) you are probably familiar with comments. Comments allow us to leave information stored within our documents that will not show up on the end website, but allow us to remember what we were thinking during that late night coding session finishing your late project.

The next declaration is very clear, it just resets the background color for the body element. Due to the CSS inheritance rules that we already talked about, this background color will over ride the previously set background color because it is set later on in the document. All hail CSS!

Using Firebug to find elements - Finding the problems

We're now headed down the right path to getting our theme working and beautiful, but not every css element in your new theme will be as easy to find and correct as the very obvious <body> tag. In fact this has always been a major obstacle in theming all kinds of CMS products.

One really fantastic way to track down this random div's and span's is to use a hugely valuable Firefox plugin called Firebug.

If you don't already have these installed, please install Firefox as well as Firebug. Firebug is a Firefox plugin that will make your web development workflow much simpler! I'll leave it to you to explore their site to find all the amazing things Firebug will make easy for you, we're going to use it simply to identify elements in our theme and to find out how to identify the selectors to use in your css file in order to change them.

Easier said than done eh? Let's see a quick video:

Overview - Looking back at our work

Hopefully you now have a better understanding of how to get started theming a wiki, or any CMS in fact.

In order to give you an idea of what my process is like, I recorded it while working on the wiki. If you have ideas for "speeding up" this process, or have a different way to do things, please, let me know in the comments!

(Music courtesy of JustWaitSee)

You can view the finished project at the PSDTUTS Photoshop Wiki site, though the project hasn't officially gotten off the ground, so don't expect to see too much there yet!

Enjoyed this post? Your vote is always appreciated!! Delicious StumbleUpon Float Digg

Comments

Add a Comment

Note: We use Gravatars on NETTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!

Trackbacks

Leave a Trackback

FlashDen	Flash Components
AudioJungle	Music Loops & Sound Effects
ThemeForest	Site Templates & Themes

PSDTUTS	Photoshop Tutorials
VECTORTUTS	Illustrator Tutorials
AUDIOTUTS	Music & Sound Tutorials
NETTUTS	Web Development Tutorials

FreelanceSwitch	Freelance Advice
Jobs.FSW	Freelance Jobs
FaveUp	Design Inspiration
Envato	About Us