In this chapter we want to look under the hood of the Joomla template system to understand the basics. Creating a template from scratch is no rocket science. When you are building a website you always need to decide whether it is better to create a template on your own or to buy one. Besides of these two options you can also modify an existing template. To be able to make a useful decision you need to understand the process of creating a Joomla template.
Templates in Joomla
Joomla consists of a frontend (the website) and a backend (the administration interface). Both parts have their own templates. They are stored in the folders
- /templates - Frontend
- /administrator/templates - Backend
Each template has it's own folder. In Joomla 2.5 you'll find two preinstalled non responsive templates (Beez 2 and 5) and one template framework (Atomic)
Atomic a kind of an uncommon template framework
Beez 2 is the Joomla standard template.
Beez 5 is the HTML5 version of Beez 2
In this folder Joomla stores all the files that are common for all the templates, e.g. the Offline and the Error page.
The administrator folder looks the same
Bluestork is the default standard administrator template
Hathor is an optional administrator template. It is accessible and colours are customizable.
In this folder Joomla stores all the files that are common for all the templates, e.g. the Error page.
How to create a new Template?
You have three options for creating a new template
- start from scratch with creating a folder and all the necessary files
- install a starter theme and modify it
- copy an existing template and modify it
In this chapter we want to try option one. We'll create a responsive frontend template based on the Twitter Bootstrap framework for Joomla 2.5 from scratch. I'll keep it as simple as possibible. The aim of this chapter is to understand Joomla's template structure. It's quite easy to make it more and more pretty and complicate afterwards :)