1

Topic: Using Firebug to find CSS Code

For some, finding the CSS code to make changes to their template can be difficult.  There are usually two factors involved: the html element and the css style. Usually it is the css style you want to change to format an element or the look of your site.

Your template files are kept in your template folder:

http://www.filipina-lady.net/templates/webby2

In my case, the webby2 folder contains the template files. If you are using a different template, your template folder will be named accordingly.

Firebug can help you find the CSS code to make changes to a template. Firebug is a Firefox add-on so to use it, you need to install Firefox as your browser.

To download Firefox go here: http://www.mozilla.com/en-US/firefox/personal.html

http://www.filipina-lady.net/test252/fire01.jpg

http://www.filipina-lady.net/test252/fire02.jpg

http://www.filipina-lady.net/test252/fire03.jpg

http://www.filipina-lady.net/test252/fire04.jpg

http://www.filipina-lady.net/test252/fire05.jpg

http://www.filipina-lady.net/test252/fire06.jpg

http://www.filipina-lady.net/test252/fire07.jpg

http://www.filipina-lady.net/test252/fire08.jpg

For some people, all they want to know is where the css code is. As the above image illustrates,   Firebug makes it easy by telling you what the name of the CSS file is that contains the style and what the line number is for the CSS code in the style sheet`

http://www.filipina-lady.net/test252/fire09.jpg

http://www.filipina-lady.net/test252/fire10.jpg

http://www.filipina-lady.net/test252/fire11.jpg

Hopefully you can now  find the CSS code you want to change. Once you know where the code is, you  have to go to the actual CSS file to make the changes. But as  illustrated above, you can  play around with the CSS code to see what it would look like in your browser before making any changes to your CSS file.

That pretty much covers the basics. There are some advanced features to Firebug I may cover later, but hopefully the above gives you enough info to help you find and make the changes you want to your template

Last edited by db3204 (2009-05-03 08:17:27)

2

Re: Using Firebug to find CSS Code

Great job db3204. Thanks

3

Re: Using Firebug to find CSS Code

db great post again, I just installed firebug, I am sure will save me hours of down time looking and testing elements in the css files which I really did not understand in the first place smile

Firebug is a must for any newbie like me...

4

Re: Using Firebug to find CSS Code

In IE8 is also now available