Tutorial

This information, guide, tip is intended to show you what you can do with the Firebug add-on for Firefox. How simple it is and how it can save you a lot of time. Quickly change your sites layout and design with the FireFox add-on.

 

One of the simplest things you can do is use it to find a .css file and code associated with an area of your web page / web site you would like to change. You can use it to easily pick out the color, background, font colors, font weights, etc. Firebug will help tell you exactly where the code is, which you can then change in a few seconds compared too many minutes or hours.




Download Firebug: (for FireFox)
https://addons.mozilla.org/en-US/firefox/addon/1843

 

It integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...



Xray: (For FireFox and most other Browsers)
http://www.westciv.com/xray/

XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.


If you have Firefox, then get the free plugin. If you don't have FireFox I strongly suggest you check it out. It takes a little while to get used to something new. But if grows on you and you will find out things just work better. There are more extras and add-ons available...Just try it.

Once you have the have it go to your web site and simply right click your mouse on the area you are trying to change. Then, select "Inspect Element".

Firebug Inspect Element

 



In this example it is a standard default template. I am inspecting the "Member Login" link. Let's say I want to change the color of the link maybe.

Now I will get the firebug screen which looks something like the picture below. You can hover your mouse over different areas of the code and your page will highlight and change color so you can see exactly what that code is related to.

Firebug Inspect Member Element

 



So in this particular example I can find the code in anchor.css which would be /templates/tmpl_uni/css/anchor.css I will then need to look for .no_hello_actions in anchor.css and make my changes to the code.

Firebug Highlight

 



You can see if I hover my mouse over the color, it even tells me it is #336699 / Blue

So basically I would just open up anchor.css, find .no_hello_actions and change the color #336699 to a different color. Then, save the changes and re-upload the file.
Firebug Inspect Color

 


Here is an example of the navigation menu. I am inspecting the element for the "Home" link. Here you can see when I hover my mouse over the code in the bottom red square, it also highlights "Home" in the top red square, so I know if I am in the right place or not.

Firebug Top Menu

 



I can see this one is going to be in general.css or /templates/tmpl_uni/css/general.css. This one is a pretty big file so take your time.

I will want to look for .topMenu in general.css. Notice it even tells me the background-image and location, borders, border colors, the text color, decoration none, etc, etc.

Firebug Top Menu CSS Element

 



Now we know where to look and what we might begin to change.

This is a HUGE!! Time saver. The Firebug tool is one of the best plugins I have used for FireFox.

 
Xray will work with FireFox and Internet Explorer as well as a few others. It will tell you some info about the page, but it is rather limited when compared to firebug.

Here are some screen shots of xray. You will notice it will give you some page info and dimensions, height and width type of thing. But it doesn't tell us what .css file to look in. It don't tell us the current colors, or anything that will really help us find this fast.

Xray Splash Screen

 

 

 

Xray Inspect Join Now

 

 

 

Xray Inspect Site Stats

 

 


It's something to play around with, but use FireBug for the best, most detailed information about your web site.

Good Luck!!

 

 
Written By
Tutorial by: Jeremy LeSarge (AKA Ray)

I am the owner and administrator of DialMe.com. I write Tutorials for Boonex Dolphin as well as tips and resources surrounding website programming and development. I enjoy working with WordPress, SEO, and Web Hosting / Servers. I also maintain a WordPress Blog here on this site where you will find a variety of technology and webmaster resources.

Actions
Recommend
Sponsored Links