The template is one of the most important pieces of a website. It provides the appearance, the design. It motivates new visitors to stay on your site and explore. Regular visitors and users appreciate being on a site with a beautiful and useful design. Think of other products, for instance. A car needs a good engine and tires but one of the most important reasons for buying one is often the design. Even if the design is not the main reason, it is often a trigger to contemplate the idea of purchasing and may cause a buyer to consider more tangible reasons. If the design is well-made, people expect the rest to be well-made, too. (Figure 1, Figure 2)!
Figure 1: Car with stickers (Richardmasoner)
Figure 2: Red car (FotoSleuth)
Both of these cars are made for different target groups. They are an example of different approaches in design.
A good template is not only about colors and graphics. The shape and positioning of the content is just as important. The website has to be user-friendly and reliable. Exactly this challenge reminds me of the two cars again.
Web design is still a young profession. A web designer often has to deal with low bandwith, incompatible browsers, inexperienced content editors and other people involved in the process of creating a 'good' website. The creation of a Joomla! website is often a process, in which everyone involved learns a lot. Good web design is hard work. :-)
Joomla! and templates
Joomla! is known for its quality and simplicity. In Joomla! a single page is generated by the HTML output of one component, several modules and the template. Each page is accessible via a unique URL. Take the front page as an example. The content component produces the HTML output for the articles in the middle (Figure 3). The blocks next to the articles are different modules. You can combine the HTML output from one component with the HTML output of any number of modules. Existing modules can also be reused on other pages.
Figure 3: Joomla! front page
You must know, of course, at which point you can assign modules at all. For this purpose, each template provides so-called positions. In order to see these positions you have to enable the Preview Module Positions switch (Extension - Template Manager - Options). After that, you can access your website by using the parameter tp=1 (http://localhost/index.php?tp=1). You'll see the emphasized module positions and their names (Figure 4). In Extensions - Module Manager you can assign one of these positions to a module. If you need the module at different positions, you may also copy it.
Since Joomla 2.5 there is an easier way added to the backend. You will see them by clicking on the icon that has now changed, next to the name of the template in (Extension - Templates Manager) (Figure 5)
Figure 4: Module positions
Figure 5: Preview Icon
Joomla! core comes with three site templates and two administrator templates. You can see a preview in Extensions - Template Manager - Tab Templates (Figure 5).
Figure 6: Site templates
The Atomic template is an example of what a basic template looks like. In the chapter Create a new template using Atomic, we will use this template as a base to create our own template. The Beez5 template is the html 5 Version of Beez2. Also for the Administration, another template is available. (Figure 7)
Figure 7: Admin templates
Styles are a new feature since Joomla! 1.6. They offer the possibility to create and use different versions of one template. A template has a minimum of one style. In this style, configurations can be made depending on the template, such as changing the colors or uploading the header logo. You may set the default style for your site in Extensions → Template Manager → Styles. You can filter between Site and Administrator Styles by choosing the location filter. The default template Beez2 comes with two predefined styles: default and Parks Site.
You can create additional styles by copying them. Each style can be assigned to a menu item. If you would like a green background on your site when people click on menu item A, for example, and a blue background when they click on menu item B, you can assign the corresponding styles (Figure 8).
Figure 8: Assign a style to a menu item
You will find more on templates in the chapter Working with templates.