Fantastic Free Tools for customizing your template.

[birdoasis]

First thing you want to do is use the firefox browser for viewing your site, since the tools mentioned below are made for firefox.
Download it at www.mozilla.com

From the add-on's secton of mozilla.com install the following:

Web developers add-on. A tool bar menu system that is invaluble in figuring out where things are on a template, and what needs to be chhanged.

Colorzilla This tool not only tells you the current color of the template parts you point it at, but it also tells you the div to edit.

Firebug This is great tool that helps you debug a site, inspects the code, validates it and the reports on errors via highlighting the offending code.

Once you've installed all this, use firefox to goto your site.

You can now use the dev toolbar to show the css, and the path to the css file.

Use the information the information button to show the div id's and classes of a site. this is invaluable when you're trying to figure out what part of the page to change. You will see some little rectangles popping up all over the place with div, classes, and names of the wrappers.

There's so much more you can do with the web dev toolbar. You can view the javascript for any page, view the source, and the generated source codes.

These tools allow you to see the parts that are giving you problems, so that you can quickly debug them and fix them.

Looking forward to hearing about other tools that the rest of you use.

[ladysaat]

I absolutley LOVE LOVE my FF and my goodies.


One question... you remember how you used to be able to click "Edit CSS" and a side bar would show with the CSS right there and you could edit it, view the changes immediately and even save it?


WHERE'D IT GO???? LMAO!!!! Suddenly it's not working. I even reinstalled the WebDev stuff. Is it still functioning correctly for you?

[birdoasis]

I noticed that too.

It must have been an update, but I don't know why they would take it away.

I wonder if it's an option now.

[gjh42]

When I updated to FF 2.0, there were a bunch of changes to Web Developer. The Edit CSS now can be on top, bottom or either side. The Information > Display Element Info now only displays after you click on an element.

[birdoasis]

Well that explains it. But...but..but.

[ladysaat]

Okay ...after reinstalling ff2.0 and all my various add on's.... blah... I went back into Tools and the small print under Web Dev Tool kit thingy says it's been disabled for your protection. So I clicked enable. Restarted FF. Works now. Go figure. I wonder what disabled it? and why?

[birdoasis]

I bet you were using IE too much, so ff got even.

[ladysaat]

hehehe.. that made me chuckle. My IE was broken too. I think my computer had an itty bitty cold ;-)