| 22 June 2010
Posted in Tips and Tricks

Have you ever tried to develop a Joomla template or Have you ever tried to edit a Joomla! template?

If you have tried to do one of the things above, You will probably need to edit the Joomla! template css files

I will try to explain the Joomla! template css classes and I will also share my small secret how i edit a J! template css files

The location of Joomla Template CSS

The name of ALL Joomla template css files is (mostly) template_css.css or style.css or template.css and the location file is /joomla-root/templates/YOUR_TEMPLATE_NAME/css/ folder.

One of the powerful side of Joomla! is has many template developers. You will have well designed Joomla template css. Most template developers are using more than 1 css files. Because of this, Do not expect to find only one css in folder . You will mostly find 5+ css files inside it

How to Edit A Joomla 1.5 Template

Most of the Joomla! users wants to make small edits in their template like moving a button left to right or changing a background a table. If there are more than 5+ css files in your template css folder, How can you find the related CSS parameter?

It's time to share my secret. It's a secret which is known by everybody. The secret is FireBug (http://getfirebug.com/) . It's a firefox plugin. Firebug is the reason of why i'm using firefox.

Lets continue to with an example (I assume that you have installed and activated the FireBug).

1. Default Joomla Template looks like below



2. Lets make them black and align to right.

3. Rigth click on the 'Latest News' on the web page and click on the 'Inspect Element'

4. When you have clicked on the 'Inspect Element' , You will see the screenshot below



There are 2 panels as you can see from the screenshot. The rigth side shows you the related parameters.

You move your mouse to the css file name. Firebug will show the location of the css file location that you will need to edit.

5. Make the necessary changes on the rigth side of panel. When you make any change , You will notice the active web page will be changed instantly. (You must have basic css knowledge to edit the css file)

6. When you complete the editing template css file, You will see the screenshot below



7. It's time finish the editing Joomla! template css file. As you can see Firebug shows you the location of the css file. Find that css file . find the parameter in that css file and edit it

You have made a basic Joomla 1.5 template edit

FireBug has many useful feature. I've tried to explain a small feature of it. You can find more documentation on FireBug official web site

What do you about my small Joomla 1.5 template editing tutorial?