The HD-Framework: Template Parameters

HTML5 introduces a few new concepts that you can use to better structure your website. These aren't just glimpses of a future technology however, they're concepts that you can include now and will be understood by all browsers.

 

 

HD-Framework
Download for Joomla 2.5/3

 


wireframes | html5 | collapsible module positionstemplate parameters | template overrides | bootstrap


 

Template Parameters

Joomla’s template parameters act as a control panel, enabling you to change the configuration of your template with the click of a button. This is particularly useful if you intend on using the same template on a variety of sites but don’t want the appearance to be the same.


The Files

The template parameters are all declared in the templateDetails.xml file and are used in the index.php file. The parameter settings are stored in a tiny file called params.ini within the template folder. It simply lists the parameter title and the corresponding value. The file is overwritten each time the parameters are altered via the template manager and can be easily edited with any text editor.

 

 

The "Theme" Parameter

One of the most useful features is setting up a “theme” parameter that lets you load up a specific additional CSS file. In this example we’ll have two CSS files that have a simple “background-color” rule, and we’ll call them “red.css” and “blue.css”. In this case the parameter you choose is actually the name of the CSS file you wish to load.

 

In the templateDetails.xml file between the <params></params> tags we’ll include the following line…

<param name="theme" type="list" default="red" label="Theme" description="Choose template theme from list">

<option value="red.css">Red</option>

<option value="blue.css">Blue</option>

</param>

 

This sets out a drop down menu called “Theme” displaying the two parameter options. By default, “red” is already selected. The value of the option is declared before the title, so if you select “Red” you have selected the value “red.css”. The parameter “label” and “description” are visible only on the template manager page. The parameter “type” is set to “list”, displaying the options in a drop down menu style. To include any further options simply add them before the closing </param> tag.

 

Calling the Parameter

Now that the parameter choices have been laid out we need to edit the HTML so that the parameter is called and used. In the index.php file we’ll include the following line in the <head> section of the HTML.

 
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get( 'theme' ) ?>" type="text/css" />

 

The values “baseurl” and “template” are generated depending on the URL of your site and the name of your template, for example on this site the code would be rendered as.

 
<link rel="stylesheet" href="http://hyde-design.co.uk/templates/css/red.css" type="text/css" />

 
The main element here is that by setting the theme parameter to “red”, it has loaded the “red.css” file.

 

 

Other Possibilities

In this example a CSS file was called by a parameter to change the background colour but the CSS could also change the size of the module position divs, the colour of the text, the background images and hyperlink behaviours. Of course you can have as many parameter options as you like, allowing you to provide numerous options for various CSS files (rather than one parameter to choose one file), therefore you can have a separate parameter to choose a typology only CSS file, or a background pattern only CSS file, or a hyperlink behaviour only CSS file, allowing you to mix styles and provide a greater variation of display.

Web Design & Development
07845 950063
This email address is being protected from spambots. You need JavaScript enabled to view it.