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.

11 thoughts on “Using Mozilla Firebug to inspect .css files

  • Pingback: Using Firebug to Tweak Your Blog » Up Past Midnight

  • Pingback: Target Graphene Action Hook Widgets by their Unique ID » Up Past Midnight

  • Pingback: Target Graphene Action Hook Widgets by their Unique ID at …in some weird postmodern way…

  • April 4, 2012 at 9:42 pm

    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

    • April 5, 2012 at 12:06 am

      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!

  • March 30, 2012 at 8:10 am

    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

  • December 15, 2011 at 8:28 pm

    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

  • December 3, 2011 at 6:58 pm

    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.

    • December 3, 2011 at 7:27 pm

      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 :)

  • Pingback: Using Firebug to Tweak Your Blog at …in some weird postmodern way…

Leave a Reply

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