Joomla Tutorials and Blog Posts

Using Firebug to Edit Joomla Templates

September 10, 2010 | Written by Steve Burge

Firefox is a great browser for working with Joomla templates.

In another tutorial we covered the Webdeveloper plugin. In this tutorial we'll cover the Firebug plugin which allows you to debug and edit your template's HTML and CSS files:

Install the Firebug Plugin

tutuploadsmedia_1284144459090.png

Click "Install Firebug For Firefox". You'll have to restart your browser for the installation to finish. When it is over, you'll see an extra Firebug icon in the bottom-right of your browser.

Enable Firebug

tutuploadsmedia_1284144729647.png

Click on the icon and it will be enabled.

Reload Your Page

tutuploadsmedia_1284145028942.png

Refresh your page and you'll see Firebug starting to do it's work in a new panel at the bottom of your browser. There are lots of features in Firebug. We're going to use a couple that will allow us to analyse our Joomla template.

Use the Firebug Inspect Feature

tutuploadsmedia_1284145182073.png

In the bottom-left hand corner of your browser, click on the blue arrow. You should get a pop-up message saying "Click an element in the page to inspect". That's what we're going to do.

Click the Logo

tutuploadsmedia_1284145307193.png

Click on the Joomla logo. There will be a blue box around the outside. At the bottom of the page, you'll see Joomla's HTML layout on the left and its CSS on the right. We can see that the logo area is placed on the page using this HTML:

. We can also see that it's controlled by the CSS i div#logo

tutuploadsmedia_1284145350669.png

Edit the CSS

tutuploadsmedia_1284145653721.png

Put your cursor into the background CSS and it should pop-up as in the image above. You can edit any part of this. I'm going to choose to edit the image. I'm going to replace it with the Google logo: http://www.google.com/images/logos/ps_logo2.png

tutuploadsmedia_1284145692246.png

When you've done that, click your cursor somewhere else on the page and you should see that your change has taken effect:

tutuploadsmedia_1284145833414.png

OK, that's great, but the image is still too large. Let's go back to the CSS. I'm going to change the width of the logo to 498px and also change the height of the logo to 140px.

tutuploadsmedia_1284145897594.png
tutuploadsmedia_1284145929992.png

Refresh your page and you'll be back to the design. All those changes only took place in your browser. No-one else saw them.

Fixing CSS Problems

tutuploadsmedia_1284146338876.png

Imagine that I have a problem with the CSS in my template ... I'd like to change the color of my links. To get started, enable the Inspect feature and click on a link. The CSS will appear beneath. This image above shows all the CSS affecting the link, regardless of what file it appears in.

tutuploadsmedia_1284146509272.png

If you want to know where the CSS is stored so that you change it, Firebug will tell you exact file location and line number. However, first we need to make and test our changes. All you need to do is click on and change the color CSS:

tutuploadsmedia_1284146655488.png

I'm going to change #135CAE to #FF0000 and that will change all the links to red:

tutuploadsmedia_1284146772920.png


 

 


To sign up for complete classes and support

 

Comments  

 
#1 Bugger101 2011-01-02 22:01
Cool!
 
 
#2 sani 2011-02-28 14:53
is this addon only for previews or you can save it?, if you can save it, how can you add your hostname... username and pass????
 
 
#3 iowawebco 2011-02-28 16:30
It's only for debugging. Once you know where the changes are that you need to make, then you can manually change it in the respective files.

Kind regards,
Nick
 
 
#4 gritofreak 2011-06-20 05:06
should you explain where should i find in firebug that receptive line of code lies into which file?

thanks in advance!!
 
 
#5 iowawebco 2011-08-12 12:39
Hi and welcome, gritofreak!

For the actual html/php code, you won't know for sure what line it's coming from because that's the way programming languages and browsers work.

However, you can know for CSS and that part is already covered in the tutorial :)

Kind regards,
Nick
 
 
#6 Arnoud 2011-10-04 18:52
Thanks for the tutorial. I don't understand one thing though: how do I find out in which files certain codes are in? Let's stick with your example about changing the logo... using Firebug I can see the html code. But where in Firebug can I see where this code is located in my files? (that is, if it's my website)

Thanks.
 
 
#7 iowawebco 2011-10-04 20:46
Hi and welcome, Arnoud!

In the example it's CSS and not HTML ;)

Check out this image: ostraining.com/.../...

Notice that in the top right there's a blue "template.css (li"?

If you right click on that in Firebug you can then copy location and then open up a new browser tab and paste it in the address bar. The URL has the exact path to the CSS file that you need to edit.

If the logo isn't set as a background declaration as in the example above, then it's likely in your template's index.php file.

Kind regards,
Nick
 

Add comment


 


To sign up for complete classes and support