Creating different styles for your Joomla template
When Joomla 1.6 was released, the ability to use multiple styles within one template came to life. It’s a fabulous feature for giving your pages different looks.
So how do we go about this? step by step!
This tutorial is for Joomla 2.5, if you need assistance with another Joomla version, please email of call us.
In this tutorial I will create two colour styles for my site template. One will have a blue background and the other a green one.
In writing this I assume you have access to your template via FTP or a console.
- Okay, lets get stuck in! Open ’templateDetails.xml from your template folder. At the bottom of the page, but above the </extension> tag, paste the following block of code (to make sure you have the clear code, please copy and paste in a notepad before you paste in the xml):
<config>
<fields name=”params”>
<fieldset name=”advanced”>
<field name=”templateColor” type=”list” default=”template” label=”Page colour” description=”” filter=”word”>
<option value=”template”>Default style</option>
<option value=”blue”>Blue style</option>
<option value=”green”>Green style</option>
</field>
</fieldset>
</fields>
</config>The first option you see is <option value=”template”>Default style</option>, this is the name of the template you are currently using. The bit where it says ‘value’ is the name of the css file of the default template, but without the .css extension behind it. In most cases this will be template.css. Later on you will see the name “Default style” in the back-end of your site, at the template manager.
Below the default style option are the two styles we are creating. You can change the value in the option tag into any name your want (leave out spaces or special characters). The name you fill in here has to be exactly the same as the name of the stylesheet you will be creating for the styles later on. The name you put in between the option tags (for instance “Blue style”) will be visible in the back-end so it’s a good idea to make it a sensible name.
Finally you can change the name of the label of the tag ‘field name’. This is the name you’ll see in front of the pulldown with page colour options in the back-end. Therefore I have named this ‘Page colour’ in my example. - Open ‘index.php’ in your template folder. Change this bit at the top of your page:
<?php $app = JFactory::getApplication(); ?>
Into this:
<?php $app = JFactory::getApplication();
$templateColor = $this->params->get(’templateColor’);
?> - We are still editing index.php, search for the reference to the stylesheet. It more or less looks like this:
<link rel=”stylesheet” href=”templates/<?php echo $this->template ?>/css/css_template.css” type=”text/css” />
Put the following line of code, right below that:
<link rel=”stylesheet” href=”templates/<?php echo $this->template ?>/css/<?php echo $templateColor;?>.css” type=”text/css” /> - Now we are off to the css folder of the template and we will create a few stylesheet files. At the ‘options’ bit in ’templateDetails.xml, we put ‘blue’ and ‘green’ in two of the options. So now create two .css files: ‘blue.css’ and ‘green.css’. Leave them empty apart from the following bit of code:
In green.css paste:body { background: #409723; }and in blue.css paste:
body { background: #2859A7; }The best way to go is to only put code in your colour stylesheets that deviates from your default template. For instance, for my blue style I want all my headers to be blue. So I only copy the h1, h2, h3 and h4 information from the default template to blue.css and change the colours to blue. In this fashion you can copy and adjust any part of the site. When a visitor looks at a page the browser will load the stylesheet of the default template first and then the colour stylesheet, all in a fraction of a second. That is why you don’t have to put all the stylesheet code in the colour stylesheets.
- Log in to the back-end of the site and head off to: “Extensions > Template Manager”. Here you see a list of already installed styles. Put a check just before the template you are using for your site and at the top right hand side of the page click on ‘Duplicate’. In the list a new item appeared and it will have a (2) behind the name. Click on the name to open the style for editing. Change the name to something sensible like “Template name – Blue”. At the ‘Advanced options’ on the right side of the page you see a pulldown with the options you created in templateDetails.xml. According to my example you now have the following options: “Default style, Blue style and Green style”. Choose a style and at the bottom left hand of the page (Menus assignment) check the pages you want to assign this style to. You are done, so now click on ‘Save & Close’ at the top right side of the page. Now refresh the front-end of your website and click on the menuitems you have just assigned a style to. If you assigned one of the colours, the background colour of the page will have changed.
Once you got everything to work, you can finish editing the different colour stylsheets…
