Firefox and WordPress Customization

I have been doing web design for awhile now.  I never took any course or anything like that, kind of flew by the seat of my pants.

Started out making table based HTML sites on Dreamweaver – this is an alright method, but I wasn’t too fond of it.  The websites all seemed too old fashioned.  I made the move to creating sites using WordPress.

This is much better, I usually create a site by customizing an existing template.  That way the basics are in place, and there is still a ton of room for improvement and customization.

Since I don’t have a great basis in HTMl or CSS, sometimes it can be tricky when I am customizing these WordPress themes.  I am sometimes confused by rather simple things like “Is this box Content? Is it Body?  Is this Box5 or Box4?”  Simple things like that, things that more experienced designers know right away.

I have done a lot of research on web design and internet marketing in general.  It led me to make the switch to Firefox browser rather than IE.  Besides the fact that Internet Explorer is a steaming pile of insecure shit, Firefox offers a ton of customizations.

I had read a lot of “must have plug-ins” lists for Firefox and one kept coming up but I thought it far too advanced for me and avoided it.  It was called Firebug and it is specifically for web designers.

I finally took the plunge and checked it out.

This plugin has helped me IMMENSELY when it comes to customizing WordPress themes.  I can’t believe I ever lived with out it.  If you are relatively new to WordPress customization – you want this plugin.

It has a ton of features and uses – but for me there are two that have made my life significantly easier.

The first is “inspect element” you can right click anywhere on a webpage – and you can bring up info on whatever you clicked on. It brings up the HTML on the left and the CSS on the right.  Why is this helpful?

Well I was having trouble changing the border color on a themes homepage, it was a special dynamic picture border that was hardwired into the theme. I simply “inspected” it and Firebug told me exactly what CSS file it was on (this theme had multiple CSS files)AND the exact line that it appeared. It took seconds to find it and change the color.

Even better, Firebug allowed me to change the color right in the browser…only on my side BUT it lets you get a quick look at any color changes before you actually do them.

This one function will save me hours.  I combined that with another Firefox plugin – ColorZilla – it is a tool that allows you to find the HTML and Hex values of ANY color on a website by simply clicking it.  No longer do I have to worry if I am matching colors correctly.

I know most people probably know about these tools, and this is not breaking news. That said, if you don’t use these tools, you should start now. Thank me later.

The Man The Myth The Legend

blog comments powered by Disqus