In the midst of all these posts on how I went through redesigning each site I feel the need to highlight one of the tools I used, which proved to be paramount. Firebug can be used to view all the scripts, stylesheets, and html of a site. While googling around for something or other on the internet, I remember seeing a post about how Firebug was a developers best friend and at the time I wasn’t quite sure why. I now know, and I hope to provide a few quick examples to show a few ways in which it can be used to help you develop your site.
Firebug and WordPress
As I’ve mentioned in previous posts, this blog is built on WordPress. But the WordPress theme it was built on is one I designed and built page by page from the ground up. While there is much to be said about the process of building your own theme that is not what I want to discuss in this post. I want to talk about what happens when you have your fully functioning, completed theme.
For those of you who are unfamiliar with WordPress, it’s basically a blogging platform run on php with lots of built-in functions and structures which you can use. I knew none of them. In fact, I barely knew php. There were a lot of sites that explained how you could go about building your own theme, but they didn’t really offer detailed information on how to really style your theme once you got it working. The problem is that when you used the functions or structures WordPress gives you, the results are somehow returned to you in html/css to be displayed but you don’t know the ids or classes of each element that WordPress is generating for you. It saves you a lot of coding however, it also means you have to work your way through WordPress and really integrate it into your site. I’ll give you an example the following is an excerpt of code from the sidebar on the blog:
As you can see, all of the categories are generated through WordPress and are inserted into the html in that one line of code. Now it isn’t immediately obvious how the categories are returned. Is WordPress adding them within paragraphs or headers or list items? Are they getting their own specific ids or classes? I’m sure some googling or browsing on the WP codex could provide you with an answer, but there’s also another way. The following is the actual html code from the sidebar, all of which was generated by WP:
As you can see each category is inserted as a list item with a class of “cat-item” containing a link, title, and the actual text that gets displayed. All I had to do was run firebug on my website and inspect the sidebar element. Now all I need to do is go into my css file and create a class called cat-item and style it however I want. It’s that simple. I used this approach to style almost all of the generated elements on the blog.
Firebug for learning
I should have probably started by explaining what Firebug does- it reveals the source code and resources of whatever internet page you’re looking at and displays which coding elements correspond to which visual elements on the site. Thus making it an extremely useful tool for picking apart another website or element that you may want to adopt into your own. I actually have a great example as I did this for the photography page on my website. I wasn’t quite sure what I wanted my page to look like and didn’t want to settle with the plain old slider from v2 and a link to flickr, so I googled “top personal photography websites” and found links to a bunch of amazing-looking photography sites and started browsing for a feature I would want. I eventually found an effect that I thought would work well but I had no idea what it was called or how I could recreate it. I popped open firebug and quickly browsed through:
The line that is currently highlighted is the line that corresponds to the element containing all of the images, which if you can’t see, has the class “masonry.” Now this wasn’t much to go off but another google search turns up results for jQuery Masonry which happened to be the exact plugin I was looking for. Now this is probably one of the far more obtuse and unusual methods of finding design elements but hopefully demonstrates exactly how multi-purpose firebug can be. I use it more regularly to find the names of fonts or hex color codes that I like.
Firebug for debugging
The last thing I want to mention about Firebug is how it can be used to debug and save you countless hours and broken keyboards. Say the formatting of your page doesn’t look how it’s supposed to look. Maybe you want three elements (let’s say buttons) floating on the left side of your page, all stacked on top of one another. Maybe you’ve done this before and have some idea of how your css should look, or maybe you’re following someone else’s example but for some reason can get your version to work. This is where Firebug comes in- all you have to do is inspect whatever element(s) you’re having trouble with and Firebug will conveniently list all of the style rules applied to that specific element.
This is a screenshot of Firebug showing the css rules applied to the unordered list containing all of the categories. It shows the sidebar ul class from my stylesheet and will also display any other styles linked to a specific item, making it easy to see if something is applied where it shouldn’t be.
These are just a few quick examples of the many way this plugin comes in handy. I’d definitely recommend installing it if you haven’t already.