If you are just using a core Joomla! installation and a template, then this is often a simple process. The style is invariably coming from the template's template_css.css file or from one of its css files that are usually found in templates / [my template] / css folder and so it's relatively easy to track down the code that is affecting the design element that you want to change. However, if you are using multiple plug-ins, modules and components on your site then that's when the task tends to become a bit trickier.

In most cases finding the offending code is a matter of trial and error, but the effectiveness of the trial and error depends a lot on the tool that you use.

CSS Edit gives you super hero powers... well almost.

By far the most used tool in my template toolkit is CSS Edit from Mac rabbit.

I can still remember the first time I realised how to use live preview and the sudden illumination I felt as it dawned on me how css and its cascading selectors worked. This tool is invaluable for any designer but it comes with a pretty hefty price tag if you don't already own a mac. For me it's almost worth buying a mac just to use this app.

For this tutorial I am going to create a mock investigation and use the CSS Edit to track down how to change the orange heading colour on the joomla.org website.

Here are the steps required to locate and then change the css responsible for generating the orange headings on the joomla.org site.

1. In CSS Edit open the Preview window and navigate to http://joomla.org.

2. Click on the xray button to enable the xray feature.

3. Make sure that the applied styles window is active by clicking the i icon next to the xray button.

4. Click on the selector you want to investigate - in this case the orange heading.

5. There are effectively two options for us at this point now:

1. Investigate without making permanent changes to the site.
2. Investigate with making permanent changes to the site.

5. a. Find the style without making changes to the live site.

In the applied styles window click on one of the styles that are highlighted and then choose the extract contents into a new stylesheet option. This option will, not surprisingly, open the stylesheet in a new file in cssedit.

5. b. Find styles and make live changes to your site.

This is my preferred option for investigating and making changes to the css of a site, however you need to be careful here as any changes to the css file once saved will affect the live site directly.

I'm not quite sure what the button is called – so let's call it the edit css icon.

It's a useful icon, not only because it gives you that little number that tells you how many css files are included on the page, but it also helps you to track down the path and location of the css file on your server. As you can see, the template.css file is located at cdn.joomla.org/jorgm/css/main on the joomla.org server.

To make permanent changes to the file it's now a matter of navigating to the file on your server by navigating to the path shown above. Once you have opened this file with your ftp client you will need to select the use an existing stylesheet option and select the file that you have opened from the dropdown list.

This will now add a piece of code to the top of the stylesheet that would look something like this:

{codecitation}

/* @override http://cdn.joomla.org/jorgm/css/main/template.css */

{/codecitation}

6. Once you have opened the corresponding files you need to click on the style again in the applied style window so that the style you want to track down is then highlighted in the newly opened stylesheet.

There are often multiple css selectors that are may be pointing to a single design element so its a matter of checking through each reference and looking at the code to find the css. As we saw above there are five css rules that influence the display of the heading elements but only the .content h2 has the color information we want to change.

7. To test that we have the right element we simply need to change the values in that block to see if it in actual fact does control the colour of the element. We can test this by changing the css selector to see if changes in the css file there will target the html appropriately. For the sake of this demonstration let's change the orange colour of the heading to blue.

and, as you can see, the live preview obliges and has changed the heading colour from orange to blue.

So now we know that in order to change the orange heading colour for h2 elements on the Joomla.org page we need to change the hex value assigned to the .content h2 rule in the template.css file. If you have opened the file live on your server via ftp, to make the change live, all you need to do is to save the file and the ftp client will upload the file to the server and make the changes to the site.

View the screencast

A big thanks to TJ Baker for posting his quick screencast of these steps. It's easy to see from this how invaluable this tool is for beginner and css experts alike.

Other Tools of the trade

While I know that there are plenty of other tools out there that can do a similar job (See below), for my mind CSS Edit is hands down the best interface and tool for the job. I may be a little biased though so I am certainly keen to be persuaded otherwise. Which tool do you use to edit and track down rogue css selectors in your stylesheets?

In browser tools

• Firebug
• Safari or Chrome Web inspector – there is a handy tutorial here regarding using this inspector.
• The Outline CSS option in the web developer toolbar.

Tools for PC Users

• Style Master
• Rapid CSS