irislines web design
irislines web design

Making your template flexible with conditional statements and variables

Using conditional statements you can control whether your template creates a div and module position for a left or right sidebar depending on whether a module exists for any given page.   But this does not cause the content to stretch to fill that available space when no sidebar modules are present.

It IS possible to use conditional statements in the opening php block of your template to set values of variables which are then used in the template to create divs with different classes depending on the modules present.

For this example I’m using 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.

I 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:

Then I can 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.


Tags: , , ,

IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391