#60 - Styling your Joomla Website

One of the great things about using Joomla, is that is generally easy and quick to setup a website (at least when you get the hang of it :). One of the things that people who are not familiar with web development struggle with, is to change the look and feel of their Joomla template. Here we suggest some great tips to help you style your Joomla site.

Styling your Joomla Template

A small CSS Introduction

A Joomla template using CSS usually uses a number of CSS files. Each file contains a number of stye items, which each define a particular "piece" of your template. You can style the headers, the backgrounds, the fonts, the bullets, the text size. Each style item, defines a part of the item. However, there are typically so many styles in the CSS file, that it very hard to figure out which style you need to change.

FireBug

FireBug is a tool which lets you click on a particular area of your site, and identifies which are the styles which make up the definition of the particular area you are analysing.

Take a look at the image. The paragraph which is highlighted is styled on line 144 of your template's CSS file (template_css.css) as "font-size:1em;"

So to change it, what you need to do is find line 144 of that file, and change it accordingly to the size you wish.

 Using this technique you can quickly identify which styles you need to edit!

Update: Compass designs have the following great article about Joomla CSS. Check it out.