16. Advanced Template Customization Tricks
Let’s finish exploring customization with a few techniques that do not require separate chapters but should be mentioned because they can be important when building templates. This information is partly technical in nature but can help you efficiently solve certain problems. You will find out how you can prepare your template for use in countries where the reading direction is right to left, how to use the Joomla! internal PHP browser switch, how to design the homepage differently than the rest with simple methods, and how to output the current date.
When the Reading Direction Changes: Right-to-Left Languages
Joomla! is a content management system used all over the world, including in many countries whose language is read from right to left. If you look at the Joomla! statistics, you discover many Joomla! sites in countries such as Egypt and Israel where languages are read from right to left. For this reason, the Joomla! default templates are prepared for use with languages read from both left to right and right to left.
Designers from the Western-language sphere must rethink their designs, because when the reading direction changes, the design has to change, too. It sounds simpler than it really is. We—and therefore our designer eyes—are not used to thinking in the opposite direction. Once we start switching everything around, the result often appears unbalanced to us. In most cases, we cannot read or understand the language, which is an unfavorable condition for building a template and invariably results in an unsatisfactory design. We can only try to imagine, and can never really be certain, how our design will be perceived in those countries with reading directions opposite to ours. I am very glad to have had helping hands that were able to sort out my mistakes in this book.
To adapt the design for right-to-left (RTL) languages, you only need to adapt the Cascading Style Sheet (CSS) and change lefts to rights and rights to lefts. If you want to see what it is like to see your design differently, try holding a mirror in front of the screen, as shown in Figure 16.1. Using the mirror, you get an approximate impression of how your design will behave in RTL mode.
Figure 16.1. Joomla! in the mirror
Integrating RTL CSS
If you open the index.php file of your modified template, you will find this statement in the head of the document:
<?php if ($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/your_name/css/template_rtl.css" type="text/css" />
<?php if (file_exists(JPATH_SITE. DS .
'/templates/your_name/css/'
. $color . '_rtl.css')) :?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/your_name/css/<?php echo $color ?>_rtl.css"
type="text/css" />
<?php endif; ?>
<?php endif; ?>
This statement basically adds two additional CSS files for the RTL view into the page. The template_rtl.css file is responsible for positioning in RTL mode. Recall that in the Beez template, you can choose between two options: Nature and Personal. Apart from the color design, these styles also differ slightly in how the content is positioned. For example, in the Nature style, the header takes up the entire width. To adapt it to an RTL orientation, you use the nature_rtl.css file. The Personal style has no separate RTL CSS because there is nothing else that needs to be switched that is specific to that style. The second, style-specific, file is added only if it actually exists.
The previous code uses rather complex PHP to determine whether an additional CSS file should be added for the selected style. It allows for a lot of flexibility because you could add another option to the color design without changing the code. However, if you don’t need that flexibility, the following simpler code would accomplish the same thing as the previous code in a more straightforward manner:
<?php if ($color=='nature') ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/your_name/css/nature_rtl.css" type="text/css" />
<?php endif; ?>
Testing RTL Mode
Even if you have not installed an RTL language, you can test whether your page is displayed properly in RTL mode. You just need to use a little trick. Each language installed in Joomla! has its own language folder where you can find a central control file for the language. For the English language, this file is called language/en-GB/en-GB.xml. It contains the <metadata> information on the reading direction (quite a long way down in the file).
<metadata>
<name>English (United Kingdom)</name>
<tag>en-GB</tag>
<rtl>0</rtl>
...
</metadata>
The <rtl> attribute in the English language is set to 0 by default. If you replace the 0 with a 1 and save the file, your template will automatically call the RTL CSS files and the page will be displayed accordingly.
<metadata>
<name>English (United Kingdom)</name>
<tag>en-GB</tag>
<rtl>1</rtl>
...
</metadata>
PHP Browser Switch
Chapter 15, “The System Template: Adapting and Modifying Output,” pointed out the strange integration of the general.css file and asked you to ignore it for the time being. Now you will find out what it is all about.
Deep within Joomla! is a PHP function that can identify the browser used to view your site. Most browsers send this information automatically to the server, so that it just has to be read out there. You can now use this behavior when, for example, you want to output a special view for the iPhone. Joomla! can respond only to the most common browsers. If you add the following code to the template’s index.php file, you can get Joomla! to tell you the browser and version being used. You can then adjust your design as necessary.
<?php
// class located in libraries/joomla/application/Web/client.php
$browser= JApplicationWeb::getInstance('DetectClient') ;
var_dump($browser->client->mobile); // outputs mobile true or false
var_dump($browser->client->platform); //outputs platform;
var_dump($browser->client->browser); // outputs browser
?>
When you run this example, the var_dump() displays the information on your screen. When you actually use it in your template, you will likely use an if statement. For instance, to do something for only mobile devices, you could use the following code:
<?php
// class located in libraries/joomla/application/Web/client.php
$browser= JApplicationWeb::getInstance('DetectClient') ;
if ($browser->client->mobile) :
// Do something here like loading a special stylesheet
endif;
?>
For some designers, writing code to detect browsers is too uncomfortable or too theoretical. That is why Joomla! makes life easier for you. To clarify this, let’s get back to integrating the general.css file.
With CSS3, you can now create elements with rounded corners without having to use complicated constructs with nested div containers and various background images. The browser implementation of this feature is sadly still lacking. Internet Explorer up to version 8 cannot cope with it at all, and even Firefox and Konqueror have trouble with it. To handle these cases, the PHP browser switch can help. It is questionable whether this solution is really the best to create rounded corners, but it is a good example to show how the browser switch works.
In the CSS folder of the Beez template, you will find general.css plus the files:
• general_mozilla.css
• general_konqueror_css
• general_opera.css
Each of these files contains browser-specific CSS statements. Notice that the beginning of each file name is identical (general_), and the relevant browser follows the underscore.
Let’s look at the integration of general.css in the index.php file of the template
<?php
$files = JHtml::_('stylesheet','templates/your_name/css/general
.css',null,false,true);
if ($files):
if (!is_array($files)):
$files = array($files);
endif;
foreach($files as $file):
... // it continues on from here
?>
In the JHtml class of the Joomla! framework, there is a function that is responsible for integrating the stylesheets:
function stylesheet($file, $attribs = array(), $relative = false,
[ca]$path_only = false, $detect_browser = true)
You can tell this function if you want it to detect the browser by setting the $detect_browser parameter to true. Joomla! then searches for all files having names that start with general followed by an underscore.
At the same time, it checks whether what comes after the underscore is identical to the identified browser type. If it is, this file is output together with the parent file, general.css. This is quite technical but also quite useful in some circumstances.
PHP Tricks
In this section I briefly mention a few PHP tricks for structuring the content in the index.php and introduce helpful functions from the Joomla! framework that can sometimes make your work much easier. I do not go into great detail, but I want to give you a taste of what Joomla! can really do.
Structuring the Homepage Differently—Access to the Views
Quite often you would like to structure the homepage differently than the rest of the site. The simplest solution would be to create a separate template for this view. But a separate template requires more effort and maintenance because then you have to manage two templates. You may find a second template to be the easier solution, because the template’s index.php file stays much simpler, but adapting index.php isn’t difficult.
With the following code:
<?php
$view =JRequest::getCmd('view'),
?>
you can find out which view Joomla! is using to display the current content, and then you can adapt it accordingly:
if ($view == 'featured')
{
// do something
}
else
{
// do something else
}
The values that have $view can have corresponding folders found in the the views folder of the component. In the case of com_content, the views are:
• article : article view
• category: category view
• categories: display of all categories
• featured : view of the homepage
• form: view that appears, for example, when editing the articles.
Outputting the Current Date with PHP
Sometimes you want to output the current date. You can do so easily using this little function:
<?php $date = JFactory::getDate();
echo $date;
?>
You can also format the date with custom settings, as shown in the following code.
<?php $date = JFactory::getDate()->format("Y-m-d-H-i-s");
echo $date;
?>
Table 16.1 shows the parameters that PHP offers:
Table 16.1. PHP Symbols Used to Format Dates
Once again, Joomla! can make life easier for you because, depending on what language you are using, you may not want to use the date formats used in English. If your Web site is written in another language, you would want to display the date in the appropriate language format. The relevant language file is responsible for this. For example, to integrate the date in German format, you need the following statement:
<?php $date = JFactory::getDate()->format(JText::_('DATE_FORMAT_LC2'));
echo $date;
?>
As you can see, the date format is integrated via a language string into the function. Here, it is DATE_FORMAT_LC2. You can find this string in the main language file of the corresponding language: language/en-GB/en-GB.ini or language/de-DE/de-DE.ini. You have the following formatting options:
• DATE_FORMAT_LC1="l, d F Y"
• DATE_FORMAT_LC2="l, d F Y H:i"
• DATE_FORMAT_LC3="d F Y"
• DATE_FORMAT_LC4="Y-m-d"
• DATE_FORMAT_JS1="y-m-d"
The data to the right of the equals sign corresponds to that in the PHP table. For example, if you have installed the German-language file and select DATE_FORMAT_LC2, the result will be Freitag, 18 März 2011 10:39.