↓Firebug is one of the reasons that I changed to Firefox (from Camino, a faster, less memory intensive browser). It is so handy for checking under the hood of websites and anyone who does anything with CSS should know how to use it!
Firebug’s good for HTML and javascript too, but I don’t use it for them as much.
I was trying to find a video tutorial to show people on the Thesis forums how to use Firebug. However, the ones I found were either too old (Firebug has come a long way in the last year or two), or they were a bit long and rambling.
So, I decided to make one myself. It’s 6.5 minutes (the others I found were double that!) and gives an overview of how to use Firebug, including installation. Feel free to ask questions about it in the comments below!
Using Firebug for CSS from kristarella on Vimeo.
In you need a slightly sharper version, you can watch the quicktime video.
{ 91 comments… read them below or add one }
Beautifully done. I actually had fire bug open on your site when I saw the tweet about this post.
Thanks for all of your help Kristarella.
Brilliant video. Many thanks to you for the work you put into this.
Thx, that was an inspiring video.
Awesome. For novices like me – this video is a godsend. Thanks.
And must say that your new-look blog – especially the frontpage feature boxes of posts and photos and their archiving-abilities are fantastic [ - need something like this myself as I have too many travel images after 20 years on the road across the planet ].
Regards MRP AKA thecandytrail
Thanks for making this video and sharing your knowledge. This will certainly help me in customizing CSS based blog themes and web templates.
Many thanks…I had installed Firebug about a month ago but been really lazy about putting it to use! Your video has inspired me!
If you’re going to do very much of this kind of thing, I’d recommend paying for a dedicated CSS editor. For the Mac, CSSEdit is the standard, and there are a couple of excellent ones for the PC. The interface, feature set, and overall organizational tools of the dedicated editors are better.
Great video! Thank you.
Wow, very helpful video. I installed Firebug some time ago because I’d read about how handy it is. It’s just been sitting there unused, since I never bothered to figure out how it worked. After watching your video I immediately used Firebug to solve a CSS problem that’s been plaguing me. For a CSS amateur like me it’s a great tool. Thanks for opening my eyes.
Nice tutorial.. and I like your website BTW how do I automatically expand the comments automatically in Thesis Theme like I see on this page?
I am sold! I am always trying to figure out how something works. Your video not only turned me on to a great plug in, it also showed me how to use it.
Keep doing more of these for us Thesis users!
Owen
Thanks for the video. I cant live without foxmarks, firebug, webdeveloper toolbar and measureit, glad you share this screencast.
Can you explain how you did this screencast? what program did you use?
And what about the shadowbox effect on the video? its somekind of plugin or you put the code by hand on wp?
Thanks, keep up the good work, your new design is awsome
Thank you everyone for the positive feedback! I’m glad you found it useful.
Mike — for someone who is doing this thing all the time, dedicated systems such as CSSEdit or Coda and your own local server are excellent. For someone who is just learning CSS, wants to make their site pretty and that’s it, I absolutely do not recommend buying a 29.95€ program (that’s $60 here), when Firebug is free and very useful. I’m also not sure CSSEdit is as useful for checking out other sites. You already browse in your browser, so when you get to a site you want to investigate, using Firebug you don’t have to go somewhere else.
Brian — I figured that was the case for a lot of people. I have no idea how I first learnt to use Firebug, and I want to tell people to install it, but it wouldn’t be useful if they didn’t know how to use it. It’s not a super intuitive plugin.
Paul — The comments on this page have the default behaviour for comments in Thesis, except for a bit of meta styling.
ruigato — I used iShowU to record the screencast and SimpleMovieX to clip a couple of blunders. I know that Rick uses Screenflow though and there’s another nice looking one (for mac if you’re on mac). I bought iShowU quite a while ago and it was one of the best (while affordable) at the time, don’t know if it still is.
Shadowbox effect is the WP plugin Shadobox JS.
Cheers!
Wow! thanks very much. welcome to my blog roll too btw :)
Thanks Jye!
Hey, thanks for a useful video. And your revamped looks wicked :)
YOU ARE A GODDESS :) seriously. THANK YOU for taking the time to make this video. I’m sooo sold now on getting thesis..and with firebug I have a huch I’m gonna be able to tweak my way to creating a design that’s ‘me’ :) THANK YOU for your help. Looking forward to getting to know the theme…and surely appreciate your recommendation on firebug. Your site is sooo you…great job branding yourself :)
Nice FireBug introducing video ;) I use <a href=” as well. Actually I use FF mainly for this two special tools(of course, addons at all are great plus for FF itself, like <a href=”-great plugin with this ). I cannot imagine customizing my web page without them :P Thank you once more for the great video and I am looking forwar to hear your voice soon again ;)
hmm something wrong with my comment :D
I wanted to say: I use Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60) as well together with FireBug (and other great FF addons/plugins like Greasemonkey…). They can be very helpfull in web customizing so dont worry to use them ;)
I’ll have to say, this is a helpful one especially for web designers tinkering with CSS. I’ve been using Firebug quite a awhile and I considered it as one of my needed tools when dealing and investigating CSS.
Thank you so much Kristarella for this great video.
:)
Super video, Kristarella!
WOW! I have never heard of this plugin before… fantastic! It will save me sooooo much time! Thanks for such a great overview. I’m off to download it now.
Cheers!
I am new to editing themes in CSS, and this tool would certainly help me. Your video has inspired me to do the thing I have never tried before. Thanks for posting.
kristarella – you. ROCK.
I do not remember exactly how I wound up here but I am so thankful I did. This video was very good. I have been using firebug for a few months now, however I didn’t understand a few simple concepts until I watched the video! Thanks!
Your (new) layout is awesome!
You’ve done a really great job!
This is so great, thanks very much.
Another thing, Firebug doesn’t yet work with the Firefox Beta (latest release) the last time I checked (today). Cheers!
-Mig
Hi there Kristarella. Always appreciate your work, even in Thesis forum. You’re awesome. And the new site is just gorgeous and clever.
I’m just curious where is the CSS code that we saw in Firebug, located in Thesis? Or do we just customize that particular code in the custom.css?
Thank you. Great job.
Winmac, the styles might be in style.css or generated in another file. You should always put your changes in custom.css.
Hi Kristarella,
One quick question about Firebug, how do we save files after making the changes? I do not see any save button… please help….
Taqi — You can’t. As I said in the video, Firebug doesn’t make any permanent changes and the best thing to do is to change one or two elements at a time to decide the style you want and then write that into your style.css in your text editor.
How do we put our changes in custom css?
Dante — You need to type it in, as with any other custom styles.
Excellent! I just started using Firebug. Your instruction are very easy to follow.
Thanks
Perry
Life Design Recipes
I haven’t installed it yet .. one of my friends, a developer, told me that it will make firefox a lot slow .. true ?
dinu, in my experience (and due to reasons explained in the Chrome comic) Firefox is a hog that continues to eat memory until it needs restarting. People experience that in different degrees and it probably is not helped by Firebug or any other addon. Any addon can add to Firefox’s slowness. I’m not sure how slow it is compared to a bare Firefox because Firebug is one of the very few reasons I use Firefox over Safari or Camino.
Dinu, in my considerable experience, Firebug does cause Firefox to slow to a crawl after it’s been open for a period of time. I hate that about it, but I put up with restarting the app because I can’t live without Firebug.
Thank you, thank you, Kris, for taking the time to do this. For those of us who just know enough to be dangerous, this can help us be more dangerous. I don’t seem to learn any other way, but at least I am only a danger to myself. I love this already!
Wow, thank you so very, very much for this… Great video.
I agree completely with Jo Anne about knowing just enough to be dangerous. I’m currently working on moving from blogger to wordpress and there is lots to do. This will be a godsend.
Thanks everyone! Glad you’re enjoying it.
Wendy, that’s exactly where I started! I learnt CSS with Blogger and then moved to WordPress. Check it out!
Kristarella:
I came to this tutorial a while back and it was over my head. As I start to pick up CSS, this is really helpful. Thanks for taking the time to demonstrate a great tool!
Joe
Thank you! I was tasked with fixing someones site in a matter of a couple of hours and although I have some CSS experience- I simply could not figure out where the problem was located.
The theme was acting goofy and and could not pinpoint it. I never realized this plugin existed and that it could be this easy.
Thank you again.
Please HELP!
I am editing another theme and have found specifically where to edit and make my changes. However, I cannot find that file that it is referencing to. From what I know all Wordpress is PHP and the file that Firebug seems to be pointing at is HTML.
Is there a method in Firebug to find that steenkin file?
I know you said you were not using Firebug for HTML but I thought you may be able to help.
Thanks in advance.
teevee — When you are viewing the styles for an element there is a link to the very right of the window on the same line as the CSS element selector. That is the file that the particular CSS comes from. If it says it’s an html file then the CSS is probably added directly to that file. If you can’t find it in the file it might be inserted by a plugin.
Great video. Was extremely helpful. Great presentation.
Really appreciate you taking time out to do this video tutorial! It was a HUGE help for someone like me who knows absolutely nothing about web designing. Thanks again! :)
I was a little hesitant at first to try out Firebug (don’t know why!), but … after your tutorial I’m in love with it! Great Video!!
THANKS! This has been a miraculous help.
And by the way, Thesis Theme is NOT as user-friendly as it’s made out to be. I bought it thinking it would be MUCH more user-friendly. The truth is that YOU MUST LEARN CSS TO USE IT. I’ve realized that the reason everyone’s promoting it is that they’ve got a good affiliate program. :)
Fortunately, you’ve made it functional, Kristarella. You should get a kickback from DIY considering they even reference your video on their site. I’m serious, too.
Hey FrustratedGuy, thanks for the compliments.
The truth is that the initial promotion on Thesis was a little overblown. You could customise it more than any other theme without touching any code, but that was more about selecting what to display in bylines, how to display posts, the size and layout of your site etc. It wasn’t about things that usually need to be done with CSS and while I think it’s silly to think that you can make your own amazing custom website without learning a bit of CSS, someone who hadn’t done a website before wouldn’t know that.
I think the advertising is more accurate now with videos on the front page of DIYthemes and stuff like that. I’d like to think that people haven’t promoted Thesis and misrepresented it just because of the affiliate program, sadly “easy” is subjective and depends on your background.
There are a few themes that can change colours and that sort of thing more easily than Thesis, but they are much more expensive and are less flexible in other ways. The only other way to make a website without knowing any HTML and CSS is through a WYSIWYG editor, which usually produce disgusting code and are not really SEO friendly.
Good luck with using Thesis and if you’re on Twitter check out the #thesiswp tag. You can post questions there with the tag too and usually get a pretty quick response.
Thanks so much for this tutorial kristarella. If you can believe it, I JUST discovered the greatness that is Firebug – makes CSS modification SO much easier. Thanks again, I look forward to getting to know you better as I embark on this journey from design ‘noob’ to design star. Cheers!
Awesome article.
p.s. you mam’ have a beautiful accent :)
Thanks Toni :-)
Hello,
Although it is an off-topic question, I would like to ask you what software you used to record this video. I would love to do the same in my mac ;)
Regards
Hi Claudia,
I used iShowU. It’s very good and easy to use… it would be worth trialing the other things that are out there as well. There wasn’t as many decent screen recorders at the right price when I bought iShowU. There’s a good round up of them on AppStorm.
Great little video! I like this much better than Safari’s version.
Cheers Lena,
I find the Safari Webkit Inspector is usually sufficient for my needs and I prefer to use Safari over Firefox for general browsing (at some point I got tired of Firefox bloat), but I do open Firefox when I need to do more heavy firebug manipulation.
Kristarella,
I’ve installed Firebug a while back, at the suggestion of a friend, but didn’t realize until now just how useful it is. I searched for a how-to on this after a discussion about browsers, in which some friends told me they’re only using Firefox because of this very useful add-on. Thanks for producing this excellent instruction video.
Manny
Thanks for the concise demonstration.
Thanks for the video, I was able to edit the page, however I am not sure how to save the changes. how do I go about doing that?
Dixie — you cannot save the changes directly from Firebug. You just need to use it to figure out what changes need to be made and then you copy/write them into whatever CSS file you use. For Thesis that’s custom.css, for other themes it might be style.css or something else.
Thanks for the advice.
many thanks – finally I get how to use this handy little tool
Great video, i very usefull for me.
thanks kristarella
2 firefox extensions that may help making changes made in Firebug permanent:
FireDiff: https://addons.mozilla.org/en-US/firefox/addon/13179
- Lets you see all changes made by Firebug and the application to the CSS and DOM. This would allow you to make a bunch of changes without worrying about forgetting what you did. You still need to manually update the server’s CSS though.
FireFile: https://addons.mozilla.org/en-US/firefox/addon/52365
- Allows you to save changes to CSS files directly to the server as many people want. You’ll need to be able to run PHP on your server as it requires a PHP file to be uploaded and the site to be registered. Seems to be in development and I haven’t quite got it working yet.
Helpful video. Thanks!
Thanks a million for the video. I was looking for a free tool for checking the CSS code in wordpress blog themes and now with the help of firebug and your video, I am able to do the ask :)
Thank you sooooooooooo much for this tutorial I was so struggling!!
Awesome tutorial You rock kristarella!
Thank you…I could not figure this out on my own…
Brilliant firebug video! I learned more watching this than had I surfed the web for 4 hours
Thanks for giving this video to us. I was really looking for a video on Firebug.
I use Firebug only for javascript debuging, and web developper plugin for CSS, but watching your video made me think that I’m going to change my habits and use Firebug for both.
Thanks.
Great video thanks!
Hi Kristella – thanks for you continued help. As someone new to building client sites in Thesis, I’ve coming to check here first for answers to what I know must be somewhat-newbie questions. But here is a tough one for you… I’m commenting it here as I’ve used Firebug to try and diagnose it, without luck.
At http://agakhan1.tonyfleming.org, I am using a function to embed the WP login in the upper right corner, opposite the nav menu. In my custom_functions.php code, I have
/* Login in Nav Menu */
function nav_login () {
?>
<div id="nav_login"><font face="Arial" size="2">
<?php
global $user_ID;
if(!$user_ID ) :?>
Welcome, Guest
<?php else :?>
Welcome back, <?php
global $current_user;
if ( isset($current_user) ) {
echo $current_user->user_login;
}
?>
<?php endif;?>:<?php if (!(current_user_can('level_0'))){ ?>
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<label for="user">User Name: </label>
<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> <label for="password">Password: </label>
<input type="password" name="pwd" id="pwd" size="20" />
<input type="submit" name="submit" value="Login" class="button" />
<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</form>
<a href="<?php echo get_option('home'); ?>/wp-register.php?action=register">Register</a> | <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
<?php } else { ?>
<a href="<?php echo wp_logout_url('$index.php'); ?>">logout</a>
<a href="<?php echo get_option('home'); ?>/wp-admin/">admin</a>
<?php }?>
</font></div>
<?php }
add_action('thesis_hook_before_html', 'nav_login');
and in my custom.php file, I have
.custom #nav_login {position:absolute; top:1em; right:15em; background: #ffffff;}
The problem, as you can see, is that the links are working. It acts as if there is no link there, though Firebug shows it should be.
If I remove “position: absolute” from the custom.php file, it works, but of course, the login then is in the wrong place.
Any idea on why position: would cancel out the hyperlink?
Adding to this, this only occurs in FF. The link works fine in IE 7.
Tony
PS – the hyperlink is active in IE and Opera, but is broken in FF, Safari and Chrome. Very confusing.
hmmm… whatever the issue was, it was all about those hyperlinks being on the same level as the other form element and/or the nav menu. When I inserted even a simple , they work just fine. Weird…
Tony — I’m almost certain the issue is about z-indexes. If you add
z-index:200;to the CSS for#nav_loginit might help. I think the reason it behaves differently in different browsers is that IE treats z-indexes weirdly, and even though it appeared to be correct, or work in your favour this time, it was probably wrong. Anywho, the nav menu has a pretty high z-index to get the dropdowns going over any other content. The other option is to add the form to the nav menu (if it’s not too tall for it, can’t actually see the site at the moment coz there’s a PHP error), you can add it withthesis_hook_last_nav_itemand then float it to the right within the nav menu.Incredible… that z-index feature improved it significantly. Really appreciate your help. Kicked a few dinero your way in thanks.
Thanks Tony! Much appreciated.
I’m surprised no one has mentioned using Google Chrome; right click in Chrome and select “inspect element”; pretty much the same thing as firebug with a more “make sense” layout. And not nearly as slow ;)
Great job on the redesign btw! Very nice!
Justin — Yeah, it’s not mentioned here, but Webkit Inspector in Safari and Chrome is extremely handy. I use them more than Firebug these days. Firebug can still do some things the inspector can’t do, such as editing CSS files sort-of directly and adding more CSS properties to an element, so I only open Firefox up when I really need to use those. Webkit Inspector is sufficient most of the time, and sometimes even better.
thank you sooooo much for taking the time to do this tutorial.
love it. love it. love it.
look forward to watching many more.
Great tutorial! Thanks Kristarella. Now onto your next one!
I have been using FireBug since long time ago……but it seems i have missed a lot of things .
Thanks Crist…
Great tutorial. Very fired up to put this to use with my new Thesis theme…
Thanks again!
thank you excellent post!
firebug for internet explorer users also can be found here
http://www.firebugger.com
Thanks. YOur little vid saved alot of frustration for me.
Hello there — I am really new to Thesis and have been reading your site like crazy – the amount of information you provide here is amazing! I am having trouble with something relating to using Firebug and thought you might be able to help. I’m trying to adjust the padding in the footer on my site (http://sevenbluedesigns.com) and am finding the area in HTML (using Firebug). Adjusting it (temporarily) with Firebug fixes the issue, but I can’t seem to find the appropriate code in my Thesis panel (custom.css) to make the change for good. Do you know where I might find the padding setting to change it? Thank you SO much for any help you might be able to offer!
Julie — You need to write the line into custom.css afresh. Something like
.custom #footer {padding-top:0;}.