The Joomla! Community Magazine™

Use Firebug to tweak template CSS

Written by | Friday, 01 June 2012 00:00 | Published in 2012 June
One of the most common support questions we receive is “How do I tweak the……” or “How do I change the color of.....” You can fill in the blanks. I believe this is such a common question because many users are unaware of the powerful tools available to them for free that can make this task a breeze.  

My daily routine consists of many tasks including designing and developing templates and extensions, answering support tickets, marketing and working on custom projects. The one thing all these tasks have in common is Joomla. We use Joomla for all of our work and projects and consequently we have become very proficient in many areas.

Editing your template files can be a daunting task as many developers including ourselves use sophisticated frameworks with lots of files and folders. In this article we will examine how to find and edit part of your templates CSS file to achieve the results you want.

My first task each morning is to answer support tickets from our customers. One of the most common support questions we receive is “How do I tweak the……” or “How do I change the color of.....” You can fill in the blanks. I believe this is such a common question because many users are unaware of the powerful tools available to them for free that can make this task a breeze.

Since we are creating and using these templates and extensions, day in and day out, it would make sense for us to know exactly where to look to solve the user’s problem. Generally this isn’t the case. Each and every website is different and unique. Because of this we always ask for a URL so we can “diagnose” the problem.

The tool we use to “diagnose” the problem is called Firebug. Firebug integrates with the Firefox browser to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Your first step is to install firebug on your Firefox browser. http://getfirebug.com/

For those of you, who are intimidated by this, don’t be. You might be thinking, “I don’t know CSS, so I can’t use this tool”. That is not the case. It is very easy and Firebug will not only tell you exactly where you need to edit, but let you “test" it out first. Once installed, you will see the Firebug icon in the upper right of your browser window. When you click on it, it brings up the firebug window affixed to the bottom of your browser window.

Next, you click the arrow icon in the upper toolbar to inspect an element on the page. After the inspect arrow in engaged, you will notice as you hover around the page that boxes are appearing around the elements. Once you click any element, Firebug will show you those elements properties.

How to change the active menu item color.

In this example, we are viewing the demo website at http://axiom.pixelpointcreative.comOnce Firebug is activated, I use it to click on the active link. In this case the home link. You will see, in the screenshot below, that Firebug is split into two sides. The left shows the structure of the page. The right shows the current style we have selected.

firebug1

Do a “live” test to see what your changes will look like.

In the example below, I have clicked inside the color field and entered my own color. I used "blue". You can enter any common color or hex code color.

firebug2

See where this declaration is so we can actually change it in the CSS file.

We can clearly see that it is in style1.css, Line 403. But where is style1.css? To discover this, simply hover your cursor over the style1.css text and it will display the full path to the file.

firebug3

Now we know what file and what line number we need to edit.

Armed with this knowledge, we can edit style1.css, Line 403 to change the active link color. Style1.css can be edited by going to the template manager, clicking on “Templates” , then “Template_name Details and Files”. A list of that templates stylesheets will be displayed for you to edit.

Unfortunately the editor doesn't give you any line numbers, so you might have to search for your style to update. To have more control and options, including line numbers, we recommend installing a file browser like Extplorer. This powerful tool acts like Windows explorer for your Joomla site, allowing you access, view, edit and delete files and folders on your Joomla site. We will cover using Extplorer in more detail in another article.

NOTE OF CAUTION: Using tools like Extplorer to gain access to all of your Joomla files and folders is fantastic if you know what you are doing. If you don’t, you could get yourself into trouble. A good rule of thumb is to always make a copy of any file you are editing. If you make a mistake, you can always delete your file and restore the copy. Also, if you aren’t sure what a file is for, don’t touch it and do some research first.

Read 23638 times
Tagged under Sitebuilders
Daniel Riefstahl

Daniel Riefstahl

Dan is the co-founder, lead designer and creative director for Pixel Point Creative. Pixel Point Creative is a Joomla template and extensions club and a full service web and graphic design company. Dan earned a Bachelors Degree from Penn State University. In 2001 he started developing websites and in 2005 he discovered Joomla and has never looked back. In his free time, he enjoys reading, music, golf, movies and disc golf.