December 25, 2008 at 18:22Creating a clean CSS template for Joomla 1.5 - part 4, last
- Transfer
This is the final part of a series of articles on Joomla 1.5 templates.
Previous parts:
Create a Joomla template by standards - Part 1
Create a Joomla template by standards - Part 1 (continued)
Create a clean CSS template for Joomla 1.5 - Part 2.1
Create a clean CSS template for Joomla 1.5 - Part 2.2
Create a clean CSS template for Joomla 1.5 - part 2.3
Creating a clean CSS template for Joomla 1.5 - part 2.4
Creating a clean CSS template for Joomla 1.5 - part 3
Joomla 1.5 offers a number of advanced template functions that essentially expand their capabilities. We have already seen one of the examples in this series of articles - the possibility of creating a "chrome", or customized display of modules.
Let's now consider the following functions:
Joomla 1.5 adds a new feature - options for the template. This allows you to assign values to the variables passed to the template in the administrative interface.
We can use a relatively simple option for using a parameter in our template. In the templateDetails.xml file, add the following:
You will also need the params.ini file in the template folder. It may be empty, but Joomla needs it to save your settings. For example, an .ini file for the example above could look like this:
You must set write permissions so that the server can save parameter values. You also need to add this file to the list of files in templateDetails.xml.
In the Template Manager, you will see options for the parameter, as shown in the figure:
We see that this is a simple list with three choices:
After that, we change the body tag in index.php to the following:
And add the following lines to the CSS file:
All this gives us three options: a fixed narrow page, a fixed wide page, and a stretched page.
Using template parameters is an opportunity to give the site administrator the flexibility to configure almost any template elements: width, color, etc., all this is controlled using PHP conditional expressions that set CSS styles.
Perhaps the most powerful new feature in Joomla 1.5 is the ability to easily override kernel output. This is done using new output files (template files) that correspond to the layouts of the views of components and modules. Joomla checks each time whether the corresponding file exists in the template folder, and if it exists, uses it for output instead of the standard one.
Override Structure
All display layouts and kernel templates are located in the / tmpl / folder. The layout is slightly different for the components and for the modules, since the modules, in fact, have only one mapping. For instance:
The basic structure for all components and modules is Display> Layout> Template.
The following table shows some examples. Please note that modules have only one mapping.
Usually there are several template files that are responsible for a particular layout. These files have a common name:
Overriding modules
Each module contains a new folder called tmpl, in which its templates are located. Inside it are the PHP files that are responsible for the output. For instance:
The first three files are the three layouts of the Newsflash module, which are used depending on which options the module has been selected, and the _item.php file is the general layout template that is used by all three options. Inside this file we see the following:
get ('intro_only')): echo $ item-> afterDisplayTitle; endif; ?>
beforeDisplayContent; ?>
linkOn) && $ item-> readmore): echo ' ' .JText :: _ ('Read more'). ' '; endif; ?>
We can modify the file by removing the tables to make the code more accessible:
The new file should be placed in the template folder, in the html subfolder:
We removed the tables from the Newsflash module, it was easy, wasn't it?
Overriding components
Components work in much the same way, except that there are several mappings corresponding to many components.
If we look in the com_content folder, then we will see a subfolder of views:
These folders correspond to four possible displays of content: archive, article, category and section. Inside each display, we will find the tmpl folder, which can contain several layouts.
If we look in the category folder, we will see:
Please note that in the case of the com_content component, the default.php layout is responsible for the standard version, in which articles are displayed as links.
If we open blog_item.php, we will see that tables are being used there now. If we want to override this output, we must put what we need into the template / html folder, for example:
This is a relatively simple process - copying and pasting mappings from the / components / and / modules / folders to the templates / yourtemplate / html folder.
Override functionality provides a powerful mechanism for customizing a Joomla site using templates. You can create output templates that focus on SEO, accessibility, or specific customer needs.
What you need to know
Joomla 1.5 offers new features for templates that allow developers to fully control the code and display of a website on Joomla.
Tableless Joomla
The Joomla distribution contains a Beez template, which is a working example of template overrides. The Design and Accessibility team has created a complete set of overrides contained in the html folder. Our final example is a template that uses these overrides to remove all tables from Joomla output.
So, we have a template made on the basis of design. It added font design, but more importantly, we created a clean CSS template with dynamically retractable columns and a nice menu of shortcuts. Then we redefined the output of Joomla so that it no longer used tables. I made an installable template that you can find in our library [translator's note: all the templates from this manual are available for download at www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html ].
In this series of articles, we went through four sample templates, gradually complicating them and adding features.
Previous parts:
Create a Joomla template by standards - Part 1
Create a Joomla template by standards - Part 1 (continued)
Create a clean CSS template for Joomla 1.5 - Part 2.1
Create a clean CSS template for Joomla 1.5 - Part 2.2
Create a clean CSS template for Joomla 1.5 - part 2.3
Creating a clean CSS template for Joomla 1.5 - part 2.4
Creating a clean CSS template for Joomla 1.5 - part 3
Advanced Template Features
Joomla 1.5 offers a number of advanced template functions that essentially expand their capabilities. We have already seen one of the examples in this series of articles - the possibility of creating a "chrome", or customized display of modules.
Let's now consider the following functions:
- Template Options
- Template Overrides
Template Options
Joomla 1.5 adds a new feature - options for the template. This allows you to assign values to the variables passed to the template in the administrative interface.
We can use a relatively simple option for using a parameter in our template. In the templateDetails.xml file, add the following:
You will also need the params.ini file in the template folder. It may be empty, but Joomla needs it to save your settings. For example, an .ini file for the example above could look like this:
template_width = 2
You must set write permissions so that the server can save parameter values. You also need to add this file to the list of files in templateDetails.xml.
In the Template Manager, you will see options for the parameter, as shown in the figure:
We see that this is a simple list with three choices:
After that, we change the body tag in index.php to the following:
And add the following lines to the CSS file:
body.width_0 div # wrap {
width: 760px;
}
body.width_1 div # wrap {
width: 960px;
}
body.width_2 div # wrap {
min-width: 760px;
max-width: 960px;
width: auto! important;
}
#wrap {
text-align: left;
margin: 0 auto;
}
All this gives us three options: a fixed narrow page, a fixed wide page, and a stretched page.
Using template parameters is an opportunity to give the site administrator the flexibility to configure almost any template elements: width, color, etc., all this is controlled using PHP conditional expressions that set CSS styles.
Template Overrides
Perhaps the most powerful new feature in Joomla 1.5 is the ability to easily override kernel output. This is done using new output files (template files) that correspond to the layouts of the views of components and modules. Joomla checks each time whether the corresponding file exists in the template folder, and if it exists, uses it for output instead of the standard one.
Override Structure
All display layouts and kernel templates are located in the / tmpl / folder. The layout is slightly different for the components and for the modules, since the modules, in fact, have only one mapping. For instance:
modules / mod_newsflash / tmpl / modules / mod_poll / tmpl / components / com_login / views / login / tmpl / components / com_content / views / section / tmpl /
The basic structure for all components and modules is Display> Layout> Template.
The following table shows some examples. Please note that modules have only one mapping.
| Display | Layout | Patterns |
| Category | Blog.php | blog_item.php blog_links.php |
| Category | default.php | default_items.php |
| (Newsflash module) | default.php horz.php vert.php | _item.php |
Usually there are several template files that are responsible for a particular layout. These files have a common name:
| File name | Description | Example |
| layoutname.php | Basic layout template | blog.php |
| layoutname_templatename.php | Child layout template called from main | blog_item.php blog_links.php |
| _templatename.php | Generic layout template used in different layouts | _item.php |
Overriding modules
Each module contains a new folder called tmpl, in which its templates are located. Inside it are the PHP files that are responsible for the output. For instance:
/modules/mod_newsflash/tmpl/default.php /modules/mod_newsflash/tmpl/horiz.php /modules/mod_newsflash/tmpl/vert.php /modules/mod_newsflash/tmpl/_item.php
The first three files are the three layouts of the Newsflash module, which are used depending on which options the module has been selected, and the _item.php file is the general layout template that is used by all three options. Inside this file we see the following:
get ('item_title')):?>
| get ('link_titles') && $ item-> linkOn! = ''):?> title;?> title; ?> |
| text ?> |
We can modify the file by removing the tables to make the code more accessible:
get ('item_title')):?>
get ('link_titles') && $ item-> linkOn! = ''):?>
title;?>
title; ?>
get ('intro_only')): echo $ item-> afterDisplayTitle; endif; ?>
beforeDisplayContent; ?>
text ?>
linkOn) && $ item-> readmore): echo ' ' .JText :: _ ('Read more'). ' '; endif; ?>
The new file should be placed in the template folder, in the html subfolder:
templates / templatetutorial15bold / html / mod_newsflash / _item.php
We removed the tables from the Newsflash module, it was easy, wasn't it?
Overriding components
Components work in much the same way, except that there are several mappings corresponding to many components.
If we look in the com_content folder, then we will see a subfolder of views:
/ components / com_content / views / / components / com_content / views / archive / components / com_content / views / article / components / com_content / views / category / components / com_content / views / section
These folders correspond to four possible displays of content: archive, article, category and section. Inside each display, we will find the tmpl folder, which can contain several layouts.
If we look in the category folder, we will see:
/components/com_content/views/category/blog.php /components/com_content/views/category/blog_item.php /components/com_content/views/category/blog_links.php /components/com_content/views/category/default.php /components/com_content/views/category/default_items.php
Please note that in the case of the com_content component, the default.php layout is responsible for the standard version, in which articles are displayed as links.
If we open blog_item.php, we will see that tables are being used there now. If we want to override this output, we must put what we need into the template / html folder, for example:
templates / templatetutorial15bold / html / com_content / category / blog_item.php
This is a relatively simple process - copying and pasting mappings from the / components / and / modules / folders to the templates / yourtemplate / html folder.
Override functionality provides a powerful mechanism for customizing a Joomla site using templates. You can create output templates that focus on SEO, accessibility, or specific customer needs.
What you need to know
Joomla 1.5 offers new features for templates that allow developers to fully control the code and display of a website on Joomla.
Tableless Joomla
The Joomla distribution contains a Beez template, which is a working example of template overrides. The Design and Accessibility team has created a complete set of overrides contained in the html folder. Our final example is a template that uses these overrides to remove all tables from Joomla output.
CSSTemplateTutorialStep4
So, we have a template made on the basis of design. It added font design, but more importantly, we created a clean CSS template with dynamically retractable columns and a nice menu of shortcuts. Then we redefined the output of Joomla so that it no longer used tables. I made an installable template that you can find in our library [translator's note: all the templates from this manual are available for download at www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html ].
Summary
In this series of articles, we went through four sample templates, gradually complicating them and adding features.
- Modern websites separate content from display using a technology called Cascading Style Sheets (CSS). In Joomla, content is controlled by a template.
- When creating the template, you need to install Joomla on the server in order to make changes and update the display of pages.
- Creating a valid template is a way, not a goal. The idea is to make your template as accessible as possible to people and search engines, and not just to get a validity badge.
- The most basic template just loads the Joomla modules and the mainbody component. CSS is responsible for the layout and design, not Joomla.
- Modern web design uses CSS instead of tables to position elements. It is not easy to learn, but it is a good investment. There are many resources (other than Joomla) that can help you with this.
- Joomla displays specific elements, objects, and classes in the code of a web page. This can be foreseen and used to change the layout using CSS.
- In version 1.5, the output of modules can be fully customized, or you can use a predefined output. All of these options are called “module chrome”.
- It is best to always use the menu output as a list or in a flat form. As a result, you can use the mass of resources available on the Web with ready-made CSS styles for menus.
- Elements such as columns or spaces for modules can be hidden (or collapsed) when there is no content for them. This is done using PHP conditional expressions that are associated with specific CSS styles.
- Creating a working Joomla template is more a matter of graphic design and CSS manipulation than any specifically “Joomla knowledge”.
- Joomla 1.5 provides new features for templates that allow developers to fully control the code and display of a website on Joomla.