5. Continuation of the Template Book

Hi Folks, it's me, Hagen,

bad news ... it's not possible for me to finish the Joomla template book during the next months.

In December 2012, me and my wife Christine started a big project.


4. A drop down menu

EN001-Dropdown-menuAccording to my experience people want to achieve five things when they start to create a template. They want to have a kind of layout, their logo and their colours. As Navigation they usually want a drop down and since three years it should be "responsive". In this chapter we cover the dropdown menu.


3. Layout

Flexible Boxes – next-generation CSS designed to create layoutsWhen we talk about layout in web design we usually mean page layout. Page layout is the part of graphic design that deals with the arrangement and style treatment of elements (content) on a page. A content management system like Joomla can have thousands of pages (or more) and it's very important to think about an arrangement of content elements that is readable on any type of screen.

A page layout can be easily drawed with a pencil on paper or by using a page layout software.

The hard part is to transform the planned page layout into HTML/CSS and integrate it into Joomla.

Joomla used layouts based on HTML tables for a long time. They are easy to create, they are working well for 80% of the use cases but it is semantically wrong to use HTML tables for a page layout. HTML tables should only be used for rendering data that belongs naturally to a grid, like in a spread sheet. A good example for the use of HTML tables is the periodic table.

A few years ago there was a big discussion about the topic "Table vs. CSS Layouts" (Tables: The Next Evolution in CSS Layout).

Layout in general is hard because it is about design!

Using Cascading Style Sheets (CSS) is harder compared to HTML tables because CSS offer so many possibilities to arrange your content. To get an overview about working with CSS, read carefully Learn CSS Layout.


If a task is hard, someone will create a framework to simplify it. In our case companies that provided templates for different content management systems needed frameworks to make their development work easier. In the Joomla world a few frameworks appeared (Gantry, T3, Warp, Phoca) but they were mostly tied to the products of that companies. Later we saw company independent frameworks still tied to Joomla (Construct, Morph).

Regardless content management systems, the need for frameworks was also high and a few results are Foundation, Bootstrap, and Skeleton just to mention a few.


2. Files and folders

Template FoldersIn this chapter we want to start with the technical basics for a Joomla! 3 frontend template. It has a defined file and folder structure and we will create it. In general we have three options for creating a new template. We can start from scratch by creating our own template folder and all the necessary files inside, we can install a starter template and modify it or we could copy an existing template and modify it. We go for the first option and keep it as simple as possible.
The aim of this chapter is to understand Joomla's template structure.

Template name

First of all your template needs a name. The name consists of a technical name and a description. The technical name will appear in XML files, folder names, the database, the webservers files system and several caches. Avoid special characters and blanks in the name even if it's technically possible. I'll give my template the technical name j3cocoate. The descriptive name can be much longer like "Joomla! 3 - cocoate Template".


1. What is a Template?

smemon's handwriting

When you start writing with a pencil on paper you also start to develop your own handwriting. This handwriting is a mixture of your content and the presentation of that content. Depending on various ingredients like the type of the pencil, the type of the paper, the colours, the speed of writing and a few others, your handwriting will attract readers (or not :)).

After the invention of book printing, methods and rules to produce the perfect book were developed over centuries.

The world wide web with it's billions of websites is quite young and the development of similar (or better) methods and rules to produce the perfect website is just at the beginning. 

Before we start with our Joomla template adventure, let's have a look at the current situation.


Joomla! 3 - Create a Custom Template

Joomla! 3 Create a custom templateThe template is the most important and hardest part of your Joomla website. It consists of creativity, art, a lot of code and it is the connection between the content in your database and the "senses" of your visitors.


E-Commerce with VirtueMart 2

The Joomla E-Commerce extension Virtuemart has been installed worldwide about 250,000 times.
With version 2 of the VirtueMart extension the software reached a new level of quality.
This book provides an introduction to VirtueMart.

Ebook Amazon Kindle (3.99 US$ base price. All prices are calculated automatically by amazon):

71 pages depending on the medium.

Thanks to our sponsors!

Publisher:, France
Type of product: 
Our work: 

10. Shopper Groups

groupPeople who are visiting your online shop are either visitors or registered users. Depending on your Joomla configuration they could create a user account without buying anything.

Usually, after they bought the first product, they are a registered user on your website.

In VirtueMart you can create shopper groups and assign them to registered users.

Within shopper groups you have the possibility to offer different products or prices to different users.