7. Working with Joomla! Templates: The Basics

Joomla! templates control the design of your site: how the site looks in terms of colors, typography, and icons and how components, modules, and other elements are laid out on a Web page. In this chapter we will examine how to work with the built-in features of ready-made templates and how to customize existing templates. Templates use HTML, CSS, and PHP to control the appearance of your site, and we will introduce you to the basic concepts of each.

The Basics of Joomla! Templates

Joomla! templates are a type of extension, but they are really so much more because they actually define the look, feel, and user experience of your site as a whole and unify the appearance of all of the different components, modules, and other elements on your site. At its most basic level your Web site consists of a lot of files of computer programming that make up the Joomla! software, the content you create that is stored in your database, and a template that brings the software and content together to produce a page that is rendered in the browser of someone visiting your site. So the template is much more than just a way to make a site look great; it is essential to the actual operation of Joomla! Today, the task of templates has become much more complex than it was when Joomla! started, because the browser itself can be used on hardware ranging from a huge computer monitor to a tiny smartphone.

The Template Manager

The Template Manager is similar to the Module Manager, Plugin Manager, and Language Manager, all of which are located in the Extensions menu. When you navigate to the Template Manager, you will see that it has two subsections or tabs, Styles and Templates.

Templates Included in Your Installation

Clicking on the Templates link will bring you to a page with a list of templates, as shown in Figure 7.1. If you have not made any changes, in Joomla! 3 you will see four templates listed: Beez3, Hathor, Isis, and Protostar. And in Joomla! 2.5 you will see five: Beez_20, Beez5, Atomic, Blue Stork, and Hathor. Although Hathor and Beez are included in both versions, the 2.5 and 3 versions differ in various details. The templates are divided into two locations. Isis, Blue Stork, and Hathor are all administrator templates. The Beez templates, Protostar, and Atomic are all site (front-end) templates. The Beez templates and Hathor are designed to meet rigorous standards for Web accessibility.

Figure 7.1. The default Template Manager Templates view in Joomla! 3, which includes four templates. Joomla! 2.5 includes five templates.

Switching to the Styles view, you will see a similar list of template styles, one per template, unless you have installed sample data, in which case you may see additional styles. The Styles Manager, shown in Figure 7.2, has many similarities to other managers. There are Edit, Duplicate, Delete, and Options buttons just as in most of the other managers. In addition, there is a Make Default button (and a Default column in the table) that is similar to the one in the Menu Manager. In this case, however, two defaults are set, one for the site and one for the administrator.

Figure 7.2. The default Template Manager Styles view in Joomla! 3, which includes four default template styles. Joomla! 2.5 includes five default template styles.

The first thing to do to understand the power of templates to change your site is to change the default template styles. Figure 7.3 compares the appearance of a Featured Article view in Beez3 and Protostar. Figure 7.4 compares the Joomla! 2.5 version of Beez5 with Atomic.

Figure 7.3. Comparison of the same content displayed with (A) Beez3 and (B) Protostar

Figure 7.4. Comparison of the same content displayed with (A) Beez5 and (B) Atomic

Joomla! templates are extremely flexible. One aspect of this flexibility is that they can be configured in various ways using options available in template styles. We will look at the options in each template briefly, but we encourage you to experiment with them to see how different settings change the appearance of a site. You can also add more menu items with different views and see how they display.

We will look more closely at the Beez templates since they are common to both versions. Open a copy of the Beez3 (for Joomla! 3) or Beez_20 (for Joomla! 2.5) default template style. In Joomla! 3 click on the Options tab. You will see that there are options to change the Site Title, the Site Description, the Logo Image, and the location of the navigation as shown in Figure 7.5. If your Web site is in English, the location of the navigation “before” content means it will be on the left and “after” content means it will be on the right. If your site is in a right-to-left language, “before” will be on the right and “after” on the left. Joomla! 3 includes additional options to set a header image and a background color or to select a base color from a predefined list. If you choose the Custom color, you will be able to use a header image instead of one of the predefined settings.

Figure 7.5. Template parameters in Beez3 for Joomla! 3 Options tab. In Joomla! 2.5 the parameters are on a single page rather than tabs.

In Joomla! 3 a number of possible header images are available in the header folder of the Media Manager, and you can experiment with them. You can also add your own header image if you wish. The standard size is 1050 pixels (px) wide and 80px tall, although other sizes will work. Beez_20 also offers a logo parameter that will superimpose a logo image on the header. The width parameters change the column widths when you open and close the information column. We will discuss how to replace the header image in Joomla! 2.5 later in this chapter.

Turning to Protostar, we can see in Figure 7.6 that it offers options to change two different color settings, the background color for the site and the color of links and other highlights. Experimenting with these gives you a good opportunity to apply some of the color principles that we discussed in Chapter 2. For example, try using two complementary colors for background and highlights. By default Protostar uses the title of your site from the Global Configuration on the top of the page. The parameters allow you to replace this with either a logo image or with other text. A subheading can also be added. It will display below the site name. Protostar provides a field that allows you to use a Google font for the headings on your site. You simply type the name of the font you wish to use. Using this field will change the font of your site title and all of your headings. Protostar also allows for optional Fluid or Static layouts. A Fluid layout will always fill the width of the device on which it is displayed. Protostar provides a field that allows you to use a Google font for the headings on your site.

Figure 7.6. Template parameters in Protostar for Joomla! 3 Options tab with some text filled in

Both Protostar and Beez3 in Joomla! 3 are responsive templates. This is a term that means they adjust smoothly to different screen sizes and in particular to mobile devices. You can see how they adjust by reducing and enlarging the window on your screen that you are using to view the site.

Beez5 is a variation of Beez2 that is in Joomla! 2.5 only. It was created as an example of a template using the HTML5 standard, which is used for both Protostar and Beez3. Beez5 is useful in a number of ways, in part because it has an easier system for replacing header images than Beez2. That system involves creating a module and assigning it to position-15.

Atomic is the only template with no options. Atomic is a simple template designed to be used as a base for making other templates and is not by itself suitable to use on a Web site.

Assigning Template Styles

The ability to have multiple styles of one template is extremely useful. One reason for this is that you may not always want to use the same style (the default style) for all of your Web site. For example, you could decide to use different header images for different subsections. You may even want to use completely different templates for different parts. Joomla! allows you to assign specific template styles to specific menu links. You can do this when you make a menu link or in the menu assignments area of the template style editor. In Joomla! 3 this is a separate tab, while in Joomla! 2.5 this is in the lower part of the editor page.

There are two additional ways that template styles can be assigned. First, if you have a multilingual site, you can make a separate default style for each language. This is why in the editing screen for template styles the default field says “No, All, and English (UK)” rather than Yes and No. Assigning a style as the default for All means that it applies to all languages on a site. You can also assign individual users a specific template style in the administrator. This was initially done to allow individuals to have access to the accessible template Hathor or to have a high-contrast version of the Blue Stork template in Joomla! 2.5, but in fact it is very useful in cases where different administrator users can benefit from different designs.

Template Positions

A final vitally important part of templates is their role in assigning modules to specific locations on a page. In Joomla! the location on a page is called a position. Each position is given a name, and those names are then available in the Module Manager, where you assign each module to one position. We saw this in Chapters 5 and 6. One way you can understand the location of different positions in your template is to move one module to different positions, refreshing your browser’s display of the front end of your site each time. The other way is to use the template preview feature.

To use the template preview feature click on the Options button in the Template Manager toolbar. Enable the Template Preview parameter. In Joomla! 3 the listings in both the Styles and Templates lists will change to indicate that preview has been enabled. In Joomla! 2.5 this is only shown on the templates listing. Click on the icon or link and you will see a display that shows the location of positions on the template. Figure 7.7 shows the template positions in Beez3 and Protostar.

Figure 7.7. Template positions in (A) Beez3 and (B) Protostar for Joomla! 3. The positions in Beez2 for Joomla! 2.5 are the same as for Beez3.

Module Styling

An additional aspect of page design is specific styling of modules. There are two ways this is commonly done. Many templates include code for “module chrome,” which is a kind of detailed styling for modules. Chrome can be assigned to specific module positions, and starting in Joomla! 3 it can be assigned to individual modules. Beez2 and Beez3 include several examples of module chrome, including Hide and Tabs. These are assigned to position-4 and position-5 respectively. If you put a module in position-4, it will display with just the title showing, and a site visitor would click to open the full module. If you place several modules in position-5, instead of being displayed separately they will be arranged in tabs labeled with the module titles. The site visitor would click the tab to see the full module. These can be effective ways to arrange a large number of modules in a small amount of space. Figure 7.8 shows examples of these two types of custom module chrome.

Figure 7.8. Modules displayed with the Main Menu and Login modules displayed using the Tabs chrome and the Banners module displayed using the Hide module chrome included with Beez2 and Beez3

Protostar includes a chrome style called Well that is assigned to position-7, and Joomla! itself provides a number of basic chrome options that template designers often associate with specific positions. Beginning with Joomla! 3, you can also assign chrome to specific modules on the Advanced Options tab of the module editor screen.

The other way to influence the appearance of modules is with specific styles that can be applied in the Advanced Options. In Joomla! 2.5 the main example is the Module Class Suffix field, and in addition menu modules have a Menu Class Suffix. These let you use specific styles from your template with specific modules. We will see some examples of this when we create a sample nonprofit site in Chapter 12. If you choose to use a professional template, it will often come with a number of specific module styles with documentation for how to use them.

Template Overrides and Alternative Layouts

A final set of ways that templates can be used to customize the appearance of your site is through the use of template overrides, alternative layouts, and alternative menu item layouts. These replace the standard design of a page in Joomla! with a specialized layout. The files are always found in the HTML folder of your template. The differences among the three types are that a standard template override replaces all instances of a layout every time the template is used (for example, every article), an alternative layout can be assigned only in the editor for an item (for example, a specific article), and an alternative menu item layout can be assigned only when creating a menu item. You may have noticed fields for these options when editing content or when creating a menu item.

Customizing Templates

As we have seen in the first part of this chapter, it is possible to do a great deal of customization of templates in Joomla! simply by taking advantage of template styles, module chrome, and module styles. However, sometimes you will want to make more extensive changes or change aspects of the design that can’t be changed via the parameters. In this section we will examine basic techniques for doing that.

There are various ways to approach modifying a template. These also may differ depending on whether you use a template that depends on Twitter Bootstrap (such as Protostar) or one that is more traditional (such as Beez). In this section we will focus on Beez3. In Chapter 8 we will focus on using Twitter Bootstrap.

It is absolutely essential when you modify a template that you always work on a copy, never the original. This protects you in two important ways. First, you will always be able to go back to the original if you make a mistake or don’t like the way your design turned out. Second, when Joomla!’s automated updater runs, you will lose any work you did in existing files. Making a copy means that the files you are working on are stored in a different location, one that is not touched by the updater.

Fortunately, copying a template in Joomla! is easy. Navigate to the Templates view in the Template Manager. Edit Beez3 by either clicking on the link that says Beez3 Details and Files or by checking the box next to its name and clicking Edit. The editing screen in Joomla! 3 has a toolbar button to make a copy as shown in Figure 7.9, while in Joomla2.5 there is a field with the label Copy Template. Create a new name for the template and press the Copy button. In our case we call the template mynewtemplate. Use all lowercase letters and no spaces in the name.

Figure 7.9. Copy Beez3 or Beez2 to a new template called mynewtemplate. Never use spaces in the name and use all lowercase letters.

Once you have copied the template, close the template screen. You should now see your new template in the template listing (as shown in Figure 7.10), and if you go to the Styles view, you will see that a new default style for that template has been added. Edit the style to ensure that the Personal color option has been selected and make it the default style. This will enable you to see the changes as you work.

Figure 7.10. mynewtemplate in the Templates view

Go back to the Templates view and open your new template. Notice that in this screen there are links to a large number of files, and these are divided into two groups, files that end in .php and files that end in .css. PHP is the programming language in which most of Joomla! is written. The index.php file provides the basic structure of your page. However, it has almost nothing to do with the details of how your Web site looks. That responsibility belongs to the CSS or Cascading Style Sheets.

Modifying the Personal Option in Beez2

We’ve chosen to focus on modifying the Personal color option in Beez since it is present in both Joomla! 3 and Joomla! 2.5 and is one of the designs users most commonly modify. Beez is designed as a template that is accessible to all users including those with disabilities, and it is also structured in a modular way that makes modification simple. Before starting, our site looks as it did in Figure 7.3.

Open the personal.css file by clicking on its name. What you will see immediately is a lot of code (almost 400 lines in Joomla! 3 and more than 1,500 in Joomla! 2.5) that will look odd if you are not used to CSS and HTML. Please read “HTML and CSS Basics” if they are new to you.

The first thing usually done to change the personal CSS is to replace the header image. The original image is 1060px wide by 288px tall. You do not have to match this exactly, but it will work well to have an image of approximately the same size. Place the image on your server, either by FTPing to your host or uploading the file using the file manager on your server. Search the file for

background: url("../images/personal/personal2.png")

and replace the reference to the existing image with a reference to your new image, such as

background: url("../images/personal/mynewimage.png")

(assuming you have placed it in the same folder as the existing image, templates/beez3/images/personal). In our case we are using the image rags.jpg.

You will also want to change the min-height (minimum height) to match the height of your image. In our case the image is 180px tall. So we have

.logoheader {
     background: url("../images/personal/rags.jpg") no-repeat right
     bottom #0C1A3E;
     color: #FFFFFF;
     min-height: 180px;
}

In this case the color #FFFFFF (white) represents text that is displayed over the header image; we have left this white since it provides good contrast with our image.

At the same time you can change the background color for the whole site from the light gray used by Beez to a color that complements your header image or the color scheme you previously developed. In Joomla! 3 look for

body {
   background: #eee
}

and change #eee to the color you want. We chose #1B3A8A:

html {
background-color:#1B3A8A;
}

body {
   background-color: #1B3A8A;
}
div#footer-outer {
   background-color:#1B3A8A;
}

However, we want the main content areas of the site to have a white background for good readability. So we added

#contentarea, #contentarea2 {
 background-color: #fff;
}

In Joomla! 2.5 return to the body style and break the background into two parts, the background-image and the background-color:

body
{
    background-image: url(../images/personal/mynewimage.png) repeat-x;
    background-color:  #1B3A8A;
    color: #333;
    font-family: arial, helvetica, sans-serif;
}

Next, we changed the background of the header to a shade of black that complements our image: #0C1A3E.

Because we have darkened the background and other elements so much, we also chose to darken the headings (h1, h2, and h3) in our template. Here, too, we used #0C1A3E. In Joomla! 3 we changed

h3 {
     color: #fff;
}

to

h2, h3 {
     color: #0C1A3E;
}

In Joomla! 2.5 the colors of fonts are more complex. However, we changed all instances of #095197 and #0D4C89 to #0C1A3E. The site now looks as in Figure 7.11.

Figure 7.11. The site with the modified version of the Personal.css from the Beez3 template

We encourage you to play with images, colors, and fonts until you find a design you are satisfied with. Remember that Chapter 2 and Appendix B contain a number of links to information and tools about color, design, CSS, and HTML.

Creating an Alternative Layout

Alternative layouts provide a way to modify the Joomla! layouts (which control how content is displayed) for components and modules. The files for alternatives are placed in the HTML folder of your template. The files for module overrides are found in folders matching the name of the folder for the corresponding module found in the modules folder of your Joomla! installation, for example, mod_breadcrumbs or mod_login. For components the structure starts with the name of the component, then the name of the view, then the files. So, for example, you might have com_content/article or com_weblinks/category. The files in these folders replace files that are found in the tmpl folders of the corresponding modules and components.

In this example we will make a layout override for one of the simplest modules, the Footer module. Find the file modules/mod_footer/tmpl/default.php and copy (do not move) it to templates/beez_20/html/mod_footer/default.php as shown in Figure 7.12. You will need to do this in your server file manager as explained in Chapter 3.

Figure 7.12. The (A) original location of the default.php file for the Footer module and (B) the location of the new copy

The Footer module layout is extremely simple, consisting of just two lines:

<div class="footer1<?php echo $moduleclass_sfx ?>"><?php echo $lineone; ?></div>
<div class="footer2<?php echo $moduleclass_sfx ?>"><?php echo JText::_('MOD_
FOOTER_LINE2'), ?></div>

If you look at your site or the previous images of the page (such as in Figure 7.11), you will see the phrase “Powered by Joomla!” We want to replace that with our own simple Footer module.

First, create an instance of the Footer module using the Module Manager and place it in position-14. You can also set the title not to show. Notice that this will mean that you have two instances of “Powered by Joomla!”

Returning to the copied version of default.php, note that currently the first line contains the PHP variable $lineone. This does not do anything. Let’s add some code right above the current lines to have it show today’s date:

<?php $lineone = JFactory::getDate(); ?>

This is simply using PHP (<?php ?>) to tell the browser to use PHP to set the variable $lineone to the date. In a lot of ways it’s just like saying x = 3 in algebra.

You might wonder how you change the text of the second line. Even though we love Joomla!, we often don’t want to keep the Joomla! name on our Web pages. To do this we need to change the text associated with this MOD_FOOTER_LINE2.

To do this go to the Language Manager and click on the Overrides tab. Click New and as shown in Figure 7.13 enter MOD_FOOTER_LINE2 in the Language Constant field and the text you want in the Text field and save.

Figure 7.13. Creating a language override for MOD_FOOTER_LINE2 in the Language Manager

Refresh your site and your footer will now appear as in Figure 7.14.

Figure 7.14. The new footer after modifications

This was a simple example of using an override, but there are no real limits to what you can do when using the override and alternative layout systems built into Joomla!

Choosing a New Template

While the templates included with your installation of Joomla! provide a good foundation for a site, many people choose to add new templates. You install a new template just as you would any other extension. There are a number of sources for Joomla! templates, some of which are commercial and some of which are free. In addition, there are many professionals available who will work with you to create a customized template.

As is true for all extensions, we encourage you to explore your options carefully and make sure that you are working with an experienced custom designer or retailer. The Joomla! Resources Directory at http://resources.joomla.org is a good place to begin a search, and you can also explore the work of a large number of designers at the Joomla! Site Showcase at http://community.joomla.org/showcase. The template forum at http://forum.joomla.org is also a good source of user-to-user advice.

Many companies that provide Joomla! templates work as “template clubs” where you subscribe for a certain length of time and receive a new template every month. This is not always appropriate for people who will be creating just one or two sites, but sometimes it can be a good investment, especially since some clubs provide other extensions along with templates. These clubs often have active support forums which can be very helpful for solving problems.

Some extensions, especially complex ones, are challenging to design for, so when choosing a template it is important to ask whether the template will support any extensions you plan on using. In addition, starting with Joomla! 3, Joomla! markup (the HTML and CSS that the Joomla! core produces) builds on Twitter Bootstrap, so you will want to make sure that any template you use is compatible.

Many commercial extensions from the template clubs are themselves complex mini applications that include their own template frameworks, JavaScript, and extensions along with numerous overrides, alternative layouts, custom chrome, and module styles. This is good in that you will have a sophisticated design, but it can also be complex to manage if you want to customize.

If you choose to work with a custom template designer, some of the same rules apply. Make sure you understand how much time the designer will devote to your project and how much opportunity you will have to give feedback and make revisions. You can and should expect to pay more for more customization and the time a designer will spend working with you. If a price seems too low, you may not be getting a truly custom design. That in itself is not always a problem, but you should understand what it is you are purchasing.

Conclusion

Joomla! templates provide the look and feel that make your site unique. They help you communicate with your visitors and create the visual experience you want them to have. Options such as template parameters, overrides and alternative layouts, custom styles, and simple customization allow you to work with existing templates to achieve many design goals. In the next chapter we will examine the underlying structure of templates in more depth.