Serving the Planet Earth from Nashua, NH

Website Templates - Good or Bad?

Lately, I've heard a few new clients mention that other web design companies are giving templates a bad rap. They say that they don't use templates, that everything they create is "custom designed" just for them. First of all, that's nonsense, especially when creating a CMS site like Joomla or Wordpress, they use templates as 'skins', easy to change according to your mood, in some cases; and they come with a few simple default templates to customize. So customizing a CMS website is really like using a template as a lump of clay; it's important to choose the right clay to start with.

I work with Joomla, so we'll talk about website templates for that CMS. Joomla has been around for a long time, and is the most popular Content Managed Site systems out there. I personally love Joomla, and have become somewhat of a master of its systems. With over 8,000 extensions (add-on programs and enhancements), Joomla can do almost anything - and there are literally thousands of templates made just for it.

Ok, enough of the shameless plug for Joomla; here is where it gets real. Choosing the right template design is crucial to your website's success. Go back and read that last sentence again. With so many choices out there and so much information about them, it's impossible for a layman (or even a busy web designer) to make the right choice of a template to start with. I've found that there are only a few sources for the best Joomla templates out there, and they can be used by newbies with a little learning curve. The top three I like are YOOTheme, Shape5 and Rockettheme (in that order).

YOOTheme - This template and web tools creator is one of the best out there, simply for their advanced typography and CSS styles. But on top of that, they build their websites with the Warp5 Framework, a Web 2.0 development tool, that search engines and humans both adore. With great color schemes, collapsible modules and advanced HTML 5 design, these templates are very easy to customize for a web designer familiar with Joomla. Their newest templates come with WidgetTools that make advanced effects like slideshows and galleries easy. Check them out at www.yootheme.com/demo

Shape5 - Shape5 has a different style, but are no slackers in typography and design. I like their color schemes and layouts overall, but they're not as versatile or easy to use as YOOTheme. They have some great tools as well, and their templates are search engine friendly. See them at www.Shape5.com

Rockettheme - These guys are really great artists, with a more hard core design if your target market is younger audiences (13 to 30). Don't get me wrong, you can make one of these templates look great for just about any service or product, but my general impression is hip and cool from them. Check them out at www.rockettheme.com

Working with your template, not against it - When using one of these advanced templates, make sure to use the systems already programmed into them. The developers worked really hard to give you great effects for header tags, menu icons and DIV classes; use them.

Here's an example: when I use YOOTheme templates, there are a few things I can do really easy just using built in styles. It's important to study the template's features and CSS styles that you can use; they can save you hours of HTML writing, or avoid dangerous SEO faux paus like using tables to make columns. Here is some of the typography of this website:


Dropcap: use <p class="dropcap">. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Horizontal Rule: <hr> tag with class="dotted"

Unordered List Styles

  • Default <ul> tag
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • <ul> with class="plus"
  • <ul> with class="heart"
  • <ul> with class="arrow"
  • <ul> with class="star"
  • <ul> with class="check"

Ordered List Styles

  1. Default <ol> tag
  2. Lorem ipsum dolor
  3. Lorem ipsum dolor
  1. <ol> tag with class="disc"
  2. Item 2
  3. Item 3
  4. Item 4

Div and Span Styles

<div> or <span> tag with class="note" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
<div> or <span> tag with class="info" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
<div> or <span> tag with class="alert" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
<div> or <span> tag with class="download" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
<div> or <span> tag with class="tip" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.


Just by using some <div> classes in your content, you can get these great effects easily. If you use an advanced editor like JCE for Joomla, you can choose these styles from the Styles Dropdown in most cases.

Who says templates are bad now?

Here's an important hint for displaying typography in the back end of Joomla - first of all, get JCE Editor for Joomla and make it your default editor. Now, go to Components>JCE>>Config and setup your Formatting: Disable Force Container Element, Newlines: Paragraphs, Editor Content Class: Custom. Set your Custom Editor Content Class to: templates/$template/css/editor.css, Use Template CSS: No, Custom Css File: templates/$template/css/editor.css again.

This will let your editor in the back end display your CSS Styles in real time as you apply them. One more thing to do to get this to work: Using an HTML editor (or notepad), go to your templates/YOURTEMPLATE/css/editor.css and copy and paste this near the top:

@import url(typography.css);
@import url(custom.css);
@import url(layout.css);
@import url(system.css);
@import url(style.css);
@import url(reset.css);
@import url(modules.css);
@import url(reset.css);
@import url(menus.css);

This will make your editor import all your styles from your template. Makes it easier to make your site look awesome.

So, to sum up, stop giving templates a bad name. The right website template will make your site shine, quicker, cheaper and easier than you dreamed possible. Make sure to pick one that does not use tables, but div statements for important content. Tables are fine for schedules and spec breakdowns, but search engines don't really like them, so stick to paragraphs and 'divs'.