Leer op donderdag 7 juni hoe je zelf een Joomla 2.5 template kan aanpassen met een eigen huisstijl
Joomla 2.5 template tutorial
Op 24 januari 2012 is de nieuwe lange termijn release Joomla 2.5 vrijgegeven, Joomla 1.7 wordt vanaf 24 februari niet meer ondersteund. Het is daarom van belang om van Joomla 1.7 te updaten naar Joomla 2.5, dit is in Joomla 1.7 mogelijk vanuit de backend in extensiebeheer via de tab 'Updaten'. Maak wel altijd eerst een back-up!
Meer informatie over het updaten van Joomla naar 2.5 vind je op JoomlaCommunity.eu
Joomla 1.7 templates zullen over het algemeen werken in Joomla 2.5, maar de Joomla 1.5 templates zullen aangepast moeten worden voor Joomla 2.5. In deze basis tutorial zijn de stappen beschreven die nodig zijn om een Joomla 1.5 template te updaten. Als basis wordt een blanco Joomla template gebruikt, verschillende versies zijn gratis te downloaden.
Blanco Joomla! templates
- 3 kolommen blanco template voor Joomla! 1.5
- 3 kolommen blanco template voor Joomla! 2.5
- 2 kolommen blanco template voor Joomla! 2.5
Basis bestanden Joomla! template
De blanco Joomla templates zijn gebouwd met de minimum noodzakelijke bestanden om de basis van een Joomla template te leren.
Aanpassingen Joomla 1.5 template naar 2.5
index.php
In de template index.php moeten een paar regels codes aangepast worden.
Open de index.php van de blanco template voor Joomla 1.5 in een html editor, daarin zie je als eerste regel staan:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
Deze regel moet voor Joomla 2.5 aangepast worden naar:
<?php defined('_JEXEC') or die; ?>
Nieuwe regel code in de Joomla 2.5 template voor het weergeven van de website naam en url:
<?php $app = JFactory::getApplication(); ?>
De Joomla 1.5 template code voor het weergeven van de website naam:
<?php echo $mainframe->getCfg( 'sitename' ); ?>
Deze code moet voor Joomla 2.5 aangepast worden naar:
<?php echo $app->getCfg('sitename'); ?>
De Joomla 1.5 template code voor het weergeven van de website url:
<?php echo $mainframe->getCfg('live_site'); ?>
Deze code moet voor Joomla 2.5 aangepast worden naar:
<?php echo $app->getCfg('live_site'); ?>
Module posities
In de standaard Joomla 2.5 voorbeeld data bestaan geen standaard module posities meer zoals left, right, user1 etc. Dit is vooral een aanmoediging om in Joomla 2.5 templates meer logische module posities te gebruiken. Een nieuwe module zal ook niet meer automatisch aan module positie left toegewezen worden, maar zal er een keuze gemaakt moeten worden uit de moduleposities.
Voorbeeld Joomla 1.5:
<jdoc:include type="modules" name="left" style="xhtml">
<jdoc:include type="modules" name="user1" style="xhtml">
<jdoc:include type="modules" name="user2" style="xhtml">
Voorbeeld Joomla 2.5:
<jdoc:include type="modules" name="navigation-left" style="xhtml">
<jdoc:include type="modules" name="sidebar-left" style="xhtml">
<jdoc:include type="modules" name="sidebar-left-bottom" style="xhtml">
templateDetails.xml
In de Joomla templateDetails.xml moeten ook een aantal regels code aangepast worden.
Open de templateDetails.xml van de blanco template voor Joomla 1.5 in een html editor, daarin zie je als eerste regel staan:
<? xml version="1.0" encoding="utf-8" ?>
Deze code blijft hetzelfde, maar daaronder komt een nieuwe regel code voor Joomla 2.5:
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
Daaronder de Joomla 1.5 code:
< install version="1.5" type="template" >
Deze regel moet voor Joomla 2.5 aangepast worden naar:
< extension version="2.5" type="template" client="site" >
css_template.css
In de Joomla 1.5 css_template.css is het aan te bevelen de volgende css code toe te voegen voor Joomla 2.5.
print, pdf en e-mail buttons
Voor de print, pdf en e-mail buttons werd in Joomla 1.5 td class="buttonheading" gebruikt. Voor Joomla 2.5 wordt nu div class="actions" gebruikt met een unordered list. Voeg de volgende css code toe voor de uitlijning van de buttons in Joomla 2.5:
.actions {
margin:0;
}
.actions li {
list-style: none;
display:inline;
float:right;
}
Sectie- en categorieblog layout
Voor de weergave van de sectie- en categorieblog werd in Joomla 1.5 tabellen gebruikt, in Joomla 2.5 is dat veranderd en wordt xhtml (div's) gebruikt. Voeg de volgende css code toe voor de juiste sectie- en categorieblog weergave in Joomla 2.5:
.cols-3 .column-1 {
float: left;
margin-right: 4%;
padding: 0 5px;
width: 29%;
}
.cols-3 .column-2 {
float: left;
margin-left: 0;
padding: 0 5px;
width: 29%;
}
.cols-3 .column-3 {
float: right;
padding: 0 5px;
width: 29%;
}
Login formulier
De code van de module login formulier is voor Joomla 2.5 aangepast, voeg de volgende css code toe om het inlog formulier netjes uit te lijnen:
p#form-login-username label,
p#form-login-password label {
width: 160px;
display:block;
}
p#form-login-remember label {
font-size: .9em;
font-weight: normal;
line-height: 25px;
}
p#form-login-remember input {
float:left;
margin-right: 5px;
}
form#form-login ul {
margin: 0;
padding: 0;
}
form#form-login ul li {
list-style-type: none;
margin-left: 20px;
font-size: .9em;
}
Met deze aanpassingen is het mogelijk om de blanco basis Joomla 1.5 template geschikt te maken voor Joomla 2.5.
In de blanco template wordt er geen gebruik gemaakt van parameters. Heb je een template die wel gebruik maakt van parameters? Dan zijn er nog extra aanpassingen nodig in het bestand templateDetails.xml
Parameters templateDetails.xml
Voorbeeld Joomla 1.5:
<params>
<param name="templateLayout" type="list" default="layout1" label="Template Layout" description="Kies een template layout">
<option value="layout1">layout1</option>
<option value="layout2">layout2</option>
<option value="layout3">layout3</option>
</param>
</params>
Aangepast voor Joomla 2.5:
<config>
<fields name="params">
<fieldset name="advanced">
<field name="templateLayout" type="list" default="layout1" label="Template Layout" description="Kies een template layout">
<option value="layout1">layout1</option>
<option value="layout2">layout2</option>
<option value="layout3">layout3</option>
</field>
</fieldset>
</fields>
</config>
Het grootste verschil is dat het in Joomla 2.5 templates nu mogelijk is om parameters te groeperen in diverse fieldsets. Vooral handig voor templates met veel parameters.
Joomla! 2.5 templates installeren
De blanco templates voor Joomla 2.5 (op deze pagina vrij verkrijgbaar) zijn kant en klaar om als zip bestand via de administrator (backend) te installeren, dit gaat op dezelfde manier als in Joomla 1.5.
Wil je een Joomla 2.5 template via FTP installeren dan zijn er wel verschillen ten opzichte van Joomla 1.5.
De template bestanden worden nog steeds via FTP in de map templates geupload, maar het grote verschil in Joomla 2.5 is dat ze ook in de database geïnstalleerd moeten worden om de nieuwe template stijlen mogelijk te maken.
Na het uploaden zie je daarom de template niet direct in Templatebeheer staan, om deze eerst in de database te installeren ga je in extensiebeheer (de Nederlandse taalbestanden zijn te downloaden op JoomlaCommunity) naar de optie 'Ontdekken' en klik je rechtsboven op het icoon 'Ontdekken'. Daarna zal de template verschijnen. Selecteer de template en klik daarna op 'Installeren', nu zal de template wel zichtbaar zijn in Templatebeheer en kan je deze als standaard instellen.
Deze Joomla 2.5 template tutorial van Web-effect mag overgenomen worden, maar alleen met bronvermelding (naam en url van Web-effect).
Gedeeltes van deze tutorial zijn overgenomen en vrij vertaald van het artikel Joomla 1.5 to 1.6 Template Upgrade Tutorial van JoomlaPraise
Meer leren over Joomla 2.5 templates?
Dat kan met de workshop Joomla 2.5 templates van Web-effect.
Actuele Joomla info, tips & tricks ontvangen?
Meld je dan aan voor de nieuwsbrief
Een plusje, like of tweet via de social media buttons onderaan de pagina wordt natuurlijk ook zeer gewaardeerd!
Joomla! trainingen
Reacties
Ik zal deze vraag ook op het joomla forum stellen. Thanks.
Deze tutorial is geschikt om eenvoudige templates te updaten.
Om de problemen met jullie templates te kunnen oplossen is toch wat meer informatie nodig.
Zouden jullie de vraag nogmaals willen stellen op het JoomlaCommunity forum met meer informatie over de template of een link als dat mogelijk is? http://forum.joomlacommunity.eu/forumdisplay.php?f=113
Dan kan ik of iemand anders daar verder helpen.
Fatal error: Call to a member function attributes() on a non-object in /var/www/vhosts /drijvers.com/h ttpdocs/nwesite /libraries/joom la/installer/ad apters/template .php on line 55
Hoe heb je de template geïnstalleerd? Als een zip via extensie beheer of via FTP geupload
// no direct acces is inderdaad een beschrijving (comment) wat de php regel defined('_JEXEC ') or die; doet.
De verwijzingen naar de css bestanden in /templates/syst em/css/ zijn inderdaad niet opgenomen omdat ik de template zo basic mogelijk wilde houden.
In /templates/syst em/css/ zitten css bestanden waarmee je de layout van een aantal standaard Joomla pagina's kan aanpassen.
Wil je dat, dan kan je een verwijzing naar het css bestand in je template opnemen. Ik zal daarover nog wel eens een tutorial schrijven.
Twee vragen, in de eerste regel van de template stond bij mijn 1.5 versie (destijds ook een blanco template van internet gedownload):
Dat "// no direct acces zie ik hier nergens terug. Of is dit alleen een beschrijving wat die PHP regel eigenlijk doet?
Tevens bij de verwijzing naar de CSS nemen jullie alleen op de CSS van de template. In de download van destijds werden ook onderstaande verwijzingen opgenomen:
/templates/system/css/system.css" type="text/css" />
/templates/syst em/css/general. css" type="text/css" />
Is dit nou nodig of niet?
Zie graag je reactie tegemoet.
Groet Willem