Arrow 1
psd2css Online Joomla Expanding Templates
PDF Print E-mail
Written by Administrator   
Monday, 24 August 2009 04:07

Welcome to the new Joomla Expanding Theme example/tutorial. If you want to have a Joomla (or any CMS) Theme that expands with your content, then this is the information for you.

The example is a Joomla theme, but the exact same trick works for Drupal and WordPress themes created with psd2css Online as well. This example outlines a particular technique. There are other ways to get a template to expand too, but this is a detailed tutorial on one specific technique.

Not only does this page describe how to use the technique, this page actually uses the technique and the theme here will expand and contract with this content. You can see some arrows and notes in the theme to help illustrate how it needs to be set up.

Here we'll present the bare minimum required to make a theme that will expand with your content using this technique, and a description of why the technique works. This includes 4 specific layers with specific Layer Naming Convention and then some very simple editing of the generated files after the conversion is completed.

The 4 Required Layers

To make the Expanding Theme trick work, you need at a minimum 4 special layers. You can certainly have other layers in your design, but these are required for the technique. These layers have to be laid out as described here, including the proper Layer Naming Conventions.

An Empty Container Layer

This is a layer that will function as a container for the other 3 layers in this technique and is required for the technique to work. All of the other layers have to fit inside this layer (this business of things being inside other things is very important for this technique). Name this layer container_empty.


This is the background to your main content.  It can be wider than the content is.  But the image or graphics in this layer need to be able to 'wrap' vertically.  That means that when the content gets long, this image will repeat over and over vertically to fill the space behind the content.  Solid colors work great for this.  Any kind of pattern however should be designed to 'wrap' vertically without creating visible seams.

Make the top of this layer be exactly at the same place the top of container_empty is - and I mean exactly - to the pixel.  This is easy to do with guides in Photoshop.  By default layer positions and edges 'snap' to guides and even to the edges of other layers.  Make the sides of this layer snap to the sides of container_empty too.  This middle_relative_bkgnd layer will 'fill' the top of container_empty exactly.

A note about the _bkgnd part of the layer name here.  That is necessary so that the image for this layer is part of a CSS background-url and not an <img> tag.  If it were an image tag, then the space the image takes up would be taken into account when the browser renders the flow of the page.  We don't want that - we want the browser to only take into account the space the content takes up when it reflows the page.


This is just the section where you want the actual Joomla content to show up.  In fact, whatever you put in this layer will be replaced with the Joomla content.  So don't bother putting any fancy designs or special colors in this layer - you won't see any of it.  If you feel like you want a color or design here, then what you really want is the color or design in the middle_relative_bkgnd layer (see above).

This layer needs to fit inside the middle_relative_bkgnd layer.  Make sure that the top and bottom of this layer snaps to the top and bottom of the middle_relative_bkgnd layer as well.


This anything that you want to display below the content as it expands.  This can be something very simple like just the graphic design of the bottom of your page, or you can place more layers within this layer like a footer for example.

Make sure the top of this layer 'snaps' to the bottom of middle_relative_bkgnd.  It will also need to fit to the sides and to the bottom of container_empty.  This layer will 'fill' the bottom of container_empty the same way that middle_relative_bkgnd 'filled' the top of container_empty.  So bottom_relative and middle_relative_bkgnd will completely cover container_empty exactly without overlapping one another.

Install The Template

That's it for building the special layers.  Design whatever else you would like in your page.  Feel free to place container_empty and the other 3 layers anywhere on your page that you want per the instructions above.  Save the PSD file and convert it to a Joomla template at psd2css Online.  Download to your computer the psd2css.zip file that is your new Joomla template.

Now you need to install the template into your Joomla installation.  You need to already have a Joomla installation.  I won't go into that here, but have it all installed and working fine with one of the themes that comes with Joomla.  To install a psd2css Online generated template into Joomla, the easiest way is to just use the cool Joomla Admin Interface.  Log in as the administrator to your Joomla install, choose 'Extensions' and 'Install/Uninstall', then from 'Upload Package File' choose 'choose a file'.  Select the psd2css.zip file you just had generated for you and hit 'Upload File and Install'.  Now your template is in your Joomla installation, so all that is left is to make that the current template.  Choose 'Extensions' and 'Template Manager' from the admin menus.  There you will see a 'psd2css' template listed with the others.  Click the radio button next to psd2css and then click on the 'default' star in the upper right hand section of that admin page.  Your done.  Visit your Joomla site (you can hit 'preview' from here) and you'll see your template working on your Joomla installation ... broken :)  One last thing to do...

Editing the CSS File

Now you have 3 small edits to make to the CSS that was generated for you to complete the technique.  One of the cool things about Joomla is that you can do this right from inside the Joomla administration menus.

Go back to the 'Template Manger' (where you made the psd2css template current).  Click right on the word 'psd2css'.  Here you can edit the template.  Click on the 'Edit CSS' button.  Choose the 'psd2css.css' file and click 'edit'.

There are 3 lines we're going to edit in this file.  Find the section labeled 'bottom_relative'.  Find the line in that section that reads 'top: Npx' (where N is some number of pixels - it's the position of where you designed your bottom_relative layer so I don't know what those numbers will be).  Delete that line - just hightlight and delete.  Now find the section called 'middle_relative_bkgnd'.  Remove the line from that section that looks like 'height: Npx;'  Same deal about the 'N'.  Then find the section called 'content_joomla_relative' and remove the line from that section that looks like 'height: Npx'.

Now refresh your Joomla page and viola!  Your theme now expands with your Joomla content!

Some Last Tips

I think a lot of people jump right in and try to build and convert a very complicated theme first thing.  It's helpful to start by making very simple designs that only use one or two psd2css Online features, or only attempt to accomplish one kind of effect.  Even if the simple one isn't what you'll be designing in the end, it's helpful to go through the whole process with the much simpler designs so you can see what happens for different kinds of layers.  Once you get a feel for what psd2css Online will generate for you, then it's much easier to tackle the more complicated and awesome designs you've got.

Get This PSD File

You can download the PSD file used to make the theme for this Joomla installation here.

The Video

Last Updated on Monday, 24 August 2009 06:30