Joomla!™ 1.5 Single Template with Multiple Layouts
Have you ever wondered how you can have a single template but different layouts for different sections of your Joomla!™ site? There may be different ways to achieve this depending upon what sort of changes you want in the layout. You can either change the template or you may be able to make a template override for a particular component or module.
This article is going to explain how to change the template file to make the required changes.
Let's assume that your template is called template_name. You will find your template's control file at: /templates/template_name/index.php. This is the file that you will need to edit to change the layout.
After the line:
defined( '_JEXEC' ) or die( 'Restricted access' );Add these lines of php code:
$pageoption = JRequest::getVar('option', '');
$pageview = JRequest::getVar('view', '');
$pageitemid = JRequest::getVar('Itemid', '');
$pageid = JRequest::getVar('id', '');
What this code does is get the different parts of the URL of the current page the user is on. We will then use this information to determine if we need to do something special on this page.
Let's assume that on the home/front page we do not want to have the breadcrumbs displayed. In the code in index.php where the breadcrumbs module is loaded, we would change the code from something like this:
<div id="breadcrumb">
<jdoc:include type="modules" name="breadcrumb" style="xhtml" />
</div>
to:
<?php if ($pageview != 'frontpage') : ?>
<div id="breadcrumb">
<jdoc:include type="modules" name="breadcrumb" style="xhtml" />
</div>
<?php endif; ?>
Now the breadcrumb module will only be loaded if we are not on the home page.
Lets say that you have a 3 column layout for your template. Have you had the problem where there is one or two components that are just not displaying nicely when they are in a 3 column layout, so you would like them to be on a 2 column layout. You could go change all of your modules in the 3rd column position, so they display on all menu items except the one or two component pages. But every time you add a new menu item, you have to remember to go back and change the module to display on these new pages. What you would like is to be able to set the 3rd column modules to display on all page, but not load the 3rd column modules on the one or two component pages.
Here is how you solve this problem. Once again added the lines of code after the _JEXEC line shown above in your index.php. Find the code that loads the 3rd column, we will assume that the 3rd column is in module position right. Our current code will look something like this:
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
The components that are giving us the layout problem are for example our Calendar Component (com_calendar) and our Example Component (com_example). Here is how we would change the above code, so the right modules are only loaded on pages which are not com_calendar or com_example:
<?php if (($pageoption != 'com_calendar') && ($pageoption != 'com_example')) : ?>
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>We can now set out right modules to Display on all pages, but they will not be loaded on the Calendar and Example component pages.
Using the variables above we can get more sophisticated in our changes. Maybe we want to change how the Resources section gets displayed in our template. We find the ID of the Resource section and can then check if the $pageview is section and the $pageid is the ID we found for the Resource section. We may not need to change the layout of the index.php, but just need to change the CSS to change how the section is displayed. We can change the background color of the Resource section (ID = 12) to red, for example, using this code:
<style type="text/css">
/*<![CDATA[*/
<?php if ($pageview == 'section') && ($pageid == '12') {
echo '#content{background-color: red;}'
}
?>
/*]]>*/
</style>











Comments
Please enter your comment below