Template omzetten - Joomla 1.5 naar Joomla 1.6

Koppelingen
Voorbeelden bij dit hoofdstuk

HOOFDSTUKKEN

Algemeen



Algemeen

Terug naar de top

 

Joomla 1.6 Template File Systeem:

Joomla templates hebben een vastgestelde opzet en verplichte files. Eén en ander is bij Joomla 1.6 niet anders als bij Joomla 1.5.

Pad naar de Templates:

**** <joomlaroot>/templates/<templatenaam>/

Files in de Template Folder:

index.php
index.html
templateDetails.xml
template_thumbnail.png
favicon.ico
css/template.css
images/
html/ (optioneel!)

De verschillen tussen Joomla 1.5 en Joomla 1.6 zitten met name in de navolgende onderdelen:
- index.php
- templateDetails.xml

index.html
index.html is een lege file die bedoeld is om hackers te weerhouden deze direectory te benaderen.

template_thumbnail.png
Plaatje van de site. Wordt weergegeven isn het administratorgedeelte als er gekeken wordt naar de diverse templates.

favicon.ico
Icoon van de site in de browser: 16x16 plaatje.

css/template.css
Joomla maakt uitgebreid gebruik van css-stijlen. template.css bevat de basisstijlen van deze template. In deze file kunnen nog meer css files zitten. NB. De keuze van de naam is vrij. Er moeten wel verwijzingen naar deze files zitten in index.php.

images/
Noodzakelijke file. Bevat de afbeeldingen die gebruikt worden in de template; bijvoorbeeld in de kop. Kan leeg zijn.

index.php

De navolgende veranderingen zijn noodzakelijk in index.php.

defined( '_JEXEC' ) or die( 'Restricted access' );

Wordt:

defined( '_JEXEC' ) or die;

Vervolgens moeten we speciaal voor Joomla 1.6 een nieuwe variable aanmaken binnen <?php brackets:

<?php
$app = JFactory::getApplication();
?>

Met deze nieuwe variablele moeten we elke aanroepming van $mainframe vervangen door $app. Bijvoorbeeld:

$mainframe->getCfg('live_site');

Wordt

$app->getCfg('live_site');

of

$mainframe->getCfg('sitename');

Wordt

$app->getCfg('sitename');

TemplateDetails.xml

Allereerst moet een nieuwe regel worden toegevoegd onder de volgende bestaande regel:

<?xml version="1.0" encoding="utf-8"?>

Toegevoegd:

<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

De volgende verandering is een wijziging van versienummers van 1.5 in 1.6 (of 1.7):

<install version="1.5" type="template">

Wordt:

<install version="1.6" type="template">

Daarna dienen de template parameters omgezet worden naar de nieuwe methode. Iets als:

<params>
<param name="templateTheme" type="list" default="theme1" label="Template Theme" description="Kies je template thema">
<option value="theme1">theme1</option>
<option value="theme2">theme2</option>
<option value="theme3">theme3</option>
</param>
</params>

Wordt omgezet in:

<config>
<fields name="params">
<fieldset name="advanced">
<field name="templateTheme" type="list" default="theme1" label="Template Theme" description="Kies je template thema">
<option value="theme1">theme1</option>
<option value="theme2">theme2</option>
<option value="theme3">theme3</option>
</field>
</fieldset>
</fields>
</config>

De grootste verandering hierbij is, dat je parameters nu kunt groeperen in een <fieldset>, wat er handig is als er veel parameters zijn.

Module posities

Eventueel kunnen ook de namen van de moduleposities worden aangepast. In de Joomla 1.6 voorbeelddata zitten de standaard modules niet in de gebruikelijke posities (bijvoorbeeld mod_search in user4). Er kunnen hier semantisch logische namen worden gekozen.

Veranderingen in CSS

.article_separator

Is nu:

.item-separator
.blog_more

Is nu:

.items-more

Ten behoeve van (print, pdf, email) knoppen in een artikel bestond iets als een <td class="buttonheading", Nu is er een <div class="actions" met een <ul>. Er moet daarom iets als het volgende toregevoegd worden:

.actions{
margin:0;
}
.actions li{
list-style: none;
display:inline;
float:right;
}

De categorie table is nu een ongeordende lijst. Dat betekent dat iets als het volgende moet worden toegevoegd:

table.category{
border:1px solid #CCC;
width:100%;
text-align:center;
}
table.category th,table.category td{
padding:2px 6px;
}
table.category thead{
background:#EEE;
}
.jcat-children ul,.jcat-children li{
margin:0;
list-style:none;
}
.jcat-children li a{
background:url(../images/bullet_green_arrow.png) no-repeat 0 12px;
display:block;
padding:5px 5px 5px 15px;
font-size:0.9em;
}

In de login-form zijn de breaks verdwenen waardoor de labels nu inline zijn. Ze liggen echter niet op één lijn. Om dit te herstellen is de volgende toevoeging nodig:

#form-login #form-login-username label,
#form-login #form-login-password label{
display:block;
}

template_preview.png

Tenslotte kan in de root van de template een plaatje van de template (800x600) worden toegevoegd, die getoond wordt als in de templatemanager bij de templates op het kleine plaatje wordt geklikt.
Vergeet niet de navolgende regel in templateDetails.xml toe te voegen:

<filename>template_preview.png</filename>

Template overrides

Template Overrides is a feature that was added in Joomla 1.5 that allowed you to override the HTML output of a component or module as long as it correctly followed the MVC templating structure. This was done by creating a directory in your template's root called HTML you could then copy the component or module's directory into the HTML directory. Modify the files to fulfill your needs and that HTML would be used in place of the components installed HTML.

What does this do? This feature gives template desginers complete control over the HTML output of the code from Joomla! This allows you to take some of the components in Joomla 1.5 that stil use table based outputs and make them entirely div placed. You can "hack" core component / module code without causing security risks when updates come along. You can apply changes as needed to allow you to fully manipulate the code without the fear of losing your changes when an update for Joomla! or whatever extension you've overrode in this method being lost.

In short, template overrides are extremely powerful and one of my favorite Joomla 1.5 features.

There may be occasions where you would like to change the way a Joomla! Extension (such as a Component or Module, whether from the Joomla! core or produced by a third party) is displayed on your site. Of course, you could recode the Extension from scratch, but that may be a bit ambitious for you! Thankfully, there is another way.

The standard output from any Joomla! Module or Component can be overridden by adding code to the html directory of your template. It is also possible to override two aspects of core functionality: Module chrome, and pagination.

Getting a head-start with overrides

If you are new to Joomla! development, then it is probably easiest to start with an existing view, and try modifying it to get what you want. To do this, you should make a copy of the existing view in the html directory of your template, and then modify the copy.

The directory structure you need is:

TEMPLATE_NAME/html/EXTENSION_NAME/VIEW_NAME/FILE_NAME.php

For example, if you want to change the way that the 'Article' view displays a com_content article, then you should copy the file at

PATH_TO_JOOMLA/components/com_content/views/article/tmpl/default.php
to
TEMPLATE_NAME/html/com_content/article/default.php

(note the slight difference in directory structure)

Similarly, if you want to change how the mod_login Module is displayed, then you should copy

PATH_TO_JOOMLA/modules/mod_login/tmpl/default.php
to
TEMPLATE_NAME/html/mod_login/default.php


Joomla! comes pre-packaged with a frontend template called Beez. Beez utilizes template overrides to produce a table-less layout for faster, smoother, and semantically correct markup. To see how it's done, locate your Joomla! installation's template directory, and you'll notice the Beez template. Inside the Beez template directory, you'll find a directory named html

the entire directory structure is as follows:

/your_joomla/templates/Beez/html/

If you want to try modifying the overrides used in Beez, you could simply copy and paste the Beez html directory into your own template's main directory. However you choose to make your override files, you will need to ensure that they are correctly installed with your template. To do this, you should add the following code to your template's templateDetails.xml file (in between the <files> and </files> tags):

<folder>html</folder>

The above code in essence lets the Joomla! package installer know that there are files to extract, and that they are part of the template as a whole.

Further tips

Template overrides are almost limitless. They allow you to add, edit, and remove the components of the Joomla! core output. Note: For the FireFox web browser, an extension called Firebug is available, which is useful for browsing a page's HTML source and matching it up with the PHP code used in template overrides. For more information, please watch the free video tutorial on using Firebug with Joomla. Now firebug is also available for IE called Firebug Lite.

More information is available from the following resources:

 

Terug naar de top