Displaying items by tag: templates

Saturday, 01 March 2008 07:36

Village Stationery - Web Template

Key Tasks:	Skills Utilize:	Technologies Used:
Create Template that accurately reflects Graphic Designers vision	xHTML, CSS PHP	Dreamweaver Gimp

Published in Blog

Changing layout in Joomla Templates using the body tag.

I'm a big fan of clean code. If I can re-write some code to do the same thing using half as much code I'm all over it. Often in Joomla! templates (especially commercial ones) the logic for controlling the module positions just strikes me as cumbersome.

Here is one solution I have written to help manage the code that creates the dynamic layout of Joomla! Using the countModules() method and changing the <body> id tag.

At the top of the template index.php I set the variable $templateLayout to 'Center.' This tells the CSS and the code furthur down the file that only the center div section is to be displayed.

<?php
$templateLayout = 'Center';
?>
<html>
<head></head>
<body id="<?php echo $templateLayout; ?>">
</body>
</html>

So our key variable is $templateLayout. It's value will determine the type of layout assigned to the body id.

Now we need to add some logic statements to change $templateLayout in the event modules exist in the left or right positions:

<?php
$templateLayout = 'Center';
//Adds 'Left' to the front of the $templateLayout
  if ($this->countModules( 'left' )){
	$templateLayout = "Left".$templateLayout;
  }
//Adds 'Right' to the end of the $templateLayout
  if ($this->countModules( 'right' )){
	$templateLayout = $templateLayout."Right";
  }
?>
<html>
<head></head>
<body id="<?php echo $templateLayout; ?>">
</body>
</html>

So now the $templateLayout variable has 4 different possibilities: 'Center', 'LeftCenter', 'CenterRight', or 'LeftCenterRight.'

Using this you can can modify the CSS Layout accordingly:

/*Left and Right Divs are not displayed*/
body#Center div#center{width:100px}
 
/*left or right and Center are displayed*/
body#LeftCenter div#center{width:777px}
body#LeftCenter div#left,
body#CenterRight div#right{width:333px}
 
/*left, Right and Center are displayed*/
body#LeftCenterRight div#left{width:250px}
body#LeftCenterRight div#center{width:500px}
body#leftCenterRight div#right{width:250px}

It is important to filter out the left and/or right div elements when they are not needed. So additional logic is needed in the body of the document.

<?php if (substr($templateLayout,0,4)=='Left') : ?> 
	<div id='leftColumn'> 
		<jdoc:include type="modules" name="left" style="xhtml" /> 
	</div> 
<?php endif; ?> 
 
<div id='content'> 
	<jdoc:include type="component" /> 
</div> 
<?php if (substr($templateLayout,-5,5)=='Right') : ?> 
	<div id='rightColumn'> 
		<jdoc:include type="modules" name="right" style='xhtml' /> 
	</div> 
<?php endif; ?>

Again using $templateLayout I again applied some logic statements. Using the substr() PHP function, if "TRUE" is returned when looking for "Left" and/or "Right" in the $templateLayout variable, the the coinciding column is rendered.

Published in Blog