CSS Template tutorial 1.5 - Geavanceerde Template functies

Afdrukken PDF
Geschreven door Remco op zondag 21 september 2008 17:55, in: Templates (1.5.x)
Inhoudsopgave
CSS Template tutorial 1.5
Wat is een Joomla Template
W3C and Tableless Design
Een simpele leeg sjabloon
Template Body
CSS voor Tabelloze layout
Modules in templates
Menu's in templates
Kolommen verbergen
Joomla! 1.5 Template maken
Geavanceerde Template functies
Samenvatting
Alle pagina's
Pagina 11 van 12

 

Geavanceerde Template Functies

Joomla! 1.5 biedt een aantal geavanceerde template functies die aanzienlijk uitbreiden wat er mogelijk is met templates. We hebben al een voorbeeld gezien in dit hoofdstuk, de mogelijkheid van aangepaste chroom of uitvoer voor modules.
Laten we die op hun beurt behandelen:

 

  • Template Parameters
  • Template Overrides

Template Parameters

Nieuw in 1.5 versie is de toevoeging van de template-parameters voor de templates. Op deze manier kunt u variabelen in het template doorgeven met de geselecteerde opties in de administratieve backend.

Wij kunnen een relatief eenvoudige parameter-functie toevoegen aan onze template. In de templateDetails.xml bestand, voegen we het volgende toe: <params>
 

<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>

Verder hoort een bestand met de naam params.ini in uw template map. Het kan een leeg bestand zijn, Joomla! gebruikt dit bestand om uw instellingen in op te slaan. Een INI-bestand voor het vorige voorbeeld kan er zo uitzien:
template_width=2

Zorg dat dit bestand schrijfbaar is, zodat wijzigingen kunnen worden op geslagen. We zullen dit ook moeten toevoegen aan de templateDetails.xml file.

In de Template Manager voor die template, zijn de instellingen zichtbaar zoals getoond in Figuur 9.11.
figuur 9.11
Figure 9.11  Template parameters in administratieve backend

We kunnen een eenvoudig drop-down menu zien met drie opties.

<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>

Daarna veranderen we de body tag in onze index.php naar het volgende:

<body class="width_<?php echo $this->params->get('template_width'); ?>">

Dan voegen we het volgende toe aan het CSS bestand:

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;
}

Dit geeft ons drie mogelijkheden: een vaste smalle breedte, vaste brede breedte, en een aanpassende versie.
Template parameters kan de beheerder van deze site op deze manier gebruiken voor de flexibiliteit in bijna elk facet van een template, dikte, kleur, enzovoort, allemaal onder controle gehouden met voorwaardelijke PHP instelling voor CSS stijlen.

Template Overrides
 

Misschien is de meest krachtige nieuwe functie van de tempalte in 1.5 de mogelijkheid om eenvoudig de kern uitvoer te overschrijven. Dit wordt gedaan met nieuwe productie-bestanden genaamd template bestanden die overeenkomen met de lay-out views van componenten en modules. Joomla! controleert in elk geval om te zien of er een in de template map bestaat en als daar sprake van is, gebruikt Joomla! die, boven de normale productie versie.

Override Structuur

Alle layout views en templates staan in de hoofd code in een /tmpl/ map. De locatie is soms anders voor een component dan voor een module omdat modules in essentie maar een view hebben. Bijvoorbeeld:

modules/mod_newsflash/tmpl/
modules/mod_poll/tmpl/
components/com_login/views/login/tmpl/
components/com_content/views/section/tmpl/
 

De basis structuur van alle componenten en modules is View>Layout>Templates.

Table 9.3 laat sommige voorbeelden zien, mer op dat modules slechts een view hebben.

Tabel 9.3  Voorbeeld overrides
 

 View  Layout  Templates
 Categorie  Blog.php  blog_item.php
 blog_links.php
 Categorie  default.php  default_items.php
 (Nieuwsflits)  default.php
 horz.php
 vert.php		  _item.php











Er zijn meestal verschillende template in gebruik bij een bepaalde layout. Zij hebben een gebruikelijke naam conventie (zie tabel 9.4)

Tabel 9.4  Namen conventie voor overrides
 

 Bestandsnaam conventie
 		  Beschrijving  Voorbeeld
 layoutname.php  De hoofd layout template  blog.php
 layoutname_templatename.php  Een onderdeel layout template aangeroepen door de hoofdlayout template
 		 blog_item.php
blog_links.php
 
 _templatename.php  Een vaak gebruikte template layout in gebruik door verschillende layouts  _item.php

Overriding Modules

Elke module heeft een nieuwe map waarin zijn templates zich bevinden, genaamd tmpl. Daarbinnen zijn PHP bestanden, die de uitvoer maken. Zoals bijvoorbeeld:

 /modules/mod_newsflash/tmpl/default.php
/modules/mod_newsflash/tmpl/horiz.php
/modules/mod_newsflash/tmpl/vert.php
/modules/mod_newsflash/tmpl/_item.php

De eerste drie zijn de drie layouts van de nieuweflash gebaseerd op welke module opties worden gekozen. En de _item.php file is de gebruikelijke layout template voor alle drie. Dat bestand openend, zien we:

<?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 kunnen dit wijzigen door de tabellen te verwijderen om een beetje meer toegangkelijkheid te krijgen:

<?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; ?>

Dit nieuwe bestand zou geplaatst moeten worden in de template map in een map genaamd html als volgt:

templates/templatetutorial15bold/ html /mod_newsflash/_item.php

We hebben zojuist de tabellen uit de nieuwsflash module gehaald, zo makkelijk is dat!

Component Overrides

Componenten werken bijna op dezelfde manier, behalve dat er enkele views gekoppeld zijn met veel componenten.
Als we kijken in de com_content folder, zien we een map genaamd.

/components/com_content/views/
/components/com_content/views/archive
/components/com_content/views/article
/components/com_content/views/category
/components/com_content/views/section

Dus deze mappen zouden overeenkomen met de vier mogelijke views voor content: archief, artikel, categorie, and sectie.
Binnen een view, vinden we de tmpl map en daarin de andere mogelijke layouts.

Als we kijken in de category folder, zien we:

/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 

In het geval van com_content, de default.php lay-out is een verwijzing naar de standaard lay-out die de artikelen als een link lijst laat zien.

Het openen het blog_item.php bestand laat zien welke tabellen momenteel gebruikt worden. Als we de uitvoer willen overschrijven, plaatsen we wat we willen gebruiken in ons template/html/map, bijvoorbeeld:

templates/templatetutorial15bold/html/com_content/category/blog_item.php

Het is een relatief eenvoudig proces van kopiëren en plakken van al deze items uit de /componenten/ en /modules/ mappen in de templates/yourtemplate/html map.

De template override functionaliteit biedt een krachtig mechanisme om uw Joomla!-site te veranderen via het template. U kunt templates maken die zich richten op SEO, bereikbaarheid, of de specifieke behoeften van een klant.

Wat u tenminste moet weten

Joomla! 1.5 biedt nieuwe functies voor templates waarmee ontwerpers om volledige controle over de code en de presentatie van een Joomla! website.
Tableless Joomla!

De Joomla! download bevat ook een template genaamd Beez dat is een voorbeeld van de template ontwikkeld voor de template override in actie. Het Design and Accessibility team heeft een volledige set van voorbeeld overschrijft zoals vervat in de html-map. Ons laatste voorbeeld is een template dat gebruik maakt van deze bijsturingen voor alle tabellen van de uitvoer van Joomla!.

CSSTemplateTutorialStep4
 

We hebben nu een template dat is gebaseerd op een comp (of ontwerp). Meer visuele typografie is toegevoegd, maar nog belangrijker is, we hebben ons gericht op puur CSS lay-out voor het maken van een template die dynamisch opvouwbare kolommen en een slick tabbladen menu heeft. We hebben vervolgens gebruik gemaakt van Template override van Joomla!!, zodat er geen andere tabellen worden gebruikt. Ik heb een installeerbare template die beschikbaar is uit de Compass bibliotheek:

CSSTemplateTutorialStep4.zip 
 



 

Donateurs: webXalt