Joomla Tutorials and Blog Posts

Using Firebug to Edit Joomla Templates

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

Comments

 
Bugger101
#1 Bugger101 2011-01-03 03:01

Cool!
 
 
sani
#2 sani 2011-02-28 19: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????
 
 
Nick
#3 Nick 2011-02-28 21: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
 
 
gritofreak
#4 gritofreak 2011-06-20 10:06

should you explain where should i find in firebug that receptive line of code lies into which file?

thanks in advance!!
 
 
Nick
#5 Nick 2011-08-12 17: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
 
 
Arnoud
#6 Arnoud 2011-10-04 23: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.
 
 
Nick
#7 Nick 2011-10-05 01: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
 
 
ganesh
#8 ganesh 2012-06-08 04:06

why some lines are cut when you see the css
 

Add comment


Security code
Refresh

blog-ad

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

adminicredible

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Comments

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

  • You can re-use these tutorials.
  • You can modify these tutorials.
  • You must link back to our original tutorial.
  • You can't use these tutorials commercially.

Click here to read the full license.

Open Source Training is not affiliated with or endorsed by the Joomla, WordPress or Drupal projects.
All product names and trademarks are the property of their respective owners.

Copyright 2013 Open Source Training, LLC. All rights reserved.