Using Firebug to Find and Replace Logos
UPDATE: Firebug is not supported anymore. Please try Dev Tools in Firefox, or Developer Tools in Chrome instead.
As templates and themes become more complicated, it can also become more difficult to find and replace images. The most likely image you’ll want to replace is the logo.
We’re going to show you a technique to find and replace logos. Though the technique requires a few steps, it should help you track down almost any image you need to find.
Using the generic Gantry template from Rockettheme as an example, we’ll show you:
- How to locate the CSS code.
- How to find the location of the logo graphic using a process of elimination.
- Demonstrate inheritance in CSS.
Before you start
There are some requirements if you want to follow the example exactly.
- Firefox as your browser.
- Firebug installed as an add on.
- The Gantry Framework installed on Joomla.
- The Gantry Template installed on Joomla.
You can get both the framework and the template at http://gantry-framework.org. They are open source and there is no charge.
Looking at the statistics on my web visitors, Firefox is used by such an overwhelming majority, I’m going to use it as the sample. There are similar tools that work with IE and Chrome if you are familiar with them.
If you need Firefox and Firebug you can get them from http://www.mozilla.org/en-US/firefox/fx/. You can get add-ons like Firebug here https://addons.mozilla.org/en-US/firefox/.
Changing the Logo Using Firebug
Get started by visiting your site in your browser.
Right-click on the Gantry logo. Choose Inspect Element from the context menu.
A split window will open and you will see
- HTML Tab
- The HTML code
- The Style Tab
- The CSS code
- The name of the CSS file that has the code
In the Style pane you see the CSS for the logo. It’s #rt-logo and it’s on line 1 of template css. The background image is located at:
background-image: url("../images/logo/logo.png");In a usual template, you could make a new logo.png and upload it to that directory, or you could go into the CSS file and change the location of the image by editing the URL. This is where this gets a bit tricky with Gantry and other frameworks. I’ll show you what I mean.
As you run your mouse over the lines you see some gray circles. If you click one of those gray circles, Firebug will temporarily “turn off” that line so it is not active. You can bring it back by clicking again or refreshing the page.
Normally this would make the logo image disappear, but as you can see in the above image, it is still there. Obviously this isn’t the actual logo.
Look a little farther down the page and you see another section labeled #rt-logo, and there is a line through everything, except the background image. The strike through went away when you turned off the background image in the section above.
Now go down the line and click the circle next to the background image in the second section.
The logo has disappeared.
This happens because there are two style sheets that control things. In this case template.css and gantry.css. They can’t both be right so one will take precedence over the other. This demonstrates the idea of “inheritance” in CSS styling.
One way to replace this logo on your site would be to create another logo and name it header-assets.png and overwrite the one in the images file. Or you could open the gantry.css and change the url to the background image there.
Frameworks and more complicated templates use inheritance, which may introduce a little more complexity to your CSS work.
Next time you change the CSS coding, but don’t see any change on the site, you may need to look a little further to see which style sheet is really controlling the layout. You may need to change things in more than one location, so be sure you don’t give up too easily.