I came across Firebug last year and I’ve been using it since then, I just realize now that it’s not include on one of the top 5 Mozilla Firefox Add-ons I posted. I’m not really web developer, a designer I used until I can no longer keep up and  just diverted my attention to learning SEO which was a plus for me because I have a background on design and understand a bit of codes. To make it short, I’m not a technical person who knows hard code, I’m not of those person responsible of what’s behind those websites, how they run and everything, but I can develop a site using WordPress and a little help from Firefox.

How? installing WordPress is fairly easy, anyone who can read can follow instructions so let’s take look at the technical part. This is when you want to change the header, background,  the whole look in fact.

Header

Usually with wordpress this is readily available, choose them options and voila, browse your own header. But what if you don’t have one and you want to know the size of it in order to make sure you don’t make a mess out of the design. Here you can use Measureit, it’s a firefox add-on that behaves like a ruler. You can measure the design of the actual height and width of the current header and from here,start designer your own header.

Color Scheme

WordPress uses HTML color code, and one gret firefox add-on is Colorzilla. You may want a color from a site you like, an image you like or what have you. It is very simple to use, just click the icon, choose the color you like and get the code. Simple as that, you can change the background if there’s an option available for the team….but what if not???

This is where Firebug comes in handy. You don’t have to know how to code, you just have to analyze how its done and take note of the one you want to change. See example below:

First you have to click inspect element, in here, we are expecting Keyword Research Button. It says, the image for the hover background is under (images/nav-hover.png), the color of the text is #FFFFFF which is white and the shadow is #A87D08. So if you want to change the hover background, you must replace the nav-hover.png, you must know how to use FTP (File Transfer Protocol) which is fairly easy to use. You can also change the color of the text, you can experiment actually by changing the actual code on Firebug, it doesn’t effect your design, firebug does this so you can easily visualize the changes you want to implement. If you’ve decided you want to change your text color, go to Appearance and proceed to Editor.

From here look for the file you want to change, in this case the highlighted one. If you are sure of changing it, just replace the color code. If you’ll be doing it the first time, copy paste the whole code as back-up so you can revert it back later on if you mess up. But for sure you can do this.

There you have it, if you simply want to change color scheme, this is pretty useful. But if you want to change the images as well, that I have to create a new post and discuss how to use FTP’s.

Let’s all have a great weekend.