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

[previous] [next]

Joomla Templates: Creating a Pure CSS Template - Part 4

Typography

Many of the links will need to be white, so we will define them as such globally and then modify the color for the center column:

The design has a stylize button. We create this using a background image from the comp. It's a thin slice that is tiled horizontally:

For tables, such as FAQ, we can add an easy background by repeating the use of the image we used for the teaser. Reusing the image is thematic and also saves on image download, making the pages load faster.

Modules need just a simple redefinition and adjustments to the padding and margins:

Menus, as always, need a lot of CSS style. Here, we keep it as simple as possible. We slice a single image that includes both the bullet and the underline, not that the styling is turned "on" by applying a module suffix of menu to any list of the links that we want this look applied to:

Last is the Tab menu at the top right. As an accessibility advocate, we want to set this up so that the tabs will scale as the font is resizing. Fortunately, a technique has been developed to do this; it's actually the same principle we use for our columns, the sliding doors again!

We will also try and do some speed optimization for the template and use just a single image for the left and right side of the "doors," as well as the on and off state. This is known as using sprites.

The CSS is not too hard; we just have to fiddle around with the vertical position of the image background for the "on" state:

We also need to add the module suffix of tabs to the module for the menu we are using.

If you look back at the original design, you notice that there were icons on these tabs. As we are already using two background images, one on the li and one on the link, we would need a third element on which to place the icon background. You could do this by having a span, but this is advanced CSS Jujutsu. I'll leave that as a homework assignment.

The last thing that remains is to revise the templateDetails.xml file. It needs to contain all the files and images used in the template so it will install properly as a zip file. There are a number of tools that will do this automatically for you if you are using 1.0.X, but at the time of writing, none are available for 1.5.

Our finished template should look like Figure 9.10.

FIGURE 9.10 Advanced template with typography

CSS Template Tutorial Step 3

We now have a template based on a comp (or design). Some simple typography has been added, but more importantly, we have created a pure CSS layout that has dynamic collapsible columns and a slick tabbed menu. I have created an installable template that is available from www.joomlabook.com: CSSTemplateTutorialStep3.zip.

Now that we have the basics done, let's start delving into some of the advanced features possible with 1.5 templates.

[previous] [next]

URL: