Joomla Templates: Creating a Pure CSS Template | Part 3/Page 4 | WebReference

Joomla Templates: Creating a Pure CSS Template | Part 3/Page 4


[previous]

Joomla Templates: Creating a Pure CSS Template - Part 3

Hiding Columns

So far, we have our layout such that we always have three columns, regardless of whether there is any content included. From the perspective of a CMS template, this is not very useful. In a static site the content would never change, but we want to give our site administrators the ability to put their content anywhere they want to without having to worry about editing CSS layouts. We want to be able to "turn off" a column automatically or "collapse" it if there is no content there.

During the development of the Joomla 1.5 templating engine, there were a number of changes and improvements. Quoting directly from the Joomla development blog:

The changes to the template system in Joomla 1.5 can be divided into two categories. First, there are changes to the way things where done in Joomla 1.0—for example the new way modules are loaded, and second there are also a bunch of extra features, like template parameters…a quick overview:

Changes to the old ways

mosCountMoules

The mosCountModules function has been replaced by the $this->countModules function and support for conditions has been added. This allows designers to easily count the total number of modules in multiple template positions in just one line of code, for example $this->countModules('user1 + user2 ); which will return the total number of modules in position user1 and user2.

NOTE

More information is also available in the Joomla forum.13

So the general use of mosCountModules would be

countModules('condition')) : ?> do something do something else

There are four possible conditions. As an example, let's count the number of modules in Figure 9.7. We could insert this code somewhere in the index.php:

  • countModules('left'). Will return 4; there are 4 modules on the left.
  • countModules('left and right'). Will return 1; there is a module in the left and right-hand position.
  • countModules('left or right'). Will return 1; there is a module in the left or the right-hand position.
  • countModules('left + right'). Will return 7; counting the modules in the left and right-hand positions.

In this situation, we need to use the function that allows us to count the modules present in a specific location. So for example, if there is no content published in the right column, we can adjust the column sizes to fill that space.

There are several ways to do this. We could put the conditional statement in the body to not show the content and then have a different style for the content based on what columns were there. To make it as easy as possible, I have a series of conditional statements in the head tag that (re)define some CSS styles:

So we count:

  • If there is nothing in left OR right, we are 100%.
  • If there is something in left OR right, we are 80%.
  • If there is something in left AND something in right, we are 60%.

We then need to change the index.php file in the content div to

Change the layout css to

The PHP conditional statements in the head must appear after the line that links to the template.css file. This is because if there are two identical CSS style rules; the one that is last will overwrite all the others.

This can also be done in a similar fashion by having the if statement import a sub CSS file.

TIP

While you try to troubleshoot your conditional statements, you can add a line of code into your index.php, like this, to show what the value is:


This content column is % wide

So we are half-way there, but now we have empty div containers where the columns are.

Hiding Module Code

When creating collapsible columns, it is good practice to set up the modules not to be generated if there is no content there. If this is not done, the pages will have empty

s in them, which can lead to cross browser issues.

To hide the empty <div>, the following if statement is used:

Using this code, if there is nothing published in the left, then <div id="sidebar"> will not be outputted.

Using these techniques for our left and right columns, our index.php file now looks like the following code. We will also add an "include for the breadcrumbs module," the module that shows the current page and pathway. Note that this now needs to be included in the index.php file and also published as a module.

The Least You Need to Know

Elements such as columns or module locations can be hidden (or collapsed) when there is no content in them. This is done using conditional PHP statements that are linked to different CSS styles.

I would recommend a slightly different way of producing the footer. In the manner shown here, it is hard coded into the index.php file, which makes it hard to change. Right now, the "footer" module in the administrative backend shows the Joomla copyright and can't be easily edited. It makes much more sense to have a custom (X)HTML module placed in the footer location so the site administrator can change it more easily. If you wanted to create your own footer, you would simply unpublish that module and create a custom html module with whatever language you wanted.

In this case we would replace

with

We must also remember to add this position to the templateDetails.xml file.

TIP

There are several names associated with modules in Joomla: banner, left, right, user1, footer, and so on. One important thing to realize is that the names do not correspond to any particular location. The location of a module is completely controlled by the template designer, as we have seen. It's customary to place them in a location that is connected to the name, but it is not required.

This basic template shows some of the fundamental principles of creating a Joomla template.

CSS Template Tutorial Step 2

We now have a basic, but functional template. Some simple typography has been added, but more importantly, we have created a pure CSS layout that has dynamic collapsible columns. I have created an installable template that is available from www.joomlabook.com: CSSTemplateTutorialStep2.zip.

Now that we have the basics finished, let's create a slightly more attractive template using the techniques we have learned.




Printed with permission from Prentice Hall from the book Joomla! A User's Guide: Building a Successful Joomla! Powered Website written by Barrie North.



Digg This Add to del.icio.us


[previous]

URL: