Home arrow CMS Template Guide
CMS Template Guide

CMS template guide

Let's look at using CMS templates and designing with them. This is a basic overview, which points out some of the issues you'll find when choosing a template for a site.

We'll use Joomla CMS as the working example because it has the best templating system in CMS, unless you want to use full-page art layouts, in which case CMS-MadeSimple is a better example for initial work. However, Joomla is a more capable CMS so you'll find more uses for it. There are thousands of Joomla templates available, perhaps as many as 5,000. It's a first-class system to learn templating on, though when you come to work on other CMS you'll wonder why they are so poor by comparison.

CMS template design

A template is the visual foundation for a content management system. It defines the appearance of the page to the visitor. The template controls the structure of the page, the colours, the menus, and where the the different items of content appear. Without it, the page would be a plain text list with some randomly-placed images and so on, with no colours or structure. Templates are clearly vital to every facet of the operation of a CMS; and they can be easy to work with or difficult, according to the WCMS concerned.

Templates are also a fundamental part of the way CMS websites are different to flat sites (normal HTML sites with static pages): they help to enable the way a content management system isolates design and content. The template forms the structure of the page, the design; and whatever happens with the content is independent of this. You can change either and it doesn't affect the other to any great degree. This is in contrast to standard websites.

The thing to remember about a template is that it simply makes your life easier, you don't have to follow it slavishly if you don't want to. All a template does is give you a framework: you can just leave it as-is, load your site content, and have a site up and running very quickly. Or, you can change just about everything to suit your own design, at the cost of greater time expenditure.

Colours, positions, layout, menus, modules - everything can be changed. Choose a template in the first place because you like something about it - maybe the rough layout, maybe the menu positions. After that, everything is alterable, especially the 'appearance' of anything. You can remove almost everything and have an empty page for a big art layout if you like - or just change some colours and graphics. The most useful thing in any template is probably the menu choice as it often determines how you will go forward.

With some CMS you can have a different template on every page. However, this facility wouldn't normally be used, though a subtly different template version will often be used for different sections within a website. The most common uses for this are:

1. To maintain a site theme but introduce subtle changes for different categories.

2. For group websites where many different branches or departments want a distinct style in their section of the site.

Some template suppliers help in this regard as they several colour variations. In order to use this facility you must give your templates a different name, even though they may be identical except for a colour theme switch. You could increment them numerically, for example as colormatic1, colormatic2, etc.

The main classes of menu

Choice of menu type or position is a core decision, and may well be the reason you choose a particular template. It affects everything: the site architecture, usability, appearance, the page structure - it really is a fundamental part of the design process. There are some groups that menus generally fall into:

1. A horizontal top navbar
Always looks good; works well if you only have a few main items, as you can't get much on it; can have drop-down submenus if you don't mind the usability hit.

2. A left-column vertical menu
Best for pure usability; can look a bit utilitarian; will handle unlimited menu items (it doesn't normally matter how far down a page stretches to); can have fly-outs if you want to keep it short.

3. Right-column menus
These are slightly harder to get right, and work best when the template has strong visual features; not so good for basic, simple templates. This layout tends to emphasise the main content pane more. It may also be better for SEO in some circumstances.
4. Anything else
You can have menus anywhere you like but they probably won't be quite as good for pure usability, although they may suit a more fluid type of design better.

Templates can be altered

Look at the rockettheme template Versatility -
http://demo.rockettheme.com   [select May 07 - Versatility]

...then look at this rugby club site I built: www.ocrfc.com

It's probably hard to tell at first glance that this site uses the Versatility template, as I changed many colours and added more images. As you see, you can just use a template as a framework and then change near enough anything.

Look at the rockettheme template Replicant -
URL as before [select Jul 07 - Replicant]

...then look at an example in use, www.mccn.edu

You'll notice that the original, demo version at rockettheme had a very dark, moody feel to it - maybe good for a horror film promo but not much else. But at the nursing college site it's been turned into a bright, modern college scheme that really fits well. See how the page scrolls down in front of the bg (background) of a doctor's gown and stethoscope. It can be hard to get green to work well but this succeeds. This is a fine example of design that succeeds in every respect; and notice that it turned what looked like a difficult template to use in the real world into a very successful design. Fine use of a complex template.

Here is another example with this transparent-layer template:

Again, there is a strong contrast with the mood of the original. This template is excellent if you want to use large-scale bg images. However - resist the beginner's temptation to do this with any and every site - it doesn't always work. And there needs to be a strong contrast between the background colour and the text colour, otherwise the text will be illegible. For this reason, the bg normally has to be very light or very dark, with the text opposite in tone. You won't remember Oz magazine, of course, but poor use of the Replicant template can look like a bad issue of Oz. That was an underground magazine in London 35 years ago, and they liked to print with green text on black pages with photos embedded and so on. At the time it was thought highly subversive, but very few people would have been subverted, perverted or deverted as most couldn't read it. I tried and failed mostly. It was really useful to leave lying around on the coffee table and suchlike though.

Looking at the other examples on this awards page -

...and let's do some fast critiques. Impressive web design is one of the hardest things to achieve. I certainly can't compete here, but if people do put themselves up for award nominations, and maybe earn a living doing this sort of thing, it seems fair to use their work as an instructional example.

There are some good re-works of the rockettheme templates here. RT templates are some of the most capable and comprehensive in the world of CMS, and range from dead simple to almost impossibly complex. For example the MediaMogul template has all the bells and whistles anyone could want; Replicant, with its transparent layers, is one of the most advanced in CMS; and BentoBox for example is just clean and simple. So, there is a good range to choose from and the award nominees here have used them to the full. In some cases their treatments are unrealistic for practical purposes; in others, they are perfect for real-world commercial use.

The winner, aixam.biz, is impressive but no use in the real world as it is far too fat. A typical Italian-style treatment (eg way over the top), the index page takes over half a minute to load even on a 2MB hookup. Looks nice though, if you come back after 5 minutes. The transparent layers that the Replicant theme provides, if you want to use them in full, are certainly given a work-out here.

I think it would be fair to say that
www.mccn.edu uses this template better, since it is far more practical.

Next along, massivefps.com is the standard OTT gaming treatment of the BentoBox template. There are light and dark versions, as for many from this supplier.

Mintcreation.com - a pleasant treatment of the Firenzie template. If you look at the demo version, I'm sure you couldn't tell it was the base for this minty green business design site.

Grasski.net - a clever and businesslike use of the light BentoBox version. Never saw grass skiing before but it looks fun. This template usage is an example of high-standard design. if you look at the original template, as a demo on the template supplier's site, you'll see just how well the designer has adapted it here.

Stamurabasket.it - a fine sports club site from Italy, on the Sporticus template. Bright, young, just the job.

Some good designs here then - and the point of this section is that the end result doesn't have to look a lot like the original template, unless you want it to. If you look through the rockettheme demo versions, then at the sites quoted here, you'll see that the designers travelled some way from the original appearance and even the form.

Template tutorials

For some good tutes go to: http://tutorials.rockettheme.com

Download one of the templates, install it, and make some changes. Try and see if you can obliterate the original look and turn it into something new. My advice is to work with a simple template at first, even if you know that you'll need something more capable eventually. Learn to walk before you can run.

Template types

On installation, most CMS normally have a kind of 'boxy' look to their layouts. This is because that's how the default templates work; it's the easiest to use; and that look suits more sites than any other type. It's particularly appropriate for business sites in the financial sector of course. For that purpose, you'd most likely use light greys, dark greys, subtle blues etc, with perhaps one strong but small contrast colour. For example:

...or a bit more spicy:

You'd want a more fluid arrangement for many sites, though, and so you could choose a template in the first place that looked as if it will give you more freedom. Just remember that more freedom = more skill needed to get it to work.

For a youth market site, maybe in music or games, you might use a dark bg, bright colours, stark graphics. It wouldn't matter how 'unusable' the site was, that might be part of the attraction (unless you needed to sell something).

The next stage in templates is to use a layered design, perhaps with transparent layers, such as rockettheme's Replicant. There are also templates that are interactive; for example with 4 versions that change according to the time of day, with a moon and stars for night, a rising sun for dawn, etc.

All you need to do at first is try to visualise how you might use a given template to get the effect you want. It may all end up unrecognisable in any case.

Templates often have some sort of individual character or theme that allows you to differentiate them from each other. For example, they may have a simple business layout; a heavy-rock look to suit certain music types; a large number of module positions to suit a news site or portal; and so on. Find one to suit the theme of the site you're working with, and then start hacking it around.

You might well find that some sort of forum support comes in handy, when you want to do something with it but you don't know how.

First steps in template usage

Start out easy. Find a simple template and stick that up on the site for your index page, and get some content onto it for the search engines. You need to consider the SEO for CMS aspect of course, as that's what your website results are based on.

I like to work on sites live, if there are no great reasons not to, as it does no harm with a new site. If you're working with a great CMS like Joomla or Drupal you can't really go wrong; even if you manage to wipe out the entire site you can get back to where you were that morning in about 10 minutes, with a database backup restore.

Did I mention that you need to do regular DB backups? You should do them 3 ways:

1. From phpMyAdmin, on your server control panel;
2. By using a plugin for your CMS, which performs the operation from within the CMS backend admin panel.
3. By simply saving the web pages as files, using your browser.

Remember that there are no pages on the website, with a CMS - just text fields in a database, plus the graphics folders.

All you need to do is ensure the front page has some good content and the metadata looks OK. That's it. After that, you can play to your heart's content, as search engines won't penalise you for adding pages and content all the time - they like that. It doesn't matter about changes, news sites change every day and doesn't hurt them. If you don't have a site map registered yet - and I wouldn't, at this stage - then the SEs have no complaints if you chop and change. It's always a good idea to base your work on good SEO practice, of course, since that is the foundation of commercial success.

You can read more about SEO for CMS here.

How to alter templates

Sign up for a template club membership. Download a couple of templates (you don't buy them individually, most suppliers charge a quarterly or annual fee and you can get as many as you like).

Copy the entire package (or package group) and file the original safely. Never work on the original.

Set up your FTP client for the site you'll be working on; or alternatively, work on a local LAN dev site. You can install the XAMPP server package on another PC on your LAN, install a CMS, and use it as a local 'Internet' site. This is how a lot of dev (software development) work is done.

If you work on a website via FTP, then set up the local and remote folders for this on your FTP client such as FileZilla (recommended). First, try changing a colour: grab a menu bg graphic and modify it within your graphics app. FTP it up to the site, to the correct directory, and see what results. This procedure will give you a good idea of what to expect.

Always have backups so that when what you do doesn't work out, you can quickly revert to the previous good working copy.

Changing Joomla templates

J templates come as a zip package of files. Firstly, unzip the pack to see what's in there. With a 'big' template, there could be a bunch of things in there that you don't want to FTP up to the site. For example, there could be tutorial PDFs, source images, and extra modules. None of those go up to the site.

Locate the bare template zip and install that. You could FTP it, but the simplest way is to go into your J admin backend, locate the Installers tab at the top, go to Template Installer, and proceed from there. It takes about 2 minutes to install. Then go to the Site tab >> Template Manager >> Site Templates, and you'll see your new template there. Let's be brave and make it the Default template: check the box next to it, and hit the Make Default icon at top right. Now check the index page and you should have a new layout show up.

There are 3 basic things we change in templates to get a new look:
  • images and graphics
  • the CSS files
  • the PHP master file

Images and gfx
These are any visual element, not text. They include the header logo and/or header top area, and menu bg's (background images). Any of these can be .png, .gif or .jpegs.

One of the first changes you should make is to the logo or other header material. Find the logo (maybe logo.png or header.png?) and check out the exact size and fileformat. It might be 800 x 150px, a .png, for example. So what you'll need to do is create your own graphic of the same size and fileformat, give it the same filename, and FTP it up into the image folder on the site; you can overwrite the file there as long as you have a backup handy. The path will be something like:

Reload your browser: hit Cntrl+F5, that forces the browser to reload all page components. Occasionally you might need to flush the cache as well (in Tools, up at the top).

CSS files
There can be one or more. Simple templates just use one, heavyweight templates can use 10.

We'll need to change a colour or two in here. Find a line that has a hex code like #FF8000, and change it. Make a note of what the original was! I use a tool to do this and I couldn't work without it: ColSel 1.05 from Tucows etc:

You'll find you can't work without a good colour picker / hex code / RGB tool like this.

You can always 'comment' a CSS file to put in your notes. If you do this, your text is invisible. Note the slash-star format, reversed at the end. Anything between these symbols doesn't print.*
/* your private note on what you just changed */

You need a good text editor to work on CSS files, Windows Notepad just doesn't cut it. I recommend NoteTab Pro.

* In webapps, to 'print' means to display in the final resulting page, it's nothing to do with printing on paper.

PHP file
The master file for the template that controls the entire layout is index.php

We might need to remove or add a module position in here, but apart from that we try and leave it alone, unless you are a good PHP coder and keen to get down 'n dirty.

Module positions
One of the crucial elements in CMS design is module positioning. It can be hard to work out where all the modules are, or where you can place them. Here's a fix - run this command in the address bar of your browser:

Wow! You can see all the module positions now. Possible positions, that is - they won't display unless you publish them. You can see that this site runs on a 'traditional' 3-column layout, but that we don't use the left-hand column. If you don't publish a module in that column, it 'collapses' and the other columns or the content pane fills the area. To publish a module (aka a display block) is to switch it on or off within the admin.

So when you need to know where the modules could go, and their designated ID names, then just run that command. It's one of the many reasons to use Joomla for many publishing tasks, there are loads of ways it's easier to manage than anything else.

Templates and browser issues

One of the biggest problems you will have when working with templates are browser issues - getting the site to work right in all the various browsers such as Firefox and Internet Explorer. Browsers are supposed to be standards-compliant, in other words work in the same way. The theory - quite reasonably - is that a page should look the same whatever computer you look at it with. In practice this is not the case, and many browsers have small problems here and there. For example early versions of Firefox had problems with layers; Opera had line-height problems; Safari had... and so on.

The majority of these issues have been more or less fixed, with one notable exception - Internet Explorer. This is a terrible browser, rightfully called a rogue browser as it pays no heed to many standards and makes web designers' life a nightmare. The number of errors it has are legion, and these have to be allowed for by designers, who essentially have to produce two versions of a site: one for all the normal browsers and one for IE. Luckily, many of these problems have been fixed in Internet Explorer 7; but that still leaves as many as 50% of Internet users with IE6, which is a really awful browser. Unfortunately we have to cater for these visitors as they are likely to be ordinary people who have no idea about any technical matters, how to use the Internet properly, and so on.

The alternative Internet Explorer version of the website is normally provided in the CSS, with a special ie6_css file. You may find you have to make some changes in here, depending on how far you go with hacking your templates.

Some templates have more problems than others with IE6; for example RT Replicant is bad news in IE6, since the browser is so bad at interpreting png graphics and transparent layers, which this template is based on. If you want an easy life, then keep to lightweight templates without features that will cause Internet Explorer to fall over. There's a long list of things it can't swallow properly, though, even such things as basic menu lists, so fairly soon you'll be cursing the people who foisted IE on us.

SEO for CMS - template issues

You need to think about this subject as it is where your income originates. Poor SEO = poor website results.

At this stage, all you need to consider is template code validation. As soon as you set a template live on any page, go to the W3C validator (http://validator.w3.org) and check it. Enter your website domain name or page URL and check the page code for correct validation. This is the #1 task for any web developer, and the first step always taken after building a page or making changes. It should come up green, though up to 5 errors are probably fixable at this stage.

Joomla 1.0 versus 1.5 issues

We don't use the J1.5 series yet as there aren't enough plugins for our purposes. The first thing we would need is a native version of the sh404 security, URL and metadata plugin; but at the moment this only runs in legacy (compatibility) mode so it is not satisfactory. When that is fixed we'll look at this again.
[update: sh404 now has a native version for the J1.5 series, although there are a few issues]
[update @ 2010/01: this article was originally written in July '08 - Joomla 1.5 is now a feasible proposition but security needs a very close eye kept on it by the webmaster. A J1.5 site MUST have a webmaster who gets the J Security Bulletin and patches the app as needed]

Joomla 1.5 templates
However, the new Joomla 1.5 series does have a big advantage in the template department: template overrides allow even greater freedom. For example it is far easier to create a tableless design. This can be done in Joomla 1.0 but it's not very successful. In J1.5 it's good enough that you can have a tableless page layout with correct source-ordering - and that is a huge advantage. Few developers have ever heard of this, though. If this facility is utilised fully it means that Joomla is almost unbeatable in the SEO stakes.

The biggest thing Joomla needs right now is an upgrade to the code layout scheme, so that irrespective of the template designer's skill, the page layout is universally tableless. Cells, tables and so on became obsolete for web page layouts around 2002; I'm not a coder but even I was using layers and CSS exclusively for
building web pages by 2001. I'd given up with tables and cells by then, though dinosaur apps like FrontPage somehow managed to struggle on for years after it was clear where the future lay.

Joomla still uses the halfway-house technique of divs plus tables, which means the basic code layout is obsolete by some years, and it really needs fixing before anything else. All else is pure tinsel compared to that problem. Luckily, Joomla is so many light years ahead of most other CMS it doesn't matter too much just at the moment; but this will change as the rest catch up. And a lot of them do the pagecode layout properly, which gives them a massive advantage in the commercial world: accessibility and good SEO are given a big boost here. Remember that accessibility issues affect legal compliance in some countries.

Some good Joomla template resources

1. Go to: www.rockettheme.com   [home page]

...then: http://demo.rockettheme.com   [gallery]

On the top bar where it (currently) says: Jul 08 - TerranTribune, this is a drop-down menu. Scan through the templates here.

2. Go to: www.joomladesigns.co.uk/gallery/

Select the second item down in the list of four, Joomla Templates, then click the fly-out same-name item. Navigate through the hundreds of templates here with the left / right arrows at the bottom right.

3. Go to: www.joomlashack.com

Look through their Joomla 1.5 series templates. These are lightweight, fast templates - a good point as far as SEO is concerned. They are far more limited than RocketTheme templates but this is not necessarily a bad thing. The RT templates can be too 'phat' - ie bloated - and this is poor for SEO. The Joomla shack templates are fast and lightweight, with far fewer scripts running. In addition, some have tableless layouts with correct source-ordering, so that these might well be the best SEO templates for Joomla 1.5 series.

Agree or disagree? Have your say in the forum.

More CMS template points

We've only talked about Joomla templates, for the simple reason you can't do better. You will need to work with other CM systems of course; try out Drupal and CMS-MadeSimple first.

Drupal templates work in a slightly different way as the core application controls some colour aspects by default, though you can bypass this. CMS-MS uses a totally different approach: like Radiant CMS, you create your own page in HTML first and then use that. It will give you a very good idea of what works and what doesn't in CMS design.

Web Business Managers