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)
Xray: (For FireFox and most other Browsers)
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".
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.
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.
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.
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.
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.
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.
It's something to play around with, but use FireBug for the best, most detailed information about your web site.