Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.
Joomla Tutorials and Blog Posts
Using Firebug to Edit Joomla Templates
September 10, 2010 |
Joomla Tutorials |
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 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 Click on the icon and it will be enabled. Reload Your Page 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 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 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 Edit the CSS 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  When you've done that, click your cursor somewhere else on the page and you should see that your change has taken effect:  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.   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 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.  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:  I'm going to change #135CAE to #FF0000 and that will change all the links to red:  |
Start Online Training
Manage All Your Joomla Sites
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 Blog Posts and Tutorials
- Drupal 7 Explained Launches at DrupalCon
- Content Versioning - A Sneak Peek at Joomla's Newest Proposed Feature
- Dries' Keynote at DrupalCon Portland
- Keynote by Karen McGrane at DrupalCon Portland
- Drupal 8 WYSIWYG Editor at DrupalCon Portland
- A Guided Tour of WordPress's wp-config.php File
- Our New WordPress Coding Class is Live
- A Beginners Guide to Drupal Overrides
- Even experts want simpler web software
- The ins and outs of accessible web design
Blog Categories
Latest Comments
- How to Use Joomla's Alternative Layouts for Modules wow--just had a OMG moment. Tks
- Protect Drupal Content with Node Access Password The password is not generated.. What can I do now?
- VirtueMart - eCommerce for Joomla yeah this is excellent. i will try
- How to Update phpMyAdmin Sorry! note that I am French and my Xampp is configure in french. Thanks for all.
- How to Update phpMyAdmin hello evry one, I had a problem when upgradind phpmyAdmin. this erreur comes over.
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.
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.
Comments
Kind regards,
Nick
thanks in advance!!
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
Thanks.
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