Using Mozilla Firebug to inspect .css files

Wordpress & FirebugI remember when I use to have to go to the library and dig through the archives to find a video explaining Dos 3.1 or Lotus 123. Nowadays, you just hook up your $10 webcam and talk to the world. Man I do love technology!!

This screencast is to help those who don’t know a lot about css customization, but would still like to make adjustments to their website layout. In particular, this example uses WordPress 3.2.1 with the Graphene Theme (Thanks Sayhir and team) installed.

Keep in mind, this is my first screencast ever. So, any constructive criticism is strongly welcomed and greatly appreciated.

Using Mozilla Firebug to inspect WordPress Files


Part One

You will want to click the full-screen option on the player so the video doesn’t look smashed or distorted.


2 pings

Skip to comment form

  1. Jan

    Thanks Josh. Very helpful!

  2. Will

    Thanks for the video. I installed FB before but didn’t really look into it. It looks incredibly useful. I wish Dreamweaver was set up similarly, or some web editor, that could actually save the changes. Maybe there is a way to export/save the screen edits? I’ll have to look.
    Best – W

    1. Josh Lobe

      Oh yes, FB is absolutely awesome. It saves me so much time as a developer.

      I usually make my modifications via firebug (one css element at a time) and “build” the new style so I can see what it looks like. Then, I’ll select all the text for that style from the FB window on the right. Lastly, I paste this in dreamweaver for a css file, and delete the lines which I didn’t modify. I’m sure there is probably a better way out there, and I think there is actually an extension which will allow you to save the changes to your server… but it involves running some type software which runs a risk of infiltration.

      If you find something out which is better; feel free to share it with me!

  3. kikko

    I am very interested to see your video and learn to understand content. But your video is toooo little for this content. On fullscreen all text, grafics etc. are unclear, can not read something. It does’nt work good in fullscreen.

    I use 4 important browsers: safari, firefox, google, opera, last versions, on Mac OS X 10.6.8, 1440 x 900.
    Is there a chance to see it clear in fullscreen?

    Thanks! kikko

  4. Lash

    Wow, THANKS SOOO MUCH jOSH!You’re awesome!

    All your video tutorials are awesome!
    I just started using WP and very very luckily I found and started using GRaphene…
    But i soon got stuck- trying to make a drop down menu and change the position/formats of hook widgets…

    From the Graphene support forum I ended up here. HOLY H*** – I did not know about Firebug. or how to make and use a child theme.

    Thankyou soooooooooooo much! I’m sure I’ll be back for some hired WP help,as I get stuck easily.

    (now I’ll have to go back and put all the css changes I made in the parent code into a child theme. shhh don’t tell anyone! )

    cheers, Lash

  5. Les Davis

    Hello Josh,
    Thank you for the tutorials!
    I am easily confused due to being old.
    You mentioned that you use Dreamweaver, but then use Fire Bug and another FTP program.
    I am right at that point where I have enough knowledge to mess things up.
    I have already set up a local host (MAMP) on my macbook and (XAMPP) for home PC desktop for development experimentation, but have not actually changed out the remote (hosting) other than the import and export of xml files.
    I have searched all over for good tutorials and yours is the best yet.
    I am trying to learn more about the PHP tags etc
    .Can I use my Dreamweaver CS5.5 for all of the file creating, changing and uploading?
    Thank you,

    Any suggestions for my website would be appreciated, I am all alone, none of the other band Geeks want to help.

    1. Josh Lobe

      Hi Les,

      You are actually a step ahead of me regarding Dreamweaver. I use Dreamweaver CS3 for everything. I love the way it color codes the different tags and also how it uses line numbers. I use it for ALL of my php, html, and css files. And I’m sure Dreamweaver CS5.5 is compliant with the new versions of PHP and CSS3.

      I’ll take a look at your site. I noticed you are using the graphene theme… so I like it already :)

  1. Target Graphene Action Hook Widgets by their Unique ID at …in some weird postmodern way…

    [...] In my earlier post about using Graphene action hook widgets, I neglected to mention how to target each widget in the style sheet. In much the way that WordPress gives each widget its own unique ID, which you can then target with some specific CSS, Graphene also provides each of these action hook widget areas with a unique, non-numerical ID, which you can then target in your style sheet. This is fairly easy to do if you use Firebug. (My own tutorial is here, and Josh’s much better video tutorial is here.) [...]

  2. Using Firebug to Tweak Your Blog at …in some weird postmodern way…

    [...] Lobe has a good video tutorial available here. It’s a hair under 11 minutes long, so it probably will take you less time to watch the video [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>