When you’re designing a site, the #1 greatest fear of bloggers is code. It’s not only a four letter word, but its much scarier and more offending than other four letter words! One wrong snippet of code and your website can literally break. Plus, how the heck can you figure out what code goes to what? It may as well be in Mandarin- cause code is NOT a language most people speak. That’s why I am excited to show you How to Install and Use Firebug (and why), so you can find and fix code yourself!
But that doesn’t mean you can’t figure it out. And that doesn’t mean you should use themes or image maps that are just fancy work arounds for code. They slow you down, they are clunky, and once you GET how to design a site, you will realize its actually quicker and easier to just do it via code!
This is a great way for both blogger blogs AND wordpress.
To start CHANGING our code, it helps to FIND the code. If you’re not used to how a theme is structured, it can take forever to figure out where to find the snippet of code that changes your blogs font, spacing, size, etc. Today, we’re going to install a tool into our browsers to help us do just that. It’s called firebug, and is totally free. (It was made by the people who made Firefox and is always free, safe and open-source if you download it directly from them- which I am giving links to below).
FIRST THINGS FIRST- you need to backup your blog. There is a reason I put this post first in the blog series even though it seems a little less interesting. It is the most important! If you don’t backup your blog, and something goes wrong, you’ll be spending HUNDREDS of dollars or hours trying to retrieve data when your site breaks. If you backup, (and especially with this service), a few clicks and a little time for it to work it’s magic, and you’re back up in action. It is STRESS. FREE. So sign up and BACK UP NOW BEFORE READING ON!!!
I am not liable for mistakes that may cause your blog to go down. I have routinely “killed” my blog making teeny tiny mistakes like a wrong space or comma. BACK UP, please.
Secondly, this is just a Firebug 101 and is meant to be an introduction to people who haven’t used it yet. If you’re a firebug pro, this is probably not the post for you- we’re just going to go over how to find code here. I may add a post on Chrome developer tools (I use chrome a lot, but not a lot of people do yet), so please drop me a note if you’d be interested in that.
To begin, we need to download firebug. Firebug was made for Firefox, so if you use Firefox as your browser, head here to download. SOME VERSIONS OF FIREFOX ALREADY HAVE THIS IN- Just right click and check “inspect element”.
To get firebug lite for Chrome, Safari, Opera or IE, head here.
Once you’ve downloaded the software, we need to add it into our browsers. Follow the instructions based on your browser and computer (they are all slightly different). It isn’t more than a few clicks.
When firebug is installed, you will see a little bug in your browser tool bar.
Next, let’s just open up firebug for a minute. Click the little bug showing in your browser’s toolbar- you’ll see a box pop up on the bottom of your screen. This is going to read our blog’s code to us and help us figure it all out- like a fabulous interactive cheat sheet!
(I have not made this image smaller so you can click on it and see a bigger version. It may look a little small below, so please click to see the whole image and expand it!)
First, open it up on my page. Follow the prompts in the photo below to see how we’re going to use firebug in following posts:
-Click the “inspect” button. You’ll see a little box pop up that you can move with your mouse to inspect elements of your site.
-Make the little box hover over my “about” tab. Click it to “select” this part of my theme.
-On the right hand side, you should see style elements- like my font color, font choice, margins, padding and font size.
How cool is that??? I know, you’re thinking, “ok Courtney, that is great, but what do all those words MEAN”?
Stay tuned…. we’re going to go through them!!
Make sure you don’t miss out on any of the action. Sign up below for the exclusive email list:
Or request to join the private facebook group dedicated to networking to solve web design problems together!