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

[previous] [next]

Joomla Templates: Creating a Pure CSS Template - Part 4

Column Backgrounds

Recall that when we put a color background on the columns, the color did not extend all the way to the footer. This is because the div element, in this case sidebar and sidebar-2, is only as tall as the content. It does not grow to fill the containing element.

We have to use a technique called Sliding Faux Columns, with which you essentially create two wide images that will slide over each other. We need to create two new containers to hold the backgrounds. Normally, we could apply one to the #wrap, but I am using an extra (and wasteful) container for illustration purposes.

For a full description, you can check out these two guides:

https://alistapart.com/articles/fauxcolumns/ https://www.communitymx.com/content/article.cfm?page=1&cid=AFC58

In our case, our maximum width is 960px, so we start with an image of that width. In the image source files, it is slidingcolumns.png. We then export two slices (I used the same slice and just hid/revealed the side images), one 960px wide with a 192px background on the left, and one 960px wide with a 196px background on the left.

Where does 192px come from? It's 20% of 960, as our columns are 20% wide.

We use the background-position property to place the images in the correct place. Here, we are using condensed CSS format so they are part of the background property:

In our index.php, we simply added an inner container inside the wrap:

We also need to put a conditional on the closing divs:

We must also put a background on our footer and bottom modules/elements; otherwise, the column background would be shown:

We need to clear the floats so that the float container (the faux columns) will extend to the bottom of the page. The traditional method to do this was to use the property :after. But with the release of IE7, this method will not work completely. We need to address clearing the floats in Internet Explorer 6 and 7, and this is where it all goes down the tubes.

A couple of solutions have been found; we are going to use the Float (nearly) Everything option here.

Thus, we add a simple clear:both to the #footer, and we add floats to the fauxcol wrappers. We add these to a conditional stylesheet specifically for IE6:

We will have to add some conditional statements to the head of the index.php file:

Flexible Modules

In our design, we have a large initial module block. We don't know how tall the text will be that is needed. To solve that problem, we put the module jdoc:include statement in a containing element and give it a background of the same color as the image. This is the same strategy we used for the header:

Note, we have also used a conditional comment so that if the top module location has no content, the orange teaser image will not be there. What will be there is an empty container that will contain a little of the background image and 20px worth of vertical padding. This is purely for aesthetics.

The CSS needs to use CSS specificity to override the moduletable styles defined earlier:

Now we need to focus on some of the typography.

[previous] [next]

URL: