As you may have noticed, I’ve made a change of theme a few days ago.
The new theme had problems initially with being too wide and having a CSS problem when rendered by the Safari browser.
Let me introduce you to a Firefox extension called “Web Developer Toolbar” and how it has saved a lot of my time when re-designing my blog.
There is a feature on Web Developer Toolbar Firefox Extension to view selected area of the current page’s CSS (among other features).
For example, let’s have a look at the screenshot below.
It’s quite obvious that the box below the post is too wide. The problem is that you wouldn’t want to traverse through all the theme CSS code one by one to guess and find out what CSS value you need to change!
Now, with Web Developer Toolbar, you simply go to “CSS” -> “View Style Information” and then click on an area on the current browser page. You will see the CSS that is “responsible” of the selected area and therefore easily identify which CSS values you need to change.
Upon clicking on the box area on the screenshot above, I could see straight away where the problem is:
So the next step is to change the width value to something smaller. If you are not good at guessing, then there is another nifty feature of this toolbar called “Edit CSS”. It allows you to edit your CSS on the fly and preview the changes live (without actually changing the real CSS value yet):
Once you’re happy with it, memorize the value, and then go change it on your actual theme CSS file.
I couldn’t imagine how many hours I would have wasted without this wonderful Firefox Extension. Download this extension now if you are going to re-design your blog/site soon.
NOTE: I’m not a web designer, nor a CSS expert. However, this tool makes me feel like one 
{ 14 comments… read them below or add one }
Do you know Firebug? It’s my recommend if you ever use
Oh God..I forget drop your EC today, now rearched 300 limit
I too feel like I know what I’m doing because of firefox and all the add-ons.
t100s last blog post..Good Timing
Good info, Michael. I should grab this add-on. It saves time modifying a theme. Lol! I don’t know how my site looks on Safari. I only have IE and Firefox.
This would be a handy tool bar to have.
You forgot to place the download link for it though. -_-
Luckily, it is very easily google-able. XD
I wonder if it can fix my CSS layout in IE.
My theme’s CSS works nicely in Firefox but the header seems a bit messed up when in IE. -_-
hi, nice blog! I’ve been using firefox and the web developer extension for some time now and it really is a big help! its nice of you to make a post and let more people know about it. more power to your blog!
jerics last blog post..Marketing your business and the Internet
Great addon will be useful specially when switching the theme and tinkering with it!
Nihars last blog post..GET FREE Windows Vista Ultimate Upgrade SP1, Adobe Photoshop CS3, and VMWare Workstation 6
Great find, mike. I just switch to new theme lately and this nice plugin should save me a lot of time.
Steve Yus last blog post..Fix Wordpress.com Stats and Google Analytics Plugins Not Working After Theme Change
Thank Michael, I have been looking for a tool like this for a little while now, i need to see how it works in my CSS layout.
Thanks and glad to share!
@Van: I’ve heard of Firebug but haven’t used it before
@Deimos: Whoops! Thanks for letting me know. I’ve updated the post with the linky
@Steve: Everyone’s been changing themes lately!
I have installed the toolbar, but haven’t really looked at what it can do.
I can’t count the number of hours I spent trying to solve CSS problems. Thanks for the tip on saving my many hours in the future.
I personally far prefer firebug. It is a godsend! Get it from the mozilla add-on site rather than getfirebug.com, as the latter does not have version 1.2 which is necessary for some of the highlighting features to work in firefox 3.
No problem, Paul. I might give that Firebug a try though as lots of peeps here talk good things about it. Well, at least not until I decide to change/redesign the theme again heh.
Yeh it’s like an epiphany… I remember when I discovered it, it saves me so much time. But even better is Firebug – with both installed you’ll be unstoppable. It all gets horrible when you check it in IE and you’ve got to figure stuff out the old fashioned way!
My views on both plugins:
http://www.redswish.co.uk/firefox-web-developer/
http://www.redswish.co.uk/firebug-for-firefox/
Nathan
Thanks, Nathan. I’ll remember it the next time I want to update my theme again!