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.
How to Theme any CMS Using Firebug (and MediaWiki as an Example)
May 29th in Tools & Tips by Joshua Blount
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!
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Andrei Constantin May 29th
ay ay, nettuts just outdone itself with this tutorial and consolidate even further its position on the web
thanks a lot for a nice write-up and hope to see more to come from Joshua.
hands down on this one
( )Adis May 29th
Great job, really nice tutorial.
I do the same type of skinning and never have i heard of firebug (runs of researching… )
Thx again!
( )Collis Ta'eed May 29th
I love the Digg link: “…MediaWiki as an Exam”
Great work on the tutorial Joshua!! I love Firebug
( )Abdul Akbar May 29th
This is great tutorial. I love nettuts and your sister site psdtuts.
Thanks alot.
( )Michel Morelli May 29th
Great tutorial. Tnx. I will use it to enlarge my drupal italian portal site (a wiki section is wellcome :D)
( )Neil May 29th
I’m always styling a CMS of some sort, the way in which I styled it was go back and forth between the page and the css file, firebug definitely helps me out.
( )D. Carreira May 29th
Firebug is also good when I need to deploy EXT-JS based applications.
David Carreira
( )Jesus DeLaTorre May 30th
Very nice post. I am so glad that I added you to my rss reader.
( )Ian Yates May 30th
Another useful one for the files… Was interested actually by almost the first thing you said (I’m looking at you Magento).
( )I’m about to embark on a Magento project; does it present problems with skinning?
Ale Muñoz May 30th
When dealing with “make this thing nice” projects, I’ve also found Stylish to be a really useful tool for quick tinkering with CSS.
Firebug + Stylish = CSS tweakin’ heaven : )
Nice post, BTW
( )wolferey May 30th
Great tutorial, but you should check out the site in Opera, its not displaying entirely right.
( )dariusdr March 4th
Yeah, the comments section are pretty much messed up in Opera (I’m using version 9.63).
I’m guessing the same holds true for the other tutsplus sites.
( )Myke Cave May 30th
I’ve been using the XRAY bookmarklet for some time now just to identify specific divs and certain attributes. I had used firebug before but never caught onto it because I was so used to using XRAY.
I think I’ll give it another go as it seems its a little more in depth as far as editing is concerned.
But a great tutorial. NETTUTS and PSDTUTS are quickly becoming some of my favorites in my rss reader.
( )Daniel May 30th
what a job here ! great! thanks a lot. Very useful ressource site!
( )Robin May 30th
Just yesterday i started working on ManUtd Wiki on my ManUtd blog. I’m a fan of Web Developer FF plugin, but this is very very very helpful. Thank you so much.
( )Ben Griffiths May 30th
This is cool - mediawiki is a great aplication and most skins out there for it suck! This is a great way to start making your own
( )Peter Butler May 30th
Great Tutorial, been using firebug for quite a while now and it’s definately one of those ‘must have’ tools
( )Dan May 30th
Great tut!
( )Your link to MediaWiki in the opening paragraph is broken - you’ve put .og instead of .org
Just a heads up. Looking forward to your next tut.
Jbcarey May 30th
Can’t believe how much I’ve come to rely on firebug in my designs…. it’s absolutly amazing!
and another stunning tut….
( )Melvin Nieves May 30th
I’ve had success with the similar ‘Web Developer’ extension.
http://chrispederick.com/work/web-developer/
(I’m not affiliated with them at all)
( )Hudson May 30th
Just spotted…
“but MediaWiki is one of the easier projects to work with” - link to MediaWiki is wrong (.og instead of .org)
Great article though. Top banana.
( )Erik Reagan May 30th
I’ve been using a very very similar process for about a year now. I started with the Web Developer plugin for FireFox (Which I believe Melvin Nieves mentioned and linked above) and I ended up with Firebug and Greasemonkey and my weapons of choice. Safari also has a developer feature built in but I believe Firebug to be a little farther ahead overall.
Great write-up
( )Snorri3D May 30th
cool tutorial and i love the video it got a nice sound and you can actualt here clearly what he is saying witch very often is a big problem in tutorial videos.
Thanks alot
( )Zach LeBar May 30th
AWESOME! I loved the tutorial, I loved the video portion, because it was just simply easier to show how it was done. keep up the good work. i look forward to more.
now to go out and dload firebug to help me skin my latest joomla project.
( )Rich May 30th
Stellar Job!
( )PannonDesigner May 30th
Wow. Fantastic. Can you write a tutorial about how to create a joomla template? :D:D
( )Eric May 30th
I can’t even remember what I did before I discovered firebug. It’s probably my most used tool.
( )John May 30th
Cool time lapse video. All tuts should have one. Only display the output though. No need to see you switching around between browser, editor, etc. Going to give me a seizure.
( )endorphine May 30th
With web developer you can edit and save directly on Firefox.
( )https://addons.mozilla.org/en-US/firefox/addon/60
Dave May 30th
Good tutorial, I also use web developer as well as firebug.
How did you do the screen captures?
( )Jeff Finley May 30th
This is really helpful, we’re doing a lot of open source web app skinning and Firebug is awesome for figuring out what is screwing with your layout!
( )Andrew Pryde May 30th
Great Tutorial, Great Addon!
That has just saved me about 2 hours a day every day. I spend so long integrating my designs to wordpress and other CMS’s that I spend 3 hours designing and then another 3 splicing and finishing.
Thanks allot
Andrew Pryde
( )Nate May 30th
Very nice stuff Joshua, love the tutorial.
( )Christian Mejia May 30th
This was an excellent tutorial! I agree with Andrei.. I hope to see more from Joshua.
( )Chris McCorkle May 30th
Long live FireBug! And NETTUTS!
( )Tritos May 30th
Firebug is extremely helpful in web design and coding, especially if you’re just learning. Thanks for showing everyone this helpful tutorial!
( )Matt Radel May 30th
Swell tut - I have to say that using the Aardvark Firefox Extension would work much better for ya than Firebug.
( )Danny May 30th
Firebug is the best thing out there
( )Shane May 30th
I was unaware of MediaWiki until this tutorial. Gotta say that it’s well written and bookmarked, for if I never need to use it, I’ll know where to go.
That video’s a nice touch - good thing I don’t suffer from epileptic seizures though.
( )Annonymous May 30th
PSD2HTML.com is also a great resource.
( )They can take any static image, and turn it into a valid markup web design.
Including the fact that they can theme any CMS for an additional $200.00
Joeys May 30th
There appears to be a problem with the footer, the left menu overlaps it.
( )Joshua Blount May 30th
@Matt Radel: Aardvark looks great, but Firebug has a lot of additional features not show in the video, and I like to keep just a few add-ons / extensions installed.
@Joeys: That overlap was in the original mockup / design, so you’ll have to see Collis as to whether it is a bug, or not.
@everyone: Thanks again for the great feedback!
( )Banzaiaap May 31st
Great tutorial. One quick question: How did you edit your css that is on the server, because as soon as you saved and reloaded the page the changes had come through!
Thanks.
( )Erik Pettersson May 31st
Really great tutorial and introduction to firebug for designers. I use firebug all the time and won’t last a minute without it.
( )Joshua Blount May 31st
@Banzaiaap: I had a “live” version of the css file open and when I saved the file locally, Transmit 3 (http://panic.com/transmit )uploaded it for me so that I could refresh the page. Another one of the beauties of working on a mac is working with great software.
( )ANDiTKO May 31st
FireBig is a very useful plugin.A must have for designers and developers.Nice tutorial.
( )You can also use a plugin called “Web Developer” for FF.
MrQwest May 31st
That was a really good tut. I’m quite impressed with Firebug. I did have it installed on another machine, but it seemed far too complicated to learn in a short space of time, so haven’t touched it since. However, I shall go back and have another look!.
Chris Pederick’s web dev toolbar has been my weapon of choice so far!
( )Banzaiaap June 1st
@Joshua
Okay, I’ll look for a similar thing for Windows..
( )Lukas119 June 1st
It´s cool stuff guys, just keepin´develop it - that´s the right way you do it
Firebug rocks!
( )James June 1st
Great demo of what can be achieved with firebug… Great tut!
( )Bruno Gurgatz June 1st
Nice tutorial! very useful.
This gave me an idea. Why not create a portal to the “tuts company”? where you can spread the tutorials, and create other categories like “motion tuts” for videos, and another for sound, etc…Think about…
( )Garrett June 1st
Although Firebug is really powerful, I really like CSS Edit.
( )Mukund June 2nd
Hey great one!! I’m already using Firebug!!
( )wolfcry911 June 2nd
Joshua, nice tutorial. I love using Firebug.
Can I give a piece of advice? Turn off Mail when recording a movie. I just spent 10 minutes trying to figure out why my inbox was empty after receiving the new mail alert (at 1:45)!!!
( )Joshua Blount June 5th
@walkcry911: Good call, the same thing happened to me when I was re-watching the video. I’ll make sure to plan a bit more in advance next time. Thanks!
( )Saswata June 5th
that pulls down the surprise that Collis must b dieing to post on psdtuts! neway, it wud b gr8 once the site is up and running. meanwhile we wil feast on the rest!!
( )Eric Boyer June 18th
Great tutorial, I’ll be checking this out more in depth later on.
( )Ali June 20th
Time to try firebug! :]
( )Braden Keith June 23rd
After using firebug for several weeks I deem it as the best plug in ever made. I’ve used it so many times and it cuts down on editing so much.
( )Rodrigo Ferrari June 24th
great tutorial =)
( )Taylor Satula July 1st
They need to make firebug for ff3
( )Martin July 2nd
@Taylor: Try the firebug beta for ff3!
( )Windows Themes September 5th
i use firebug since it has came to life. Is a must have addon for a developer
( )Jordan Payne September 25th
Brilliant Tutorial, thanks mate!
( )FaTMollY October 24th
At me such question
( )I can not change the menu in Windows, it looks on new why that….
Help to adjust… At me of a Window 98
Piyal Kundu November 3rd
I am using Firebug for last 3 months. It is a beautiful tool. In a complex project without this tool solving various UI related problems is very difficult. So it is a must have tool for any web developer.
( )George February 26th
I’m sorry. The “I love Jesus” comment at the beginning of your bio just put me off. I don’t see the relevance, and frankly I have a strong bias against people who tell me their religion up front.
( )CgBaran Tuts April 30th
Excellent tutorial its very useful thanks
( )