Home > Joomla!™ 1.5 > Multiple Layout Template

Joomla!™ 1.5 Single Template with Multiple Layouts

Attention: open in a new window. PrintE-mail

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

avatar Lori
0
 
 
This article looked like exactly what I was looking for, but I think you have left something out. In every example you have endif statements but no if statements.
Comments
Name *
Email (For verification & Replies)
Code   
Submit Comment
Cancel
ChronoComments by Joomla Professional Solutions
avatar Laurelle
0
 
 
Thanks for noticing that Lori, the editor eat the if statements. I have added them back in again.
Comments
Name *
Email (For verification & Replies)
Code   
Submit Comment
Cancel
ChronoComments by Joomla Professional Solutions
avatar Susan
0
 
 
I like Joomla. It has so many templates. The choice is great. Besides, it is cool that there is a lot of information about it.
Comments
Name *
Email (For verification & Replies)
Code   
Submit Comment
Cancel
ChronoComments by Joomla Professional Solutions
avatar Steph
0
 
 
Is there a way to apply a style sheet to just a handful of articles?
Comments
Name *
Email (For verification & Replies)
Code   
Submit Comment
Cancel
ChronoComments by Joomla Professional Solutions
avatar Laurelle
0
 
 
Hi Steph,

Yes, there is. One solution would be to put php code around the loading of the stylesheet in the head. Something like:
if ($pageitemid == xx OR $pageitemid == xy OR $pageitemid == xz) {
include the stylesheet here
}
Comments
Name *
Email (For verification & Replies)
Code   
Submit Comment
Cancel
ChronoComments by Joomla Professional Solutions

Please enter your comment below

Please note, all comments are reviewed before being posted. All links will be removed from comments.

Comments
Name *
Email (For verification & Replies)
Code   
Submit Comment
ChronoComments by
Joomla Professional Solutions

Reliable Joomla template providers:

joomlart.com - Professional templates Rocket Theme Joomla templates
Joomla!Shack - css Joomla templates

Below are the web hosting providers that we recommend to our clients. All have an excellent reputation, fast servers and most importantly awesome service!

Rochen Joomla Shared or Managed VPS Web Hosting HostGator Shared and Fully Managed VPS and Dedicated Web Hosting
WiredTree Fully Managed VPS and Dedicated Web HostingLiquid Web Shared and Fully Managed VPS and Dedicated Web Hosting

Joomla! News

CMS?

A content management system (CMS) is computer software used to create, edit, manage, and publish content in a consistently organized fashion. A Web content management system is designed to simplify the publication of Web content to Web sites, in particular allowing content creators to submit content without requiring technical knowledge of HTML or the uploading of files. 1

Read more

Recommended CMS?

We specialize in Joomla!™, Drupal, and Wordpress. All of these CMSs are popular open source software and have their own strengths for different situations and website needs.

Read more

Testimonials

Wow! I wish everybody gave as clear and understandable instructions as you gave to me.

David

Read more

Website Poll?

Would you like a poll on your website? With Joomla! polls are easy!




Results

WebDeveloper News

  • Dead Pixel Society
    FANS OF ICON ART and The Big Web Show, listen up. Tomorrow’s Big Web Show guest is Justin Dauer (AKA @pseudoroom) of The Dead Pixel Society. Justin was a web...
  • On Design Conferences
    A GOOD CONFERENCE is a designed experience. I don’t mean a visually over-designed brandgasm. I mean an educational and emotionally considered narrative. To me, the ideal conference offers a single...
  • I Remember
    THERE WAS THIS GUY, sax player, used to honk all up and down the Q Train to Coney Island. Thought he was Sun Ra. Wasn’t.
Joomla! Drupal phpBB Wordpress Gallery2 Drupal  - Open Source CMS phpBB - Open Source Bulletin Board/Forum Joomla! - Open Source CMS WordPress - Open Source Blogging CMS
PHP - MySQL - Apache - W3 Valid PHP MySQL Apache CSS Valid XHTML Valid