I’m developing sites using the the CMS Joomla and building my own custom templates. Generating a custom template for Joomla or any other CMS offers some fun challenges. This small obstacle means that to get Joomla to serve up the page layout I created with CSS and html, I’ll need to tweak CSS, html and reset paths in Joomlas back-end. My wonderful Web Standards instructor, Barb Ackemann developed a great cheat sheet to help with many fixes required to get a custom Joomla template looking the way I’d like it to. This is one of Barb helpful adjustment.

This fix is to make your template fluid with conditional statements and variables

This example uses a liquid design with a left column width of 20%, and a right column width of 30%. Left and center columns are floated left, right column is floated right. Two background images are used to create the faux columns. The content area will be either 50%, 70%, 80% or 100% depending on the presence of modules for the left or right columns. This is going to allow a three column layout to to become a two layout if nothing is position in one the columns and content will expand across the empty column. This allows the flexibility of having more than one layout from one template.

Add these 4 lines to the opening php block:
if($this->countModules(‘left + right’) > 0) $layout=”50″;
if($this->countModules(‘right’) <= 0) $layout=”80″;
if($this->countModules(‘left’) <= 0) $layout=”70″;
if($this->countModules(‘left + right’) <= 0) $layout=”100″;

and in my html I reference that variable wherever needed like this:
<div id=”content”>

Then write css rules:
.content-50 {width:50%;}
.content-70 {width:70%;}
.content-80 {width:80%;}
.content-100 {width:100%;}
Remember to remove any width setting on #content. You’ll also need to add the $layout suffix to the
divs that load the faux column images so you’ll be able to rule when the background images load.