How to modify the template

From HAA Best Practices Wiki
Jump to navigationJump to search

The appearance of the site is controlled by the Lavinya6 template. You can substitute another template from the many that are available on the Web or you can modify the Lavinya6 template. In order to modify the template you need to understand how the page is constructed. This is fairly complicated and requires an understanding of html and css. It's not for the faint of heart.

The basic structure of the page is controlled by the file joomla/templates/lavinya6/index.php. This file outputs a series of div's and tables that set up the basic structure of the page. It also includes the joomla components and modules within the page. There is no formatting output by index.php, and (with some exceptions) none by the modules. Instead the formatting comes from the Lavinya6 template file.

The template file is in joomla/templates/lavinya6/css/template.css. This file defines the formatting for various elements and classes.

In order to make changes, you must first determine which class/element you wish to change and then edit template.css to add/modify that element. You can find the names of the classes and elements in the pdf file linked below. (I created the file by looking at index.php, and I don't guarantee that it's 100% accurate but it should be good enough for most purposes.)

With modern browsers (Chrome, IE 9, Firefox with the Firebug extension) you can inspect the various elements of a page and determine the source of the formatting for any element. This is a valuable facility and I highly recommend using it if you are going to make changes to the formatting.

Pdf_icon.png Diagram of the Lavinya6 page layout Info_circle.png

Return to Design How-To's