Joomla Template Parameters

In this Joomla tip we are going to look at adding a simple parameter to your Joomla template so that you have the option to select various background colours, or images to your site.

The first thing you are going to have to do is to download your template folder to your desktop or where ever you store your Joomla files.

Simply open up your ftp client, something  CuteFTP Pro or  fireFTP which is a  free plugin for Firefox. Enter your FTP details and connect to your server and browse your files and folders for templates -> mytemplatemname and download this folder.

Now we need to open the templateDetails.xml file with our html editor, something like dreamweaver and add the following:

<params>
<param type="spacer" default="Template Color" />
 <param name="colorVariation" type="list" default="default" label="Color Variation" description="Background variation to use">
 <option value="red">Red</option>
 <option value="blue">Blue</option>
 <option value="green">Green</option>
 <option value="orange">orange</option>
 </param>
<params>

If your current template does not have any template parmeters then simply place the above between these two lines like this:

</positions>
<params>
<param type="spacer" default="Template Color" />
 <param name="colorVariation" type="list" default="default" label="Color Variation" description="Background variation to use">
 <option value="red">Red</option>
 <option value="blue">Blue</option>
 <option value="green">Green</option>
 <option value="orange">orange</option>
 </param>
<params>
</install>

So what will this do? Well what we have just done here is to create the following options within our Joomla administration template settings.Note when writing the word colour (UK spelling) make sure you spell it color (US spelling) otherwise it will not work.

If you now upload the templateDetails.xml file back to your template folder and navigate to Extensions -> Template Manager and click on your template name you should now see the above template parameters. Yes? Great! But that is not it by any means what we need to do now is create some css style sheets and edit our index.php file.

Calling the style sheets through php

Open your index.php and look for the following tag </head> just before this add the following:

<link rel="stylesheet" href="/templates//css/backgrounds/.css" type="text/css" />

Great! Now save this and  upload the index.php back to your template folder.

Creating the style sheets

The best way to do this is to create a new folder within your templates css folder called backgrounds.

Now you can create a new css file  in dreamweaver of open notepad and add the following:

body{
 background: #237db0;
}

Now save this as blue.css into your backgrounds folder.

Repeat this step for all your different coloured style sheets and then upload the entire backgrounds folder to templates/css/

You should now be able to go to your Joomla administration and select the coloured background for your website from the template parameters and hay presto the colour has now changed.

This can also be done using images, you can simple create an image in photo shop or which ever image editor you have and instead of using background-color you could use this:

body{background: url('/../../images/tartan.jpg') repeat;}

This will repeat an image throughout the background of your template.