Generating a Liquid Layout in Joomla

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.

4 Responses to “Generating a Liquid Layout in Joomla”

  1. Chris Stanley August 24, 2012 at 10:01 am #

    When I Googled “fluid layouts in Joomla” your site came up first above the few sites with basic instructions on the DW CS6 Fluid Grid Layout.
    I’m not a CSS guru but know enough. Have you ever tried to make a Joomla template with the Fluid Grid Layout in DW CS6 and if so, can you share anything? Thanks.

    • Cara August 28, 2012 at 10:42 pm #

      Chris I have just recently loaded Dreamweaver on my MacBook Pro and have yet to play around with it. The previous version I used to only set-up the maximum number of columns for a custom template and then in Joomla I used CSS to control the fluid layout. In the past I’ve found that Dreamweaver doesn’t always produce the cleanest code — so I use CSS to make my page layouts work and WOW page viewers.

      I did my own Google search on the subject and after reading this info am a bit intrigued to learn more. I’ll post more as I investigate and I hope you’ll do the same. We both may learn about the new CS6 version and if the coding really will generate clean code that is safe to generate a fluid layout.

      • Chris Stanley August 28, 2012 at 10:55 pm #, my own site was built entirely in DW CS6 on the fluid layout framework. Once you understand that fluid.css has 3 sections for mobile, tablet and desktop, styling the layout is not that hard. What I REALLY want to do is take that layout and make it into a Joomla 2.5 template and there I am stuck. is a free fluid grid Joomla template which is great but I just have not had time to get into the guts and understand how it works. My css is not that great but I think good enough but learning every day!
        Take care!

  2. Chris Stanley September 9, 2012 at 12:47 am #

    Hi Cara:
    I followed your kind suggestion re joomlafuture and this is where I’m at If you want the template I’ll happily email it to you. SMS your email to +66 85 439 4924 (Thailand) or email me and its yours. My css is very rudimentary but you’ll see I managed to move the sidebar to the right and fix the menu. The whole thing is lightning fast for Joomla!
    Take Care,

Leave a Reply