Creating a clean CSS template for Joomla 1.5 - part 4, last
This is the final part of a series of articles on Joomla 1.5 templates.
Previous parts:
Creating a Joomla Template by Standards - Part 1
Creating a Jooml template by standards - part 1 (continued)
Creating a clean CSS template for Joomla 1.5 - part 2.1
Creating a clean CSS template for Joomla 1.5 - part 2.2
Creating 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 features that greatly enhance their capabilities. We have already seen one of the examples in this series of articles - the ability to create a “chrome”, or customized display of modules.
')
Let's now consider the following features:
In Joomla 1.5 added new feature - options for the template. This allows you to assign values ​​to the variables passed to the pattern in the administrative interface.
We can use a relatively simple option of 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 it is necessary for Joomla to save your settings. For example, an INI file for the example above could look like this:
You must set write access rights so that the server can save parameter values. You also need to add this file to the file list 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 stretching page.
Using template parameters is an opportunity to provide the site administrator with the flexibility to customize almost any template elements: width, color, etc., all of which is controlled by PHP conditional expressions that set CSS styles.
Perhaps the most powerful new feature in Joomla 1.5 is the ability to easily override the kernel output. This is done with the help of new output files (template files) that correspond to the layout of the views (views) of the components and modules. Joomla checks every 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 components and for modules, since modules, in fact, have only one display. For example:
The basic structure for all components and modules is Display> Layout> Template
The table below shows some examples. Note that modules have only one display.
Usually there are several template files that are responsible for a particular layout. These files have a common name:
Module Overrides
Each module contains a new folder called tmpl, in which its templates are located. Inside it are PHP files that are responsible for the output. For example:
The first three files are the three layouts of the Newsflash module, which are used depending on which options the module has selected, and the _item.php file is a common layout template that is used by all three options. Inside this file we see the following:
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?
Component Override
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, we will see the views subfolder:
These folders correspond to four possible displays of content: archive, article, category and section. Inside each display we will find the tmpl folder, which may 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 now used there. If we want to override this output, we need to put what we need in the template / html folder, for example:
This is a relatively simple process - copying and pasting mappings from the / components / folders and / modules / to the templates / yourtemplate / html folder.
The override functionality provides a powerful mechanism for customizing a Joomla website using templates. You can create output templates oriented to SEO, accessibility, or specific client needs.
What you need to know
Joomla 1.5 offers new features for templates that allow developers to fully manage the code and display of the website on Joomla.
Best 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 the Joomla output.
So, we have a template made on the basis of design. It adds font design, but more importantly, we created a clean CSS template with dynamically retractable columns and a nice menu of shortcuts. We then redefined the Joomla output so that it no longer uses tables. I made an installable template that you can find in our library [translator's note: all templates from this manual are available for download at the link: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html ].
In this series of articles, we went through four examples of templates, gradually complicating them and adding functions.
Previous parts:
Creating a Joomla Template by Standards - Part 1
Creating a Jooml template by standards - part 1 (continued)
Creating a clean CSS template for Joomla 1.5 - part 2.1
Creating a clean CSS template for Joomla 1.5 - part 2.2
Creating 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 features that greatly enhance their capabilities. We have already seen one of the examples in this series of articles - the ability to create a “chrome”, or customized display of modules.
')
Let's now consider the following features:
- Template parameters
- Template Overrides
Template parameters
In Joomla 1.5 added new feature - options for the template. This allows you to assign values ​​to the variables passed to the pattern in the administrative interface.
We can use a relatively simple option of using a parameter in our template. In the templateDetails.xml file, add the following:
<params> <param name = "template_width" type = "list" default = "fluid" label = "Template Width" description = "Width style of the template"> <option value = "fluid"> Fluid with maximum and minimum </ option> <option value = "medium"> Medium </ option> <option value = "small"> Small </ option> </ param> </ params>
You will also need the params.ini file in the template folder. It may be empty, but it is necessary for Joomla to save your settings. For example, an INI file for the example above could look like this:
template_width = 2
You must set write access rights so that the server can save parameter values. You also need to add this file to the file list 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:
<param name = "template_width" type = "radio" default = "0" label = "Template Width" description = "Change width setting of template"> <option value = "0"> 800x600 </ option> <option value = "1"> 1024x756 </ option> <option value = "2"> fluid (min / max with FF and IE7, 80% with IE6) </ option> </ param>
After that we change the body tag in index.php to the following:
<body class = "width _ <? php echo $ this-> params-> get ('template_width');?>">
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 stretching page.
Using template parameters is an opportunity to provide the site administrator with the flexibility to customize almost any template elements: width, color, etc., all of which is controlled by 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 the kernel output. This is done with the help of new output files (template files) that correspond to the layout of the views (views) of the components and modules. Joomla checks every 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 components and for modules, since modules, in fact, have only one display. For example:
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 table below shows some examples. Note that modules have only one display.
| Display | Layout | Templates |
| 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 | Main layout template | blog.php |
| layoutname_templatename.php | Child layout template called from main | blog_item.php blog_links.php |
| _templatename.php | General layout template used in different layouts | _item.php |
Module Overrides
Each module contains a new folder called tmpl, in which its templates are located. Inside it are PHP files that are responsible for the output. For example:
/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 selected, and the _item.php file is a common layout template that is used by all three options. Inside this file we see the following:
<? php // no direct access defined ('_ JEXEC') or die ('Restricted access'); ?>
<? php if ($ params-> get ('item_title')):?>
<table class = "contentpaneopen <? php echo $ params-> get ('moduleclass_sfx');?>">
<tr>
<td class = "contentheading <? php echo $ params-> get ('moduleclass_sfx');?>" width = "100%"> <? php if ($ params-> get ('link_titles') && $ item- > linkOn! = ''):?>
<a href="<?php echo $item-> linkOn;?> "class =" contentpagetitle <? php echo $ params-> get ('moduleclass_sfx');?> "> <? php echo $ item-> title ;?> </a>
<? php else:?>
<? php echo $ item-> title; ?>
<? php endif; ?>
</ td>
</ tr>
</ table>
<? php endif; ?>
<? php if (! $ params-> get ('intro_only')): echo $ item-> afterDisplayTitle; endif; ?>
<? php echo $ item-> beforeDisplayContent; ?>
<table class = "contentpaneopen <? php echo $ params-> get ('moduleclass_sfx');?>">
<tr>
<td valign = "top" colspan = "2"> <? php echo $ item-> text; ?> </ td>
</ tr>
</ table>
<? php if (isset ($ item-> linkOn) && $ item-> readmore): echo '<a href="'.$item-> linkOn.' "> '. JText :: _ (' Read more ' ). '</a>'; endif; ?>
We can modify the file by removing the tables to make the code more accessible:
<? php // no direct access defined ('_ JEXEC') or die ('Restricted access'); ?>
<? php if ($ params-> get ('item_title')):?>
<div class = "contentpaneopen <? php echo $ params-> get ('moduleclass_sfx');?>">
<div class = "contentheading <? php echo $ params-> get ('moduleclass_sfx');?>">
<? php if ($ params-> get ('link_titles') && $ item-> linkOn! = ''):?>
<a href="<?php echo $item-> linkOn;?> "class =" contentpagetitle <? php echo $ params-> get ('moduleclass_sfx');?> "> <? php echo $ item-> title ;?> </a>
<? php else:?>
<? php echo $ item-> title; ?>
<? php endif; ?>
</ div>
</ div>
<? php endif; ?>
<? php if (! $ params-> get ('intro_only')): echo $ item-> afterDisplayTitle; endif; ?>
<? php echo $ item-> beforeDisplayContent; ?>
<div class = "contentpaneopen <? php echo $ params-> get ('moduleclass_sfx');?>"> <? php echo $ item-> text; ?>
</ div>
<? php if (isset ($ item-> linkOn) && $ item-> readmore): echo '<a href="'.$item-> linkOn.' "> '. JText :: _ (' Read more ' ). '</a>'; 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?
Component Override
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, we will see the views subfolder:
/ 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 may 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 now used there. If we want to override this output, we need to put what we need in 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 / folders and / modules / to the templates / yourtemplate / html folder.
The override functionality provides a powerful mechanism for customizing a Joomla website using templates. You can create output templates oriented to SEO, accessibility, or specific client needs.
What you need to know
Joomla 1.5 offers new features for templates that allow developers to fully manage the code and display of the website on Joomla.
Best 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 the Joomla output.
CSSTemplateTutorialStep4
So, we have a template made on the basis of design. It adds font design, but more importantly, we created a clean CSS template with dynamically retractable columns and a nice menu of shortcuts. We then redefined the Joomla output so that it no longer uses tables. I made an installable template that you can find in our library [translator's note: all templates from this manual are available for download at the link: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html ].
Summary
In this series of articles, we went through four examples of templates, gradually complicating them and adding functions.
- Modern web sites separate content from display using a technology called Cascading Style Sheets (CSS). In Joomla, the display of content is controlled by a template.
- When creating a template, you need to install Joomla on the server in order to make changes and update the page display.
- 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 badge of validity.
- The most basic template simply loads the Joomla modules and the mainbody component. The layout of the elements and the design is responsible CSS, not Joomla.
- Modern web design uses CSS instead of tables for positioning 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 appearance using CSS.
- In version 1.5, the output of the modules can be fully customized, or you can use the predefined output. All of these options are called module chrome.
- It is better to always use the menu output in the form of 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 the 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, rather than some sort of “Joomla knowledge”.
- Joomla 1.5 provides new features for templates that allow developers to fully manage the code and display of a website on Joomla.
Source: https://habr.com/ru/post/47792/
All Articles