Make your own Joomla Template: Part 6 (Using Parameter)

Filed Under ( Joomla, Liquid Layout, Programming, Technology, Tips, Tutorial ) by admin on 19-09-2008

Tagged Under : Joomla, Tutorial

Joomla Template Tutorial - Part 7: For more flexible design, we can use parameters in our template. So, you can provide options to change template without your users touch line codes. For example, your user can choose background color.

In this post, we try to provide background color option. Following this steps:

Open templateDetails.xml within your Joomla\templates\mytemplate.

Enter following bold code:


1	<?xml version=”1.0″ encoding=”utf-8″?>
2	<install version=”1.5″ type=”template”>
3	<name>mytemplate</name>
4	<version>1.0.0</version>
5	<creationDate>12/12/07</creationDate>
6	<author>Wiwit Siswoutomo</author>
7	<authorEmail>wsiswoutomo@yahoo.com</authorEmail>
8	<authorUrl>http://www.phpeveryday.com</authorUrl>
9	<copyright></copyright>
10	<license>GNU/GPL</license>
11	<description>TPL_MY_TEMPLATE</description>
12	<files>
13	<filename>index.php</filename>
14	<filename>templateDetails.xml</filename>
15	</files>
16	<positions>
17	<position>breadcrumbs</position>
18	<position>left</position>
19	<position>right</position>
20	<position>top</position>
21	<position>user1</position>
22	<position>user2</position>
23	<position>user3</position>
24	<position>user4</position>
25	<position>footer</position>
26	<position>debug</position>
27	<position>syndicate</position>
28	</positions>
29	<params>
30	<param name=”backgroundVariation”
31	type=”list” default=”blue” label=”Background Variation”
32	description=”Background color variation to use”>
33	<option value=”blue”>Blue</option>
34	<option value=”red”>Red</option>
35	<option value=”green”>Green</option>
36	<option value=”orange”>Orange</option>
37	<option value=”black”>Black</option>
38	<option value=”white”>White</option>
39	<option value=”yellow”>Yellow</option>
40	</param>
41	</params>
42	</install>

  <?xml version="1.0" encoding="utf-8"?>  <install version="1.5" type="template">  <name>mytemplate</name>  <version>1.0.0</version>  <creationDate>12/12/07</creationDate>  <author>Wiwit Siswoutomo</author>  <authorEmail>wsiswoutomo@yahoo.com</authorEmail>  <authorUrl>http://www.phpeveryday.com</authorUrl>  <copyright></copyright>  <license>GNU/GPL</license>  <description>TPL_MY_TEMPLATE</description>  <files>    <filename>index.php</filename>    <filename>templateDetails.xml</filename>  </files>  <positions>    <position>breadcrumbs</position>    <position>left</position>    <position>right</position>    <position>top</position>    <position>user1</position>    <position>user2</position>    <position>user3</position>    <position>user4</position>    <position>footer</position>    <position>debug</position>    <position>syndicate</position>  </positions>  <params>    <param name="backgroundVariation"   type="list" default="blue" label="Background Variation"   description="Background color variation to use">      <option value="blue">Blue</option>      <option value="red">Red</option>      <option value="green">Green</option>      <option value="orange">Orange</option>      <option value="black">Black</option>      <option value="white">White</option>      <option value="yellow">Yellow</option>    </param>  </params>  </install>

Next, create a file named “params.ini” within Joomla\templates\mytemplate. This file contents choosed value for parameters. Enter following code:

1 backgroundVariation=blue
```
  backgroundVariation=blue
```



1	backgroundVariation=blue

Open your index.php within Joomla\templates\mytemplate. Change tag <body> become:


1	<body bgcolor=”<?php echo $this->params->get(’backgroundVariation’); ?>”>

    <body bgcolor="<?php echo $this->params->get('backgroundVariation'); ?>">
Now try to point your browser to http://localhost/joomla. You can see like following screen:

      
Now, try to open your joomla administration. Open at Extensions > Template Manager.
Click at link mytemplate:

      
You will get template edit page. Now, focus your attention at Parameters box. Change Background Variation become Red.

      
Click Save button on the top.

Point your browser to http://localhost/joomla. Background color has changed

1 Comment

Comments:

jdnforjc says...

Great Tut, until here…

somehow your bottom line code dosen’t wrap, and continues, resulting in a overflow scroll bar at the bottom…

eh, theres also no BOLD code as stated,

and it looks the same in Firefox & Internet Explorer

Posted on: 1/Jul/2009 @ 5:44 pm