- Atomic
- beez_20 and beez5
- The Template Manager: Styles
- The Template Manager: Templates
- Installing Templates
This chapter is from the book
This chapter is from the book
This chapter is from the book
The Template Manager: Styles
The Template Manager in the back end has the task of managing existing templates in an organized way. It shows you the installed and available frontend and backend templates in a clear list. You can find the template manager in the back end at Extensions → Template Manager.
If you open the Template Manager, you will first notice the selected (in-use) styles of the installed templates, as shown in Figure 8.1. Styles are variations of the same template.
)
Figure 8.1 Template Manager in the back end
The term style is probably confusing for some people. Style here refers to different versions of the same template. These versions may differ in both CSS styling and HTML markup. The use of styles is further explained in Chapter 11, “The XML File and the Template Parameters.” But let’s get back to the Template Manager.
In addition to viewing the selected styles, you can use the Template Manager to see whether it is a frontend or backend style, which template the selected style relates to, or if it has been assigned to specific page areas. The gold star indicates the selected, and therefore currently active, default style.
By clicking on the checkbox in front of each style and selecting Make Default at the upper right, you can change the default style.
At the top right are also two checkboxes for filtering styles. This function is helpful if you are using many different styles and different templates. The styles can be filtered through the front end or back end or by the template they belong to.
Each template can have different properties, called parameters, that can be configured. By copying a style, you can assign it to different pages or areas with different properties. You can do it both in the Template Manager and via the menu items.
Here is a little example to make things clearer. In the beez_20 template you can choose between two different design variations: Personal and Nature. Personal is the default display option with the blue header image. Nature is in all green. Both variations differ only in that they use a different CSS file for certain elements of the template.
If you want to use the default variation on some pages and the green version on others, you can do so very easily. You can copy the styles from the Template Manager and save them under a different name.
If you then click on the style beez_20, you will see the image shown in Figure 8.2.
)
Figure 8.2. Default style beez_20
On the right you can see the parameters, here called Advanced Options. The selection of parameters actually constitutes a style. You have a range of selection options. At the bottom under Template color are the styles Personal and Nature. Here you can make your selection and choose the desired display variation.
Under Details you will find the name of the relevant style. You can choose any name, but you should make sure it’s a meaningful title to avoid confusion later. The name will help you distinguish between styles, especially if you are using several copies of a style.
You can also see which template the selected style relates to, which unique ID it has, and whether it should be used only when a certain language is selected.
Below the Details panel you will find the Menus assignment panel. Each menu item is listed there, and the style can be assigned to the relevant menu item by enabling the corresponding checkbox. By selecting Toggle Selection, you can disable all the checkboxes.
Once you have made your selection, you can save your style by clicking on Save as Copy at the top right. Joomla! automatically creates a copy of the default style with the options you have selected. And that’s it!
Here is a summary of all the steps.
- Select default style.
- Change title or name of style.
- Adapt parameters to your preferences.
- Assign menu items.
- Save template as copy.