Vous êtes sur la page 1sur 51

Template Joomla 1.

5 Tutorial
(Auteur : Harry M. North extrait du livre Joomla 1.5, A User's Guide. Version française : Marc Héron)

Le chapitre 9 de ce livre est délivré sous Creative Commons et Non-commercial licence. Référez-vous à
http://creativecommons.org/licenses/by-nc-sa/2.5/ pour plus de détails.

9
Sommaire:
1 Créer un template Joomla 1.5 avec les CSS
2 Création d'un simple template vierge
3 L'utilisation du CSS pour créer une mise en page sans table
4 Réaliser un vrai template Joomla 1.5
5 Template Joomla 1.5 avancé

1. Créer un template Joomla 1.5 avec les CSS


Dans ce chapitre, nous allons suivre les étapes de la création d'un template Joomla. Concrètement, nous
allons créer un template qui utilise les feuilles de style en cascade (CSS) pour produire une mise en page sans
utiliser de tableaux. Ceci est un bon objectif, car il signifie que le code du template sera conforme au normes
du World Wide Web Consortium (W3C). Il aura aussi tendance à se charger plus vite, sera plus facile à
maintenir et sera mieux référencé par les moteurs de recherche. Ces questions sont examinées en détail plus
loin dans le chapitre.
1.1 Qui y a t-il dans ce chapitre ?
• Qu'est-ce qu'un template Joomla ? Quelles fonctions sont exercées par un template Joomla, et quelle
est la différence quand un template n'a pas de contenu par rapport au moment où le contenu est
ajouté dans le système de gestion de contenu (CMS).
• Comment fonctionne le processus de conception localhost. En quoi diffère t'il d'une page web
statique (X)HTML ?
• Quelles sont les implications d'un design sans table dans Joomla et la relation entre les normes W3C,
l'ergonomie et l'accessibilité?
• Quels fichiers constituent un template Joomla, et quelles fonctions remplissent-ils ?
• Comment créer une source en 3 colonnes qui utilise le CSS plutôt que des tables?
• Quels sont les styles CSS qui doivent être utilisés avec Joomla, et quels sont les styles par défaut
qui sont utilisés par le noyau Joomla?
• Comment changer l'emplacement et le style des modules, et quelles sont les nouvelles techniques
pour obtenir des coins arrondis?
• Quelle serait la manière simple de produire des menus en CSS qui imitent l'effet de ceux qui sont
élaborées en JavaScript?
• Comment peut-on maîtriser l'affichage des colonnes en fonction de la présence de contenu ou non ?
• Quelles sont les mesures appropriées pour créer un véritable Template Joomla 1.5?

1.2 Qu'est-ce qu'un template Joomla?


Un template est un ensemble de fichiers au sein du CMS Joomla qui contrôlent la présentation du contenu.
Le template Joomla n'est pas un site. Le template est une partie nécessaire à la conception de l'ensemble du
site. Pour fabriquer le site web "complet", le template fonctionne de pair avec le contenu stocké dans les
bases de données Joomla. Un exemple de ceci peut être vu dans la figure 9,1.

Figure 9,1: template avec ou sans contenu

Figure 9,1, partie A, le template est montré en fonctionnement avec les exemples de contenu. La partie B
montre le template avec peu ou pas de contenu. Le template est conçu de sorte que lorsque votre contenu est
inséré, il va hériter de la feuille de style définie dans le template, tels que les styles de liens, de menus, de
navigation, de taille du texte et les couleurs pour en nommer que quelques uns.
Notez que les images associées au contenu (les photos des personnes) ne font pas partie du template, mais le
header oui.
En utilisant un template CMS, comme Joomla le fait, il y a un certain nombre d'avantages et d'inconvénients:
• • Il existe une séparation entre le contenu et la présentation, en particulier lorsque le programme est utilisé
pour la mise en page (par opposition à des tables dans le fichier index.php). Ceci est l'un des principaux
critères d'un site web qui répond à des normes modernes.
• • Un nouveau template, et donc un tout nouveau look, peut être appliqué instantanément. Cela peut même
être à des endroits différents (positionnement du contenu ainsi que les couleurs et les graphiques).
• • Si différentes présentations sont nécessaires pour un même site, cela peut être compliqué à réaliser.
Bien que des templates différents peuvent être appliqués à des pages différentes, cette fonctionnalité built-in
n'est pas fiable. Il est préférable d'utiliser le PHP dans certaines conditions et de créer une mise en page qui
ajuste dynamiquement le nombre de colonnes en fonction du contenu qui est publié.
Le minimum à savoir
Les sites modernes ont un contenu distinct de la présentation en utilisant une technique connue sous le nom
de feuilles de style en cascade (CSS). Dans Joomla, le template contrôle la présentation du contenu.

1.3 Processus de conception en local


La page Web que vous voyez sur un site Joomla n'est pas statique. Cela veut dire qu'il est généré
dynamiquement par du contenu stocké dans la base de données. La page que vous voyez est créé par le biais
de diverses commandes PHP qui sont dans le template, ce qui présente quelques difficultés dans la phase de
conception.
Il est courant maintenant d'utiliser une interface WYSIWYG (?What you see is what you get?, ce que vous
voyez est ce que vous obtenez ), c'est à dire un éditeur HTML tel que Dreamweaver. Cela signifie que le
concepteur n'a même pas besoin de code HTML. Cependant, ce n'est pas possible dans le processus de
conception d'un template Joomla parce que les éditeurs WYSIWYG ne peut pas afficher une page
dynamique. Cela veut dire que le concepteur doit taper le code "à la main" et afficher la page via un serveur
PHP/MySQL. Avec une connexion assez rapidement cela pourrait être un serveur Web, mais la plupart des
concepteurs utilisent un serveur local sur leur propre ordinateur. Il s'agit de logiciel qui font office de serveurs
Web sur l'ordinateur du concepteur tels que EasyPHP, MAMP, XAMP ou WAMP.
Il n'existe pas de ?chemin tout tracé? pour créer une page Web, cela dépend du concepteur. Ceux qui sont
plus enclins aux graphisme font une ?image? de la page Web dans une application graphique comme
Photoshop et ensuite découpe les images pour pouvoir les utiliser pour le Web (connu sous le nom de ?slice
and dice?, morceler). Les concepteurs plus basée sur la technique cherchent souvent à coder directement.
Toutefois, comme on vient d'être mentionné, le concepteur de template Joomla est limité du fait qu'il ne peut
pas voir instantanément le résultat de son codage dans l'éditeur. Le processus de conception est donc modifié
comme suit:
• • Effectuer des modifications dans l'éditeur HTML, enregistrez les modifications.
• • Avoir le serveur en local qui fonctionne en arrière-plan.
• • Voir les modifications dans un navigateur Web.
• • Retour à l'étape 1.
Le minimum à savoir
Lors de la création d'un template, vous devez disposer de Joomla sur un serveur ce qui vous permettre
d'effectuer des changements et de rafraîchir la page de sortie.

1.4 Options du serveur localhost


Précédemment (chapitre 2), nous avons vu comment installer un serveur web qui fonctionne sur l'ordinateur.
Nous avons créer un serveur web virtuel appelé ?localhost? avec WAMP. Pour aller plus loin dans ce
chapitre, vous allons avoir besoin de cette base. Si vous n'avez pas encore installé de serveur, c'est le moment
d'aller de l'avant et de l'installer. Je vais attendre ici.
TUYAU
Une technique utile pour rendre le processus de conception plus efficace est de servir une page web que vous
êtes en train de concevoir, puis copier et coller la source dans un éditeur. Par exemple, une fois votre mise en
page CSS mise en place, vous pouvez utiliser l'un de ces serveurs localhost pour signifier une page, puis
afficher le code source de la page. Puis copier et coller le code source dans votre éditeur. Vous pouvez
désormais facilement aller à la page à l'aide de style CSS et ne pas avoir à passer par le cycle des étapes
décrites précédemment.

NOTE
Un éditeur gratuit XHTML
Pour ceux qui ne sont pas en mesure de payer pour un éditeur commercial, comme Dreamweaver, certains
sont disponibles gratuitement. Nvu est un excellent choix, il a une validation intégré et est 100% open source.
Cela signifie que toute personne est la bienvenue pour le télécharger sans frais
(http://www.nvu.com/download.html), y compris modifier le code source si vous avez besoin d'y apporter
des changements !

1.5 W3C et design sans table


Ergonomie, accessibilité et optimisation pour les moteurs de recherche (SEO. ?Usability, accessibility, and
search engine optimization?) sont les expressions utilisées pour décrire les pages Web de qualité sur l'Internet
aujourd'hui. En réalité, il y a d'importante possibilité de ?liaison? entre l'ergonomie, l'accessibilité et le SEO.
Une page web qui montre ces capacités à gérer l'une le fait pour les trois, voir la Figure 9,2. Le moyen le plus
facile pour atteindre ces trois objectifs est de suivre le cadre défini par le World Wide Web Consortium (W3C)
et les standards du Web.
Par exemple, un site qui est structuré sémantiquement en XHTML (voir la différence entre XHTML et
HTML) sera lue aisément par l'intermédiaire d'un lecteur spécifique aux malvoyants. Il sera également lue
aisément par un moteur de recherche (spider). Google est effectivement aveugle dans sa manière de lire votre
site Web, c'est comme s'il utilisait un lecteur d'écran pour malvoyant.
Figure 9,2 : Les interactions entre l'ergonomie, l'accessibilité et le SEO

Les standards du Web ont mis en place un ensemble de "règles" pour tous les navigateurs Web.La principale
organisation à soutenir ces normes est le World Wide Web Consortium (WC3), dont le directeur, Tim Berners-
Lee, a inventé le Web en 1989.
Pour vous aider à comprendre d'où proviennent les standards du web, une histoire peut être utile. De
nombreuses pages web sont en fait conçus pour les anciennes versions des navigateurs. Pourquoi? Les
navigateurs ont continuellement évolué depuis que le World Wide Web a commencé. De nouveaux sont
apparus, et les plus anciens ont disparu (Vous souvenez-vous de Netscape?).
Les standards courants du W3C servent (nous l'espérons) à pousser les fabricants à développer davantage de
navigateurs conformes afin que les concepteurs puissent concevoir une plate-forme commune.
Un autre facteur qui complique les choses, c'est que certains développeurs de navigateur (comme Microsoft)
ont tendance à interpréter le html / xhtml de manière légèrement différente que les standards. Cela a conduit à
avoir des conceptions web spécifiques pour supporter les anciens navigateurs, au détriment des nouveaux.Il
est souvent ?décidé? qu'il est important qu'une page Web apparaissent correctement en tenant compte de
l'héritage de ces navigateurs.
Le normes énoncées par le WC3 pour coder une page web ont été développés pour assurer une cohérence.
Un site qui reprend les standards Web du W3C a une bien meilleure base pour se rendre accessibles,
utilisables, et optimisé pour les moteurs de recherche. Pensez que ces codes sont fait pour la construction de
votre maison. Un site construit avec eux est plus solide, plus sûre et coïncide avec les attentes des
utilisateurs. Vous pouvez vérifier vos pages HTML avec le service de validation du W3C (validator.w3.org /).
C'est facile et gratuit (assurez-vous d'utiliser le bon DOCTYPE lorsque vous essayez de valider votre code).
Au niveau le plus simple, un site qui répond à la validation du W3C utilise le (X) HTML qui sépare le
contenu de la présentation en utilisant le CSS.
Poser cinq la question de ce que sont les standards du web à cinq concepteurs de site Web, et vous obtiendrez
cinq réponses. Mais la plupart conviennent qu'elle sont basées sur l'utilisation d'un code valide, que ce soit le
HTML, XHTML ou autres.

1.6 Code sémantiquement correct


Comme il a été mentionné plus tôt, être sémantiquement correct signifie que le (X) HTML de la page Web ne
décrit que le contenu et non la présentation. En particulier, cela signifie une organisation structurée sous
forme de balises (h1, h2, p, div, pre, a, etc) et utiliser uniquement les tableaux pour des données tabulaires, et
non pour la mise en page.

1.7 Le CSS ou les feuilles de style en cascade


Etroitement lié pour obtenir du code sémantiquement correct, le Cascading Style Sheets (CSS) est de mise
pour contrôler l'apparence et la mise en page d'une page Web.Le CSS est un mécanisme simple pour ajouter
du style (ce sont les polices, couleurs, espacement, etc) aux documents Web (source:
http://www.w3.org/Style/CSS/). Il existe parallèlement au code (X) HTML et vous permet ainsi de séparer
totalement le contenu (code sémantique) de la présentation (CSS). Le meilleur exemple de cela est visible sur
CSS Zen Garden, un site où la même sémantique XHTML est en forme de différentes façons et unique avec
différents CSS. Le résultat est la présence de pages très différente mais au contenu de base identique.
Concevoir des sites Joomla actuellement présente des défis considérables pour répondre à la validation des
normes. Dans la première série, 1.0.X, le code utilisait une importante proportion de tables. Ils n'utilisaient
pas vraiment le CSS pour la présentation, pas plus qu'il ne produisaient du code sémantiquement correct. Ce
problème s'est aggravé par le fait que très peu de développeurs tiers utilisaient le CSS, la plupart utilisaient
des tableaux pour générer leur code.
Heureusement, l'équipe de développement de Joomla (Joomla Core ) reconnue cette limitation pour Joomla.
Dans la version 1.5, il est possible pour les concepteurs de template de sortir de la conception à base de
tableaux et de personnaliser la mise en page comme ils le souhaitent.
Ceci étant dit, des précautions doivent encore être prises lors de la création d'un template pour s'assurer qu'il
soit accessible (par exemple, les tailles de polices redimensionnables), utilisable (navigation claire) et optimisé
pour les moteurs de recherche (source-classés).
Le minimum à savoir
La création de templates valides devrait être une intention, et non un objectif. L'idée est de faire votre
template aussi accessible que possible pour les humains et les robots, et non pour obtenir un certificat de
validité de votre code.

2. Création d'un template vierge


Pour comprendre le contenu d'un template, nous allons commencer par examiner un template Joomla vierge.

2.1 Constitution d'un fichier template


Le template contient différents fichiers et dossiers qui composent un template Joomla. Ces fichiers doivent
être placés dans le répertoire / templates / de Joomla. Donc, si nous avions deux templates installés, notre
arborescence ressemblerait à quelque chose comme ce qui suit:
/ Templates / Components (exemple)
/ Templates / Voodoo (exemple)

Notez que les noms de répertoire pour les templates doit être le même que le nom du template, dans ce cas,
Components et Voodoo. De toute évidence, ils sont sensibles à la casse et ne doivent pas contenir d'espaces.
Dans le répertoire d'un template, il ya un certain nombre de dossiers clés:
/ Components / templateDetails.xml
/ Components / index.php

Ces deux noms de fichier et l'emplacement doivent correspondre exactement parce que c'est la façon dont ils
sont appelés par le noyau Joomla script.
Le premier d'entre eux est le template de fichier XML.
TemplateDetails.xml
Il s'agit d'un fichier de métadonnées au format XML appelé par Joomla qui donne les fichiers nécessaires lors
du chargement d'une page qui utilise ce template. Notez le majuscule "D." Il détaille également l'auteur, le
droit d'auteur, ainsi que les fichiers constituant le template (y compris toutes les images utilisées). La dernière
utilisation de ce fichier est destiné à l'installation d'un gabarit à partir de l'interface d'administration.
Deuxièmement, nous avons le moteur du template, index.php:
Index.php
Ce fichier est le plus important. Il décrit le site et explique au CMS Joomla où mettre les différents
composants et modules. Il s'agit d'une combinaison de PHP et (X) HTML.
Dans presque tous les templates, des fichiers additionnels sont utilisés. Il est classique (bien que non exigée
par le coeur), de les nommer et de les localiser, comme indiqué ci-après:
/ Components / template_thumbnail.png
/ Components / css / template.css
/ Components / images / logo.png

Ce ne sont là que des exemples. Le Tableau 9,1 examine chaque ligne.

/ Templatename / dossier / fichier Description


/ Components / Une capture d'écran du navigateur Web le template
template_thumbnail.png (en général réduit à environ 140 pixels de large et
90 pixels de hauteur). Après le template a été
installé, cela fonctionne comme un "Aperçu
d'image" visible dans l'administration template
Joomla Manager et aussi le sélecteur de template
dans le module frontal (si utilisées).
/ Components / css / template.css Le CSS du template. L'emplacement du dossier est
optionnelle, mais vous devez spécifier où elle se
trouve dans le fichier index.php. Vous pouvez
l'appeler ce que vous voulez. Généralement, le
nom indiqué est utilisé, mais nous le verrons plus
loin qu'il ya des avantages à avoir d'autres fichiers
CSS aussi.
/ Components / images / logo.png Toutes les images qui vont avec le template.
Encore une fois pour des raisons organisation, la
plupart des concepteurs de mettre ces images dans
un dossier. Ici nous avons un fichier image appelé
logo.png à titre d'exemple.
Tableau 9,1 : Fichiers nécessaires pour un template

2.2 TemplateDetails.xml
Le templateDetails.xml doit inclure tous les fichiers qui font partie du template. Il comprend également des
informations telles que l'auteur et le droit d'auteur. Certaines d'entre elles sont indiquées dans l'administration
du Template. Un exemple de fichier XML est montré ici:
<?xml version="1.0" encoding="utf-8"?>

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


<name>TemplateTutorial15</name>
<creationDate>August 2007</creationDate>
<author>Barrie North</author>
<copyright>GPL</copyright>
<authorEmail> compassdesigns@gmail.com </authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description>premier exemple de fichier XML</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>

Expliquons ce que certaines de ces lignes veulent dire:


• <install version="1.5" type="template">. Le contenu du document XML, utile pour
les instructions d'installation. L'option type = "template" spécifie que l'installateur est un template et
que c'est pour Joomla 1.5.
• <name>TemplateTutorial15</name>. Définit le nom de votre template. Le nom que vous
entrez ici sera également utilisé pour créer le répertoire dans le répertoire des templates. Par
conséquent, il ne devrait pas contenir de caractères que le système de fichier ne peut pas manipuler,
par exemple les espaces. Si l'installation est manuel, vous devez créer un répertoire qui est identique
au nom du template.
• <creationDate>August 2007</creationDate>.La date à laquelle le template a été créé.
Il s'agit d'un champ de formulaire libre et peut être autre chose comme mai 2005, 08-Juin-1978,
01/01/2004, et ainsi de suite.
• <author>Barrie North</author>. Le nom de l'auteur de ce template, très probablement
votre nom.
• <copyright>GPL</copyright>. Toute information de copyright passe par cet élément.
Des explications élémentaire concernant la licence pour les développeurs et les concepteurs peuvent
être trouvées sur les forums Joomla.
• <authorEmail>compassdesigns@gmail.com</authorEmail>. Adresse de courriel à
laquelle l'auteur de ce template peut être contacter.
• <authorUrl>www.compassdesigns.net</authorUrl>. L'URL du site de l'auteur.
• <version>1.0</version>. La version de ce template.
• <files></files>.Divers fichiers utilisés dans le template.
• Les fichiers utilisés dans le template sont exposées avec la balise <filename> :

<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>

• La section <files> contient tous les fichiers génériques comme les sources PHP pour le template ou la
vignette de prévisualisation. Chaque fichier énumérées dans la présente section est délimitée par
<filename> </filename>. Y seront également cités les fichiers utilisés par le template ; ci-dessus
l'exemple d'un fichier JavaScript.
• Tous les fichiers image que le template utilise sont également répertoriés dans la section . Encore une fois,
chaque fichier joint est balisé par <filename> </filename>. Les informations de chemin des fichiers
sont relatifs à la racine du template. Par exemple, si le template est dans le répertoire appelé 'YourTemplate',
et que toutes les images sont dans un répertoire "images" à l'intérieur de "YourTemplate ', le chemin correct
est : <filename>images/my_image.jpg</filename>.
• Enfin, toutes les feuilles de style sont énumérés dans la section des fichiers. Encore une fois, le nom de
fichier est fermé par <filename> </filename>, et ce chemin est relatif à la racine du template.
• <positions></positions>. La position des modules disponibles dans le template.
• <params></params>.Elles décrivent les paramètres qui peuvent être transmis au template via les
fonctions avancées de l'admin comme le changement de couleur du template.

2.3 Index.php
Qui a t'il en réalité dans le fichier index.php? Il s'agit d'une combinaison de (X) HTML et de PHP qui
détermine tout ce qui concerne la structure et la présentation des pages.
Tout d'abord, intéressons-nous à une partie critique de la réalisation d'un template valide, le DOCTYPE en
haut du fichier index.php. C'est le morceau de code qui se trouve tout en haut de chaque page Web. En haut
de notre page, ce que nous avons dans notre template:
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

La première déclaration PHP fait en sorte que le fichier ne soit pas accessible directement pour des raisons de
sécurité.
Le DOCTYPE d'une page Web est l'un des composants fondamentaux qui détermine comment une page Web
est affiché par un navigateur, et plus précisément, la façon dont ce navigateur interprète les CSS. Pour vous
donner une meilleure compréhension, une observation de alistapart.com dit:
[Les informations sur le site du W3C à propos des DOCTYPEs] écrit par des geeks pour les geeks. Et
quand je dis les geeks, je ne veux pas dire d'ordinaires professionnels du web comme vous et moi. Je
veux dire, les geeks, ceux qui font que nous ressemblons à une grand-mère, la première fois quelle
reçoit un mail.
Quoi qu'il en soit, vous pouvez utiliser plusieurs DOCTYPEs. Fondamentalement, le DOCTYPE indique au
navigateur la manière d'interpréter la page. Ici, les mots "strict" et "transitional" commencent à
flotter... (float: left et float: right habituellement). Essentiellement, depuis que le Web a commencé, les
différents navigateurs ont eu différents degrés de compatibilité avec le CSS. Cela signifie par exemple,
qu'Internet Explorer ne comprend pas le "min-width" (commande qui permet de fixer un minimum de largeur
de page). Pour contourner ces limitations, vous devez utiliser des "hacks" dans le CSS.

NOTE
Certains disent que considérer le XHTML comme une amélioration du HTML est mauvais. Si vous
comprenez réellement cette déclaration, vous êtes bien en avance et au-delà de ce guide. Vous pouvez en lire
plus à hixie.ch/advocacy/xhtml.

?Strict? veut dire que le HTML (ou XHTML) sera interprétée exactement comme le dicte les normes. Un
DOCTYPE "transitional" signifie que l'écriture de la page autorise quelques différences par rapport aux
normes.
Pour compliquer les choses, il existe des modes qu'on appelle "bizarreries". Si le DOCTYPE est faux, périmé
ou absent, le navigateur passe en mode ?quirks?. Il s'agit d'une tentative pour être rétro-compatible.
Internet Explorer 6, par exemple, donnera un rendu semblable à IE4.
Malheureusement, les gens finissent parfois en mode ?quirks? accidentellement. Cela arrive habituellement
de deux façons:
• Ils utilisent la déclaration DOCTYPE directement tirée de la page Web du WC3, et le lien est relatif :
DTD/xhtml1-strict.dtd. Vous devez indiquer le chemin complet, comme spécifié précédemment.
• Microsoft IE6 est valide mais passe en mode ?quirks?. Cela arrive lorsqu'il y a une déclaration xml avant
le DOCTYPE.
Ci-dessous, une déclaration XML (après le DOCTYPE):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language;?>" lang="<?php echo $this->language; ?>" >

La partie sur IE6 en mode ?Quirks? est importante. Dans ce chapitre, nous apprendrons à designer pour
IE6 et plus récent, nous entendons faire en sorte que tout fonctionne de manière standard. Cela permettra de
réduire au minimum les hacks que nous aurons à faire plus tard.

NOTE
Faire une page respectant les standards, où vous voyez "valid xhtml" en bas de page ne signifie pas qu'il s'agit
d'un code complexe, ou que les balises sont difficiles à comprendre. Cela signifie simplement que le code que
vous utilisez correspond au DOCTYPE que vous déclarer. C'est tout ! Rien d'autre.
Concevoir votre site aux normes peut être ramener à ?dire ce que vous faites et faire ce que vous dites?.
Voici quelques liens utiles qui vous aideront à comprendre les DOCTYPEs et le mode ?Quirks?:
• http://www.quirksmode.org/CSS/quirksmode.html
• http://www.alistapart.com/stories/doctype
• http://www.w3.org/QA/2002/04/Web-Quality
• www.compassdesigns.net/

2.4 Qui a t'il d'autre dans l'index.php?


Regardons la structure de l'en-tête en premier lieu; nous voulons être aussi minimes que possible, mais encore
assez pour un site de production. Les informations d'en-tête nous allons utiliser est la suivante:
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language;
?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template
?>/css/template.
css" type="text/css" />
</head>

Ce qui signifie?
Nous avons déjà examiné les répercussions de la déclaration DOCTYPE dans le fichier index.php. Le code
<?php echo $this->language; ?> extrait la langue à partir de la configuration globale du site.
La ligne suivante inclut davantage d'informations :
<jdoc:include type="head" />

Ce sont l'ensemble des informations défini dans la configuration globale du site. Il comprend les balises
suivantes (dans une installation par défaut):
<title>Welcome to the Frontpage</title>
<meta name="description" content="Joomla! - the dynamic portal engine and
content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content
Management" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link
href="index.php?option=com_content&amp;view=frontpage&amp;format=feed&amp;
Itemid=1&amp;type=rss" rel="alternate" type="application/rss+xml"
title="RSS 2.0"
/>
<link
href="index.php?option=com_content&amp;view=frontpage&amp;format=feed&amp
;Itemid=1&amp;type=atom" rel="alternate" type="application/atom+xml"
title="Atom
1.0" />
<script type="text/javascript" src="http://localhost/Joomla-
1.5RC2/media/system/
js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-
1.5RC2/media/system/
js/caption.js"></script>

Une bonne partie de ces informations sont créées à la volée et sont spécifiques à la page (article) sur laquelle
on est. Elles comprennent un certain nombre de balises METAs, le favicon, flux (RSS, ATOM) et quelques
fichiers standard JavaScript.
Les dernières lignes de l'en-tête fournissent des liens vers des fichiers CSS pour le template:
<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template
?>/css/template.
css" type="text/css" />

Les deux premiers fichiers, system.css et general.css contiennent certains styles génériques à
Joomla. Le dernier est le CSS du template, appelé ici template.css. Le code <?php echo $this-
>template ?> renverra le nom du template actuel. Il est écrit de cette façon plutôt que le chemin réel car le
code le rend plus générique. Lorsque vous créerez un nouveau template, il vous suffit de copier le code tel
quel et de ne vous inquiétez de rien.
Le dossier CSS du template peut avoir un nombre quelconque de fichiers, par exemple ceux conditionnelles
aux différents navigateurs. Celui-ci cible IE6:
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ieonly.css"
rel="stylesheet" type="text/css" />
<![endif]-->

Cet exemple fait partie des techniques permettant d'utiliser un template de paramètre:
<link rel="stylesheet" href="templates/<?php echo $this->template
?>/css/<?php
echo $this->params->get('colorVariation'); ?>.css" type="text/css" />

2.5 Template Joomla 1.5 vierge


Créer notre premier template sera très très facile! Prêt?
Tout ce que nous devons faire, c'est utiliser les déclarations Joomla pour insérer le contenu de tous les
modules et le corps du site.
<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>

A ce stade (si vous prévisualisez), le site n'inspire pas grand chose d’intéressant. La sortie est illustrée à la
figure 9,3.
Figure 9,3 : Un template sans style

Le template comprend les éléments suivants dans l'ordre assez logique:


• • Nom du site
• • Module haut
• • Modules de gauche
• • Contenu principal
• • Module de droite
Le minimum à savoir
Le template de base Joomla charge simplement les modules et le corps (composant). La présentation et le
design font partie des CSS, pas Joomla.
Le but est d'essayer de s'approcher le plus possible du marquage sémantiquement correst. D'un point de vue
du web, il faut entendre une page qui peut être lue par tout le monde, un navigateur, un spider, ou un lecteur
d'écran pour malvoyant. La sémantique est la pierre angulaire de l'accessibilité.
NOTE
Ce que nous avons ici est seulement le potentiel d'une sémantique correcte. Si nous devions commencer
maintenant et placer les modules aléatoirement, nous obtiendrions un vrai fouillis. Une considération
importante pour les sites CMS est que leurs templates est à l'image de leurs concepteurs. C'est ce que,
souvent, les concepteurs découvrent lors de leurs tentatives de validation de leurs sites.
Vous remarquerez que nous avons utilisé une série de commandes spécifiques à Joomla pour créer ce premier
jet:
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />

La déclaration PHP echo extrait simplement une chaîne de caractères du fichier configuration.php. Ici, nous
utilisons le nom du site, on pourrait tout aussi facilement avoir le texte suivant:
The name of this site is <?php echo $mainframe->getCfg('sitename');?><br
/>
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br
/>
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();;?>

La déclaration jdoc insert différents types de sortie XHTML à partir des éléments des modules.
Cette ligne insère un composant. Ce composant sera déterminé par le lien du menu:
<jdoc:include type="component" />

NOTE
Chose intéressante, vous semblez être en mesure de disposer de plusieurs instances qui génère divers
composants. Pas sûr que c'est ce que vous souhaitiez, mais je pense que vous voudriez savoir!
Cette ligne insère un module et sa localisation:
<jdoc:include type="modules" name="right" />

La syntaxe complète
<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Nous regarderons les différentes options de style dans le prochain chapitre.

2.6 CSS Template Tutorial étape 1


A ce stade, nous disposons d'un template très strict. J'ai créé un template qui est installable et disponible
dans la bibliothèque www.joomlabook.com: CSSTemplateTutorialStep1.zip.

Cela permet d'installer un template qui ne dispose que de deux fichiers, index.php et
templateDetails.xml. J'ai retiré les autres fichiers pour donner un os à nu, sans CSS. Il s'agit en fait
d'un bon template de diagnostic, vous pouvez l'installer et suivre les erreurs qui se produisent avec un
composant ou d'un module.

3. L'utilisation du CSS pour créer une mise en page sans table


Nous nous servirons de CSS pour faire une mise en page en 3 colonnes. Nous tenterons également d'en faire
une mise en page fluide. Il existe deux principaux types de mise en page web; fixe et fluide, et ils font tous
deux référence à la façon dont la largeur de la page sont contrôlées.
La largeur de la page est un problème en raison des nombreuses résolutions de navigateurs avec lesquels les
gens surfent sur le Web. Bien que le pourcentage est en baisse, environ 10% des internautes utilisent une
résolution de 800x600 ou moins. La majorité, 90%, utilise 1024x768 et plus. Faire une mise en page fluide
signifie que votre précieuse page Web ne sera pas une colonne réduite à la résolution 1024 et sera visible dans
son intégralité sur de petits écrans.
La conception peut utiliser des tableaux construire la page. Ils sont capable de définir la largeur des colonnes
en pourcentage, mais ils ont plusieurs inconvénients. Par exemple, les tableaux ont beaucoup de code
supplémentaire par rapport aux mises en page CSS. Cela conduit à un plus long temps de chargement (que
n'aime pas les internautes), et sont plus pauvres en performance dans les moteurs de recherche. Le code fait
environ le double de la taille, et pas seulement avec le balisage mais aussi avec autre chose appelé "spacer
gifs."
Même les grandes entreprises sont parfois tomber dans le piège de la table, comme en témoigne une récente
polémique au sujet du site disney.co.uk (version 3):
Il ya deux problèmes majeurs avec un site qui utilise des tableaux pour la mise en page.
• • Ils sont difficiles à maintenir. Pour changer quelque chose, vous devez déterminer ce que toutes les balises
comme <table>, <td>, <tr> font. Avec CSS, il n'y a juste que quelques lignes à inspecter.
• • Le contenu ne peut être ordonnée par la source. Beaucoup d'internautes ne voient pas les pages Web dans
un navigateur. Ceux affichés par un navigateur texte ou un lecteur d'écran lira la page du coin supérieur gauche
au coin inférieur droit. Cela signifie que leur première vue sera l'en-tête et la colonne de gauche (pour un 3
colonnes) avant de se mettre à la colonne du milieu, les choses importantes, puis la colonne de droite et le
pied de page. Une mise en page CSS, d'autre part, permet d'ordonner la source du contenu, ce qui signifie que
le contenu peut être réarrangé dans le code ou la source. Peut-être le plus important visiteur de votre site,
Google, et il utilise un lecteur d'écran à toutes fins utiles.
Jetons un coup d'oeil à notre disposition en utilisant le CSS. Vous pouvez placer les éléments (divers) de
plusieurs façons en utilisant le CSS. Pour une introduction rapide, une bonne source est Brainjar’s CSS
Positioning.
Si vous êtes nouveau sur CSS, vous pourriez avoir lu au moins un guide du débutant CSS. Voici quelques
suggestions:
• • Kevin Hale, un aperçu actuel des techniques de mise en page CSS http://particletree.com/features/an-ove ...
echniques/
• • Htmldog's CSS Beginner's Guide
• http://Www.htmldog.com/guides/cssbeginner/
• • Yourhtmlsource.com
• http://Www.yourhtmlsource.com/stylesheets/
Le minimum à savoir
Le Web design moderne utilise le CSS plutôt que des tableaux pour positionner des éléments. Il est difficile à
apprendre, mais c'est un investissement valable. Il ya beaucoup de ressources disponibles pour vous aider.
Nous nous servirons de la position float pour positionner notre contenu. A la base, le template pourrait
ressembler à la Figure 9,4.
Ca reste pas très excitant, mais passons en revue chaque partie.

Figure 9,4 : template de mise en page de base

Dans la figure 9,4, les colonnes de gauche, centrale et droite ont chacune leurs propres éléments. Chacune
flotte à gauche et ont une largeur en pourcentage qui, ensemble, donne 100%. Le style clear:both du pied
de page indique au navigateur d’arrêter le flottement et de s'étendre sur la largeur des trois colonnes. Quand
nous construisons notre deuxième template dans ce chapitre, nous allons devoir utiliser une technique plus
avancée.
Pour améliorer la mise en page nous allons ajouter des espaces neutres au contenu. Nous avons besoin
d'ajouter des aérations entre les colonnes, communément appelé "gouttière". Malheureusement, il y a un
problème ici. Vous savez peut-être que Internet Explorer n'interprète pas correctement le CSS. Un des
problèmes est qu'il calcule la largeur différemment. Nous pouvons résoudre ce problème en n'utilisant pas de
border ou de padding. Pour créer la gouttière, nous incluons un <div> entre les colonnes.
Au CSS nous ajoutons :
.inside {padding:10px;}

Our resulting <body> code for index.php is:


<body>
<div id="wrap">
<div id="header">
<div class="inside">
<?php echo $mainframe->getCfg('sitename');?>
<jdoc:include type="modules" name="top" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" />
</div>
</div>
<div id="content">
<div class="inside">
<jdoc:include type="component" />
</div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" />
</div>
</div>
<div id="footer">
<div class="inside">
Powered by <a href="http://joomla.org">Joomla!</a>. Valid <a
href="http://validator.
w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-
validator/
check/referer">CSS</a>. </div>
</div>
</div>
<!--end of wrap-->
</body>

Notre template.css ressemble à ceci:

body {
}
#wrap {
min-width:760px;
max-width:960px;
}
#header {}
#sidebar {float:left;width:20%; overflow:hidden }
#content {float:left;width:60%; overflow:hidden }
#sidebar-2 {float:left;width:20%; overflow:hidden }
#footer {clear:both;}
.inside {padding:10px;}

TUYAU
Les raccourcis CSS
Il est possible de réduire la quantité de code CSS en utilisant des "raccourcis". Un exemple pour padding
avec une marge appliquée à un élément, d'où:
Margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right:
10px;
Peut être remplacée par:
Margin: 5px 10px;
Il existe des ?raccourci? pour chaque définition de style. Une fois que vous avez déterminé les styles,
supprimez les versions longues. La syntaxe pour font est :
font : taille de la police | font-style | font-variant | font-weight |
line-height | font-family
Donc, plutôt que d'utiliser ce code:
Font-size: 1em;
Font-family: Arial, Helvetica, sans-serif;
Font-style: italic;
Font-weight: bold;
Line-height: 1.3em;

Utiliser ceci:
Font: bold 1em/1.3em Arial, Helvetica, sans-serif italic;

Pour en savoir plus sur cette syntaxe, une introduction aux raccourcis des propriétés CSS :
http://home.no.net/junjun/html/shorthand.html
Cette simple mise en page est bonne pour apprendre à utiliser les CSS avec Joomla, car elle montre deux des
avantages du CSS sur les tables, il y a moins de code, et il est plus facile à maintenir.
Toutefois, la source n'est pas ordonnées. Pour cela, nous devons utiliser une structure plus évoluée connue
sous le nom de nested float ([boites] flottantes imbriquées).

Une structure dont le contenu est hiérarchisée permet d' obtenir de meilleurs résultats en SEO que celles dont
le contenu important arrive tardivement dans le code. Vue d'un site Joomla, le contenu important vient des
composants.
CSS par défaut
Jusqu'à présent, tous nos CSS ont servi à de la mise en page. Alors, ajouter un peu de mise en forme:
/* layout.css CSS file*/
body {
text-align:center; /*center hack*/
}
#wrap {
min-width:760px;
max-width:960px;
width: auto !important; /*IE6 hack*/
width:960px; /*IE6 hack*/
margin:0 auto; /*center hack*/
text-align:left; /*center hack*/
}
#header {}
#sidebar {float:left;width:20%; overflow:hidden }
#content {float:left;width:60%; overflow:hidden }
#sidebar-2 {float:left;width:20%; overflow:hidden }
#footer {clear:both;}
.inside {padding:10px;}

Nous avons centré la page en utilisant un petit hack. Ceci parce qu'Internet Explorer ne lit pas exactement le
CSS. Avec un navigateur conforme aux standards, on peut écrire margin: 0 10%; pour centrer la page,
mais IE ne le comprend pas, donc nous centrons le ?texte? de la page entière, puis nous ferrons à gauche dans
les colonnes.
En commémoration au support de IE7 aux largeur min et max (IE6 ne le fait pas), nous pouvons ajouter une
largeur minimale et maximale. Notez que nous avons ajouter un petit hack pour IE6 car il ne comprend pas
non plus ces éléments. Il va ignorer le!important et avoir 960px de largeur.
NOTE
Il peut paraître étrange de définir la largeur de nos colonnes en pourcentage et ensuite paramétrer le conteneur
global en fixe. Eh bien, un certain nombre de choses se jouent ici:
• Avoir à l'intérieur d'un conteneur fixe des colonnes fluides rend le template très flexible.
• Nous avons un une largeur max alors pourquoi ne pas tout rendre fluide? Beaucoup d'internautes ont
maintenant d'énormes écrans. La recherche sur l'ergonomie nous indique que les lignes de texte de 900px de
large sont difficiles à lire parce que les yeux doivent parcourir un long chemin pour atteindre la ligne suivante.
La limitation de la fluidité rend le site plus confortable / accessible.
Nous avons également ajouté un nouveau style aux colonnes: overflow: hidden. Cela rendra les fins de pages
plus ?consistant? lorsque nous réduiront la largeur.
Au début du CSS nous initialiseront l'ensemble des styles typographiques, c'est ce qu'on appelle global reset:
/*Compass Design typography css */
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
}

Tous les margin et padding sont mis à zéro, ensuite tous les éléments de type bloc reçoivent une marge
par défaut. Cela contribue à assurer la cohérence des navigateurs. Vous pouvez en savoir plus sur le global
reset sur clagnut et left-justified.
La taille de la police est fixé à 76%. La raison pour cela est d'essayer d'obtenir des tailles de polices plus
cohérente sur tous les navigateurs. Toutes les tailles de police sont alors calés en em. Avoir line-height:
1,3 contribue à la lisibilité. Cela signifie que les pages seront plus accessibles parce que le spectateur sera en
mesure de redimensionner les polices avec leurs propres préférences. Cette question est examinée plus avant
dans "Une expérience de la typographie" sur The Noodle Incident (Owen Briggs)
Si nous devions ajouter des couleurs à l'arrière-plan, à l'en-tête, aux marges et au contenu des conteneurs, nous
verrions quelque chose comme le montre la Figure 9,5.
Notez que les colonnes latérales ne parviennent pas jusqu'au bas de page. C'est parce qu'ils s'étendent en
fonction de leur contenu; là où l'espace est blanc à gauche et à droite, ils n'y a rien.
Figure 9,5 : Template de base avec la typographie

Si nous avons un template qui a un fond blanc pour les trois colonnes, il n'y a pas de problème. Nous allons
utiliser cette approche et nous aurons des boites autour des modules. Si nous voulons que les colonnes soient
colorées sur toute leur hauteur, nous devons utiliser une image de fond qui s'étalera verticalement. Cette
technique est appelée Fausses Colonnes et est décrite par Douglas Bowman et Eric Meyer.

3.1 Les CSS spécifiques à Joomla


Bien que Joomla 1.5 donne la possibilité de complètement définir la structure à partir du template, il existe
des valeurs par défaut qui sont significatifs dans la production de contenu et en particulier des tables.
Parallèlement à ces tableaux, il y a des structures CSS prédéfinies disponibles pour les designers pour
agrémenter le style des pages. Basée sur une recherche de divers membres de la communauté, le tableau 9,2
montre la liste actuelle. Notez qu'il ne comprennen pas les balises Web génériques, comme H1, H2, p,
ul, a, form, et ainsi de suite.

Tableau 9,2 : Styles CSS par défaut de la version 1,0 à 1.5


article_separator contentpane outline
adminform contentpaneopen pagenav
article_separator contenttoc pagenav_next
author createdate pagenav_prev
bannerfooter created-date pagenavbar
bannergroup date pagenavcounter
bannerheader input pathway
banneritem inputbox pollstableborder
blog intro read
blog_more latestnews search
blogsection loclink searchintro
breadcrumbs mainlevel sections
button message sectiontable_footer
buttonheading metadata sectiontableentry
clr modifydate sectiontablefooter
componentheading module sectiontableheader
content_email moduletable small
content_rating mosimage smalldark
content_vote mosimage_caption sublevel
contentdescription mostread title
contentheading newsfeed wrapper
contentpagetitle

Beaucoup de styles que vous pourriez voir dans ce tableau ont en réalité des styles CSS encore plus
spécifiques. Fondamentalement, une règle spécifique l'emporte sur une moindre règle d'ordre général.
Par exemple :
a (color: blue;)
a:link (color: red;)
.contentheading (color: blue;)
div.contentheading (color: red;)

La couleur du lien et la couleur de .contentheading sera rouge, car cette règle est plus spécifique (comme
.contentheading est contenue dans un <div> )
Dans le cas des templates Joomla, vous allez souvent voir des règles plus spécifiques que d'autres. Cela se
produit souvent lorsque la classe est appliquée à une table. Voici d'autres exemples:
.moduletable
table.moduletable

.moduletable est le nom d'une <div> qui entoure un module. table.moduletable s'appliquera
seulement à un tableau avec une class="moduletable".
.moduletable s'appliquera quel que soit le style de classe activée.

a.contentpagetitle:link
.contentpagetitle a:link
a.contentpagetitle:link s'appliquera à tous les liens portant cette classe. .contentpagetitle
a:link s'appliquera à tous les liens à l'intérieur de cette classe.

Les spécificités ne sont pas facile à comprendre; c'est souvent plus facile de commencer en utilisant le style le
plus général possible et puis, de plus en plus précis lorsque les résultats ne sont pas ceux que vous attendez.
Voici quelques liens vers des sites qui traitent de la spécificité dans le détail:
• http://www.htmldog.com/guides/cssadvanced/specificity/
• http://www.meyerweb.com/eric/css/link-specificity.html
• http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Pour le moment, notre template utilise des tableaux. Comme mentionné plus haut, cela ralentit la page et rend
plus difficile sa mise à jour. Pour réduire le nombre de tableaux, quand nous appelerons les modules, nous
paramètrerons les styles dans le jdoc: include.

Le minimum à savoir
Joomla va produire des éléments spécifiques, des identifiants et des classes dans le code de la page Web.
Ceux-ci peuvent être prévus et utilisés pour les styler le design en utilisant CSS.

3.2 Les modules dans le Template


Si un module est appelé dans index.php, il dispose de plusieurs options sur la façon dont il est affichée.
La syntaxe est:
<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Le style est facultative et est défini dans templates/system/html/modules.php. Actuellement, par


défaut le fichier modules.php contient les valeurs suivantes :
OPTION=”table” (affichage par défaut) modules affichés dans une colonne. Ce qui suit montre un exemple
de ce qui est produit:

<table cellpadding="0" cellspacing="0" class="moduletable<?php echo


$params-
>get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
<tr>
<th valign="top">
<?php echo $module->title; ?>
</th>
</tr>
<?php endif; ?>
<tr>
<td>
<?php echo $module->content; ?>
</td>
</tr>
</table>

OPTION=”horz” fait apparaître les modules horizontalement. Chaque module est produit dans la cellule
d'une table qui l'entoure. Le code suivant montre un exemple:

<table cellspacing="1" cellpadding="0" border="0" width="100%">


<tr>
<td valign="top">
<?php modChrome_table($module, $params, $attribs); ?>
</td>
</tr>
</table>

OPTION=”xhtml” fait apparaitre le module comme un simple élément div. Le code suivant montre un
exemple:

<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">


<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
OPTION = "rounded" fait apparaître les modules dans un format qui permet les angles arrondis. Si ce
$style est utilisé, le nom moduletable change pour module. Le code suivant montre un exemple:
<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
<div>
<div>
<div>
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
</div>
</div>

OPTION="none" fait apparaître des modules comme une production brute contenant aucun élément ni
aucun titre. Voici un exemple:
echo $module->content;

Comme vous pouvez le constater, les options de CSS (xhtml et rounded) sont beaucoup plus légères pour le
code, ce qui facilite le design des pages Web. Je vous recommande de ne pas utiliser les styles « table » (par
défaut) et « horz », à moins que ce soit absolument nécessaire.
Ici, un truc vraiment sympa !
Si vous ouvrez le fichier modules.php, vous verrez toutes les options qui existent pour les modules. Il est
facile d'ajouter les votre propres, ce en fait un puissance outil de gabarits. Nous examinerons plus en détails
les dérogations dans notre section sur les templates.
Pour développer notre template, nous allons mettre un module de style "xhtml" sur l'ensemble de nos
modules:
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg(‘sitename’);?></h1>
<jdoc:include type="modules" name="top" style="xhtml"
/>
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml"
/>
</div>
</div>
<div id="content">
<div class="inside">
<jdoc:include type="module" name="breadcrumbs"
style="none" />
<jdoc:include type="component" />
</div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right"
style="xhtml" />
</div>
</div>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer"
style="xhtml" />
</div>
</div>
</div>
<!--end of wrap-->
</body>

Notez que nous ne pouvons pas mettre ce style sur <jdoc:include type=”component” /> parce
que ce n'est pas un module.
Le minimum à savoir
Dans la version 1.5, la production des modules peut être entièrement personnalisée, ou vous pouvez utiliser
la sortie pré-construit. Toutes ces options sont appelées module de chrome.
Nous avons également placé le titre du site à l'intérieur d'une balise <h1>. C'est sémantiquement plus correct,
et cela contribuera également au SEO. Supprimons également le style background des divs.
Nous allons également ajouter un peu de style CSS pour les modules avec une bordure et un fond pour le
module titre.
Notre CSS se présente maintenant comme suit:
/*Joomla Design typography CSS*/
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
269
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
#wrap{
border:1px solid #999;
}
#header{
border-bottom: 1px solid #999;
}
#footer{
border-top: 1px solid #999;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
}
h2,.contentheading{
font-size:1.5em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/ }

NOTE
Plusieurs des menus dans l'installation par défaut du menu ont un suffixe dans le module de propriétés
_menu. Pour obtenir que tout fonctionne correctement, j'ai supprimé ce paramètre.
Cette gestion CSS de la typographie produit maintenant le résultat illustré à la figure 9,6.

Figure 9,6 : template de base avec les modules « titre » stylés

3.3 les menus dans les Templates


Nous avons vu précédemment (chapitre 5), "Création de menus et de navigation," qu'il existe un certain
nombre de paramètres de la façon dont un menu sera rendue.
Là encore, en utilisant des listes gérées par du CSS plutôt que des tableaux nous obtenons un code allégé et
plus facile à baliser. Après avoir remplacé tous nos menus par des listes il nous reste seulement 12 tables
(nous verrons comment retirer le reste en utilisant la nouvelle fonctionnalité d'écrasement de la version
1.5).Rappelez-vous, le réglage list est nouveau dans la version 1.5; flat list est issu de la version 1.0 et
deviendra obsolète.
Les listes sont également préférables aux tables parce que les navigateurs, les lecteurs d'écran et les robots de
recherche seront en mesure d'accéder à votre contenu plus facilement.
Un des autres avantages de l'utilisation des menus CSS est qu'il existe beaucoup d'exemples de code sur divers
sites développés en CSS. Jetons un oeil à l'un d'eux et voyons comment ils sont utilisés.
Le site Web http://css.maxdesign.com.au/listamatic/ à une sélection de plus de 30 menus, tous utilisent le
même code.Il y a de légères différences dans le code que nous devons modifier afin de l'adapter à nos menus
Joomla.
Ces listes utilisent le code suivant:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a xhref="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Cela signifie qu'il existe une <div> englobante appelée navcontainer, et une liste <ul> avec une id
navlist. Pour reproduire cet effet dans Joomla, nous avons besoin d'avoir une sorte de cadre constitué de
<div>.
Nous pouvons y parvenir en utilisant les suffixes de module. Si vous vous souvenez, le résultat d'un module
avec pour option le style XHTML est:
<div class="moduletable">
<h3>modChrome_xhtml</h3>
modChrome_xhtml </div>

Si l'on ajoute un suffixe au module, qui s'ajoutera à la classe moduletable, comme ceci:
<div class="moduletablesuffix">
<h3>modChrome_xhtml</h3>
modChrome_xhtml </div>

Ainsi, lorsque vous prendrez un menu depuis Listamatic, vous devrez remplacer la classe navcontainer
par moduletablesuffix.

NOTE
Les suffixes de module, dans une certaine mesure, brouille la séparation entre la conception du site et
l'administration du site. L'un des objectifs de développement du noyau Joomla est de séparer clairement ces
rôles. Ceci implique qu'il est probable que cela deviennent obsolète dans les version ultérieur de Joomla 1.5
Cette utilisation d'un suffixe de classe est utile. Cela permet d'attribuer différents design d'un simple
changement de suffixe.
Le minimum à savoir
Il est préférable de toujours utiliser les liste à puces ou ordonnées pour créer un menu. Pour se faire, vous
pouvez consulter les nombreuses ressources CSS gratuites et disponibles sur le Web.
Pour notre site, nous utiliserons List 10 de Mark Newhouse. Notre CSS sera:
.moduletablemenu{
padding:0;
color: #333;
margin-bottom:1em;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0;
border-bottom:1px solid #fff;
}
.moduletablemenu ul{
list-style: none;
margin: 0;
padding: 0;
}
.moduletablemenu li{
border-bottom: 1px solid #ccc;
margin: 0;
}
.moduletablemenu li a{
display: block;
padding: 3px 5px 3px 0.5em;
border-left: 10px solid #333;
border-right: 10px solid #9D9D9D;
background-color:#666;
color: #fff;
text-decoration: none;
}
html>body .moduletablemenu li a {
width: auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

Nous avons ensuite besoin d'ajouter le suffixe de classe au menu (de ne pas souligner dans ce cas) à chaque
module menus que nous voulons styler. Le résultat est montré dans la Figure 9,7.
Pour tout menu, nous voulons être de style de cette façon, il nous faut ajouter "menu" comme module suffixe.
Figure 9,7 : Modèle de base avec le style de menu

TUYAU
Lorsque vous essayez d'obtenir un menu particulier pour travailler, voici un bon conseil: Créer une
installation par défaut Joomla et puis regardez le code qui fait la mainmenu. Copiez et collez ce code dans un
éditeur HTML (comme Dreamweaver). Remplacer tous les liens par "#", et ensuite vous pouvez ajouter des
règles CSS jusqu'à ce que l'effet que vous voulez est atteint. Le code pour le menu afin de créer le style est
comme suit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.astyle {
}
-->
</style>
</head>
<body>
<div class="moduletable">
<h3>Main Menu</h3>
<ul class="mainmenu">
<li id="current" class="item1 active"><a href="#">Home</a></li>
<li class="item2"><a href="#">Joomla! Overview</a></li>
<li class="item3"><a href="#">What’s New in 1.5?</a></li>
<li class="item4"><a href="#">Joomla! License</a></li>
<li class="item5"><a href="#">More about Joomla!</a></li>
<li class="item6"><a href="#">FAQ</a></li>
<li class="item7"><a href="#">The News</a></li>
<li class="item8"><a href="#">Web Links</a></li>
<li class="item9"><a href="#">News Feeds</a></li>
</ul>
</div>
</body>
</html>

Le CSS est incorporé au lieu de le lier pour l'éditer plus facilement.

3.4 Cacher les colonnes

Jusqu'ici, nous avons notre disposition à 3 colonnes, sans nous soucier s'il y a du contenu inclus. Du point de
vue d'un CMS, ce n'est pas très réaliste. Dans un site statique le contenu ne change jamais, mais nous voulons
donner aux administrateurs la possibilité de mettre à jour leur contenu sans s'inquiéter du design. Nous
voulons qu'automatiquement une colonne disparaisse s'il n'y a aucun contenu dedans.
Pendant le développement du noyau de Joomla 1.5, il y a eu de nombreux changements et améliorations
directement tirer du blog de développement..
Nous pouvons séparer ces changement en deux catégories. D'abord, il y a des changements dans la manière
dont les choses était faire dans la version 1.0 - par-exemple la nouvelle manière dont les modules sont
chargés, deuxièmement il y a de nombreuses fonctions supplémentaires, comme les paramètres de gabarit…
Les Changements
mosCountMoules
La fonction de mosCountModules a été remplacé par la fonction $this->countModules et le
support de conditions a été ajouté. Cela donne aux designers la possibilité de facilement compter le
nombre total de modules avec juste une ligne de code, par exemple $this-
>countModules(‘user1 + user2 );lequel retournera le nombre total de modules dans la
position USER1 et USER2.

NOTE
Plus d'informations sont disponibles sur les forums Joomla
Donc l'utilisation conventionnelle de mosCountModules serait :
<?php if($this->countModules('condition')) : ?>
do something
<?php else : ?>
do something else
<?php endif; ?>
Il y a 4 conditions possibles. Pour exemple, comptons le nombre de modules de la figure 9.7. Nous pourrions
intégrer ce code n'importe où dans index.php

left=<?php echo $this->countModules('left');?><br />


left and right=<?php echo $this->countModules('left and right');?><br />
Using CSS to Create a Tableless Layout
276 Chapter 9 Creating a Pure CSS Template
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right’);?>

• countModules('left'). retournera 4; Il y a 4 modules sur la gauche.


• countModules('left and right'). retournera 1; Il y a 1 modules sur la gauche ET la droite.
• countModules('left or right'). retournera 1; Il y a 1 modules sur la gauche OU la droite.
• countModules('left + right'). retournera 7; Il y a 7 modules sur la gauche plus la droite.

Dans cette situation, nous avons besoin d'utiliser une fonction qui nous permet de compter les modules à des
emplacements spécifiques. Donc par exemple, si nous n'avons aucun contenu publié à droite nous pouvons
ajuster la largeur de colonne pour combler le vide.
Il y a plusieurs manières pour réaliser cela. Nous pourrions ajouter une condition dans le body pour ne pas
montrer le contenu et avoir ensuite un style différent pour le contenu en fonction d'où se trouve les colonnes.
Pour rendre cela aussi facile que possible, j'ai une série de déclarations conditionnelles dans le head qui
(re)définissent quelques styles CSS :
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

Donc nous comptons :


? s'il n'y a rien à gauche ou à droite, nous sommes à 100 %.
? s'il y a quelque chose à gauche ou à droit, nous sommes à 80 %.
? s'il y a quelque chose à gauche ET quelque chose à droite, nous sommes à 60 %.
Nous avons donc besoin de changer le <div> du fichier index.php en <div id="content<?php
echo $contentwidth; ?>">

Changeons le CSS :
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
Les déclarations PHP conditionnelles du head doivent être placées la ligne après la déclaration du
template.css. Ceci parce que s'il y a 2 règles CSS identiques; celle qui vient la dernière écrase les
précédentes. Cela peut aussi être fait d'une façon semblable en ayant la condition if qui importe un sous
fichier CSS.
NOTE
Pendant que essayez de diagnostiquer vos déclarations PHP conditionnelles, vous pouvez ajouter une ligne
de code à index.php, pour voir qu'elle est la largeur de votre colonne:
This content column is <?php echo $contentwidth; ?>% wide
Donc, nous sommes à mi-chemin, mais maintenant nous avons des conteneurs vides <div> là où les colonnes
sont.

3.5 Cacher le code des modules

Lors de la création colonnes étirables, il est de bon usage de ne pas généré les modules s'il
n'y a pas de contenu. Si cela n'est pas fait, les pages auront des <div> s vides, ce qui peut
conduire à des problèmes de navigateur.

Pour masquer les <div> vides, l'instruction if suivante est utilisée:

<?php if($this->countModules('left')) : ?>


<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>

Utiliser ce code, s'il n'y a rien de publié à gauche, alors <div id="sidebar"> ne sera pas émis.
Grâce à ces techniques pour nos colonnes de gauche et de droite, notre fichier index.php
ressemble maintenant au code qui suit. Nous allons également ajouter un "include'' pour le
module ''breadcrumb", le module qui affiche la page en cours et le chemin. Notez que cela doit
maintenant être inclus dans le fichier index.php et publiées également sous forme d'un module.
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language;?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this-
>template?>/css/template.css" type="text/css" />
<?php
if($this->countModules('left and right') == 0)
$contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth
= "80";
if($this->countModules('left and right') == 1)
$contentwidth = "60";
?>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe-
>getCfg('sitename');?></h1>
<jdoc:include type="modules" name="top"
style="xhtml" />
</div>
</div>
<?php if($this->countModules('left')) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left"
style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<jdoc:include type="module" name="breadcrumbs"
style="none" />
<jdoc:include type="component" />
</div>
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right"
style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('footer')) : ?>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer"
style="xhtml" />
</div>
</div>
<?php endif; ?>
<!--end of wrap-->
</body>
</html>
Le minimum à savoir
Des éléments, tels que des colonnes ou des modules, peuvent être cachés (ou repliés) lorsqu'ils ne
contiennent rien. Cela se fait grâce aux instructions conditionnelles PHP qui les lient à différents styles CSS.
Je recommanderais une manière légèrement différente pour réaliser le pied de page. La façon montrée ici est
codé en dur dans le fichier index.php, ce qui le rend difficile à changer. Actuellement, le module ''footer''
dans l'administration Joomla montre le ''copyright'' et ne peut pas être facilement édité. Il est beaucoup plus
sensé d'avoir un module (X) HTML personnalisable placé dans le pied de page ainsi l'administrateur pourra
le changer plus facilement. Si vous voulez créer votre propre pied de page, il suffit d'annuler la publication de
ce module et de créer un module html dans la langue que vous souhaitez.
Dans ce cas nous remplacerons
<jdoc:include type="modules" name="footer" style="xhtml" />

par
<jdoc:include type="modules" name="bottom" style="xhtml" />

Nous devons nous rappeler d'ajouter cette position dans le fichier templateDetails.xml.
TUYAU
Il y a plusieurs noms associés aux modules de Joomla: banner, left, right, user1, footer, et ainsi de suite. Une
chose importante à comprendre est que les noms ne correspondent pas à un endroit particulier.
L'emplacement d'un module est entièrement contrôlée par le concepteur du modèle, comme nous l'avons vu. Il
est d'usage de les placer à des emplacements qui correspondent à ce nom, mais ce n'est pas obligatoire.
Ce modèle de base montre certains des principes fondamentaux de la création d'un template Joomla.

3.6 CSS Template Tutorial étape 2

Nous avons maintenant une base, mais ce modèle fonctionne. Certaines règles typographiques simples ont
été ajoutées, mais plus important encore, nous avons créé une mise en page en pure CSS avec des colonnes
dynamiquement étirables. J'ai créé un modèle installable, disponible sur le site :
http://www.joomlabook.com/the-files/cat_view/4-joomla-15-templates.html. (vous devez être enregistré pour
les télécharger)
Maintenant que nous avons les éléments de base terminés, nous allons créer un modèle un peu plus attrayant
en utilisant les techniques que nous avons apprises.
4. Réaliser un vrai Template Joomla 1.5
La première chose dont nous avons besoin pour commencer c'est notre maquette. Une maquette c'est la base
de la conception d'un template. Nous utilisons celui offert gracizeusement par Casey Lee, le Designer en chef
de Joomlashack, pour nos besoins. Il s'appelle "Bold", et nous pouvons le voir à la figure 9.8.

4.1 Découper et trancher


L'étape suivante du processus est ce qui est connu comme la découpe. Nous devons utiliser notre programme
de graphisme pour créer de petites images découpées qui peuvent être utilisés dans le template. Il est
important de prêter attention à la façon dont les éléments peuvent être redimensionnés si besoin est. (Mon
application graphique de prédilection est firefox, car j'estime qu'il est mieux adapté au web design,
contrairement à l'impression, que Photoshop).

FIGURE 9.8 : Une maquette issue de Joomlashack

4.2 Paramétrer la position des modules

Ce modèle aura des emplacements spécifiques pour des modules spécifiques, légèrement différents des
normes d'installation de Joomla. Pour vous assurer que les modules sont correctement mis en place durant les
différentes étapes de ce template, vérifiez les éléments suivants:
• User1 = pour le module de recherche
• User2 = pour le menu du haut
• Top = pour newsflash ou module HTML personnalisé
Rien d'autre ne devrait être publié à ces emplacements.
4.3 Header
L'image d'en-tête a un léger renflement au sommet. Nous voulons conserver cela, donc nous mettons l'image
comme fond d'écran puis nous lui attribuerons une couleur. De cette façon, l'en-tête calé verticalement si
nécessaire, par exemple, si la taille des polices est redimensionnée. Nous devons également changer le couleur
de toutes les fontes en blanc afin qu'ils apparaissent sur fond noir.
Nous utiliserons également une image de fond pour le champ de recherche. Nous devons nous assurer que la
saisie est bien ciblé à l'aide des spécificités CSS. J'ai aussi utilisé le positionnement en absolu dans un élément
positionné relativement afin de placer le champ de recherche où je voulais. L'image ne s'ajustera pas lors du
redimensionnement du texte puisqu’il n’y a qu’une image. Cela nécessitera une image en haut et en bas. C'est
un autre exercice pour vous!

#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;}
#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;}
#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
padding:2px;
font:1em Arial, Helvetica, sans-serif;
}
#header .search {
position:absolute;
top:20px;
right:20px;
}

Je n'ai pas utilisé de logo graphique ici, j'ai utilisé du texte brut. La raison est principalement due aux SEOs,
les moteurs de recherche ne peuvent pas lire les images. On pourrait le remplacer par une chouette image,
mais je vais laisser cela comme ça, c'est un autre exercice à faire par vous-même.
Notre en-tête ressemble maintenant à ce qui est montré dans la Figure 9.9.

FIGURE 9.9 : Image de fond du Header

Ensuite, nous avons besoin pour mettre en œuvre une technique utilisée pour afficher un fond sur une colonne
fluide: sliding doors (portes coulissantes).
4.4 Le fond des colonnes

Rappelons-nous que lorsque nous mettons un fond de couleur sur les colonnes, la couleur ne va pas jusqu’au
pied de page. C'est parce que l'élément <div>, dans ce cas la barre latérale sidebar-2, est seulement aussi
grande qu’il y a de contenu. Ça ne remplie donc pas l'élément conteneur.
Nous devons utiliser une technique appelée Fausses colonnes coulissantes, avec laquelle vous créez
essentiellement deux larges images qui glisseront l’une sur l'autre. Nous avons besoin de créer deux nouveaux
conteneurs contiendront les fonds. Normalement, on pourrait appliquer l'une au #wrap, mais j’utilise un
conteneur en extra pour finir le bas des illustrations.
Pour en savoir plus :
- http://www.pckult.net/tutoriaux/27-css/1282-la-technique-css-du-l-sliding-door-r-
appliquee-a-un-menu-web-20
- http://alistapart.com/articles/fauxcolumns/

- http://www.communitymx.com/category.cfm?catid=11

Dans notre cas, notre largeur maximale est de 960px, donc on commence avec une image de cette largeur. Dans
le fichier image source, c’est slidingcolumns.png. Nous exportons ensuite deux tranches (j'ai utilisé la même
image et cache /dévoile selon le côté), une de 960px de large avec un fond de 192px à gauche, et une de 960px
de large avec un fond de 196px à gauche.

NOTE
L'image de gauche a besoin d'avoir un fond blanc et l'image de droite a besoin d'un fond transparent. J'ai
modifié la couleur de l'arrière-plan et j’ai exporté les images à partir du fichier source.

D'où vient 192px? C’est 20% de 960px, puisque nos colonnes font 20% de large. Nous utilisons la propriété
background-position pour placer les images au bon endroit. Ici, nous utilisons le format CSS condensé de la
propriété background:

#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}

#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}

Dans notre index.php, nous avons simplement ajouté un conteneur à l’intérieur de l’enveloppe (wrap):
<div id="wrap">
<?php if($this->countModules('left')) : ?>
<div id="leftfauxcol">
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="rightfauxcol">
<?php endif; ?>
<div id="header">
Nous avons également besoin de mettre une condition aux <div>s qui clôturent:
<?php if($this->countModules('left')) : ?>
</div>
<!--end of leftfauxcol-->
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
</div>
<!--end of rightfauxcol-->
<?php endif; ?>

Nous devons également mettre un fond sur notre bas de page et sur les modules du bas / éléments, sinon, le
fond de la colonne sera affiché:
#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}
#bottom {
background:#333;
color:#666;
padding:10px 50px;
}

Nous devons initialiser (clear) les éléments flottants afin que le conteneur flottant (des fausses colonnes)
s’étende jusqu’au le bas de la page. La méthode traditionnelle de faire était d'utiliser la propriété: after. Mais
avec la sortie d'IE7, cette méthode ne fonctionne pas complètement. Nous devons aborder l'initialisation des
flotteurs dans Internet Explorer 6 et 7, et c'est comme ça que ça que s’applique tout le long des colonnes.

Un couple de solution a été trouvée, nous allons utiliser l’option « faites tout glisser (ou presque) » ici.
Ainsi, nous ajoutons un simple clear:both au #footer, et nous en ajoutons float aux #fauxcol de
#wrap. Nous ajoutons cela à une feuille de style supplémentaires spécialement pour IE6:

#leftfauxcol
float:
width:
}
#rightfauxcol
float:
width:
}
#footer
float:
width:
}

Nous allons avoir à ajouter des instructions conditionnelles à l’en-tête du fichier index.php:

<!--[if lte IE 6]>


<link href="templates/<?php echo $this->template ?>/css/ie6only.css"
rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7only.css"
rel="stylesheet" type="text/css" />
<![endif]-->

4.5 Modules flexibles


Dans notre conception, nous avons un large bloc initial. Mais nous ne savons pas de quelle taille sera le texte.
Pour résoudre ce problème, nous avons mis une déclaration jdoc module: include dans l’élément
conteneur et lui donnons un fond de même couleur que l'image.
C'est la stratégie que nous avons utilisée pour l'en-tête:
<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="inside">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
Making a Real Joomla 1.5 Template
286 Chapter 9 Creating a Pure CSS Template
</div>
<?php else : ?>
<div id="top">&nbsp;</div>
<?php endif; ?>

Remarquez, nous avons également utilisé un commentaire conditionnel de sorte que si l'emplacement du module
supérieur n'a pas de contenu, l'image teaser orange ne sera pas là. CE qui sera là c’est un conteneur vide qui
contiendra un peu de l'image de fond et 20px de padding vertical au pire. Il s'agit là d’un choix purement
esthétique.
Le CSS a besoin d'utiliser les spécificités CSS pour remplacer les styles moduletable définie précédemment:

#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}
#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
padding:0;
margin:0;
font-stretch:expanded
}
#top .moduletable{
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
border:0;
}

Maintenant, nous devons nous concentrer sur certains aspects de la typographie.

4.6 Typographie
Beaucoup de liens devront être de couleur blanche, nous allons donc les définir en tant que tel de manière
globale et ensuite modifier la couleur de la colonne centrale:
a:link,a:visited {
text-decoration:underline;
color:#fff;
287
}
a:hover {
text-decoration:none;
}
#content60 a:link,#content60 a:visited,#content80 a:link,#content80
a:visited,#content100 a:link,#content100 a:visited {
color:#000;
}

Ce design a un bouton stylisé. Nous le créerons en utilisant une image de fond de la maquette. Il s'agit d'une
petite image qui est striée horizontalement:

.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
margin:4px 0;
padding:0 4px;
cursor:hand;
}

Pour les tables, comme la FAQ, nous pouvons ajouter un arrière-plan simple en ré-utilisant l'image du teaser.
Réutiliser des images est classique et permet d'économiser sur la bande passante, rendant le chargement des
pages plus rapide.
.sectiontableheader {
background:url(../images/teaser.png);
padding:5px;
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
}
Les modules ont besoin d'une simple redéfinition et adaptation des paddings et des margins:
/* Module styling */
.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}
.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
Making a Real Joomla 1.5 Template
288 Chapter 9 Creating a Pure CSS Template
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
Les menus, comme toujours, ont besoin de beaucoup de style CSS. Ici, nous resterons aussi simple que
possible. Nous découpons une image unique qui comprend à la fois la puce et le soulignement. Le style est
activé par l’ajout d’un suffixe de module menu à toutes les listes de lien sur lesquelles nous voulons agir :

/*Menu Styling*/
.moduletablemenu {
margin-bottom:1em;
}
.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
.moduletablemenu ul {
list-style:none;
margin:5px 0;
}
.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}
.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}
.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}
Enfin, l’onglet du menu en haut à droite. En tant qu’avocat de l'accessibilité, nous voulons le paramétrer de
manière à ce que la police soit redimensionnable. Heureusement, une technique a été développée pour cela, c'est
en fait le même principe que nous utilisons pour nos colonnes, les portes coulissantes (doors slidings) à
nouveau!

We will also try and do some speed optimization for the template and use just asingle image for the left and
right side of the “doors,” as well as the on and off state.This is known as using sprites. The CSS is not too
hard; we just have to fi ddle around with the vertical position of the image background for the “on” state:

Nous allons optimiser la vitesse de chargement en utilsant une image unique pour le côté gauche et droit de nos
"portes", aussi bien pour les états « actifs » qu’« inactifs ».Cette technique est connue sous le nom de sprites.
Ce CSS n'est pas trop dur, nous allons bricoler la position verticale de l'image de fond pour l’état "actif":
/*Tab Menu Styling*/
.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.moduletabletabs ul {
list-style:none;
float:right;
margin:0;
padding:0;
background:#212121;
width:100%;
}
.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}
.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}
.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}
.moduletabletabs #current a {
color:#fff;
Making a Real Joomla 1.5 Template
290 Chapter 9 Creating a Pure CSS Template
background:url(../images/tabs.png) no-repeat 100% -84px;
}
Nous avons aussi besoin d'ajouter le suffixe de module tabs pour le module du menu que nous utilisons.

Si vous jetez un œil sur la conception originale, vous remarquez qu'il y avait des icônes sur ces onglets. Comme
nous utilisons déjà deux images de fond, une sur le <li> et l'autre sur le lien, nous aurions besoin d'un
troisième élément sur lequel nous placerons l’icône d’arrière-plan. Vous pouvez le faire avec un <span>, mais
ceci est du CSS très avancé. Je vais vous laisser ça comme un devoir de vacance.

La dernière chose qui reste à faire est de revoir le fichier templateDetails.xml. Il doit contenir tous les
fichiers et images utilisés dans le modèle afin d’installer correctement le fichier zip. Il existe un certain nombre
d'outils qui vont le faire automatiquement si vous utilisez la version 1.0.x, mais au moment de la rédaction de ce
document, aucun n'est disponible pour la version 1.5.
Notre template fini devrait ressembler à la Figure 9.10.

FIGURE 9.10 Advanced template with typography

Le minimum à savoir
Créer un template Joomla est plus une question de conception graphique et de manipulation CSS que d’avoir
une « connaissance spéciale de Joomla ».

4.7 CSS Template Tutorial étape 3


Nous avons maintenant un modèle basé sur une maquette (ou design). Quelques règles simplesde typographie
ont été ajoutées, mais plus important encore, nous avons créé une mise en page CSS pure avec des colonnes
dynamiquement étirables et un astucieux onglet de menus. J'ai créé un modèle qui est installable et disponible
sur www.joomlabook.com: CSSTemplateTutorialStep3.zip.
Maintenant que nous avons fait les bases, commençons d'abord à plonger dans quelques-unes des
fonctionnalités avancées possibles avec le template 1.5.

5. Advanced Templating Features

Joomla 1.5 offre un certain nombre de fonctionnalités avancées qui augmentent de manière significative ce qui
est possible de faire avec des templates. Nous avons déjà vu un exemple dans ce chapitre, la possibilité de créer
un Chrome personnalisé ou des sorties (?) pour les modules.
Examinons chacun d’eux tour à tour:
• Paramètres de template
• Templates de remplacement

5.1 Les Paramètres de template


Nouveau dans joomla 1.5, l'ajout de paramètres de template. Cela vous permet de passer des variables au
template à partir des options sélectionnées dans l’administration. Nous pouvons ajouter une fonction assez
simplement à notre modèle. Dans le fichier templateDetails.xml, ajoutez le code suivant:

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

Il faut également un fichier appelé params.ini dans votre dossier template. Ca peut être un fichier vide, mais
Joomla a besoin de ce fichier pour stocker les réglages que vous avez. Un fichier INI pour l'exemple précédent
pourrait ressembler à ceci:
template_width=2

Vous devez vous assurer que ce fichier est accessible en écriture donc des modifications doivent être apportées.
Nous avons aussi besoin d'ajouter ce fichier dans le fichier templateDetails.xml. Dans le gestionnaire
des templates pour ce modèle, vous voyez les réglages possibles pour ce paramètre, comme le montre la Figure
9.11.

FIGURE 9.11 paramètres de template dans l’administration

Nous pouvons voir qu'il s'agit de simples boutons radios avec trois options.
<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>
Ensuite, nous changeons la balise <body> dans notre index.php par la suivante:
<body class="width_<?php echo $this->params->get(‘template_width’); ?>">
Nous avons ensuite besoin d’ajouter le texte suivant dans le fichier CSS:
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;
width:960px;
}
#wrap {
text-align:left;
margin:0 auto;
}
This gives us three options: a fixed narrow width, fixed wide width, and a fluid version. Using template
parameters in this way can give the site administrator flexibility in almost any facet of a template, width, color,
and so on, all controlled with conditional PHP setting CSS styles.

Cela nous donne trois options: une petite largeur fixe, une plus large et une version fluide. Les paramètres de
emplate donne à l’administrateur du site une flexibilité dans presque toutes les facettes d'un modèle, la largeur,
la couleur, et ainsi de suite, tous contrôlés avec des conditions PHP qui définissent les styles CSS.

5.2 Les templates de remplacement


Perhaps the most powerful new feature of templates in 1.5 is the ability to easily override core output. This is
done with new output fi les called template fi les that correspond to the layout views of components and
modules. Joomla checks in each case to see if one exists in the template folder, and if one does, uses that one
and overrides the normal output.

Peut-être la nouveauté la plus puissante dans la version 1.5 est la possibilité de remplacer facilement le noyau de
base. Cela se fait avec la production de nouveaux fichiers appelés templates files. Joomla vérifie pour chaque
module s'il n’en existe pas un dans le dossier du template, et si oui, remplace celui d’origine.

5.3 Override Structure


Toutes les mises en page et tous les modèles sont dans le noyau principal dans un tmpl/folder.
L'emplacement est légèrement différent pour les composants que pour les modules, car les modules ont
essentiellement une seule vue ( ?). Par exemple
modules/mod_newsflash/tmpl/
modules/mod_poll/tmpl/
components/com_login/views/login/tmpl/
components/com_content/views/section/tmpl/

La structure de base de tous les composants et de tous les modules est : Affichage -> Format -> Modèles.
Le tableau 9.3 montre quelques exemples, à noter que les modules ont un seul point de vue ( ?).
TABLEAU 9.3 Exemple de remplacement
View Layout Templates
Category Blog.php blog_item.php blog_links.php
Category default.php default_items.php
default.php
(Newsflash module) horz.php _item.php
vert.php

Il ya généralement plusieurs modèle de fichiers concernés pour une mise en page particulière. Ils ont une
convention de nommage commun (voir le tableau 9.4).

TABLEAU 9.4 convention de nommage lors de remplacement (overrides)


Filename Convention Description Example
layoutname.php The master layout template blog.php
layoutname_templatename.php A child layout template called from blog_item.php
the master layout file blog_links.php
_templatename.php A common layout template by used _item.php
different layouts

5.4 Ecraser les Modules


Each module has a new folder that contains its templates, which is called tmpl. Inside are PHP files that create the
output. For example
Chaque module a un nouveau dossier qui contient ses modèles, et qui est appelé tmpl. Dedans il y a des fichiers
PHP qui créent la sortie. Par exemple
/modules/mod_newsflash/tmpl/default.php
/modules/mod_newsflash/tmpl/horiz.php
/modules/mod_newsflash/tmpl/vert.php
/modules/mod_newsflash/tmpl/_item.php

Les trois premiers sont les trois mise en page de Newsflash sur la base duquel les options de modules sont
choisies, et le fichier _item.php qui est un modèle de mise en page commune au trois. Ouvrez ce fichier, on
y trouve
<?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; ?>
Nous pourrions le changer en supprimant les tables pour le rendre un peu plus 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; ?>
Ce nouveau fichier devrait être placé dans le répertoire du template dans un dossier appelé html comme suit:
templates/templatetutorial15bold/html/mod_newsflash/_item.php

Nous avons simplement dégagé les tables du module newsflash - aussi facile que ça!

5.5 Remplacer les composants

Les composants fonctionnent à peu près exactement de la même manière, sauf qu'il y a plusieurs vues associées
à de nombreux composants.
Si nous regardons dans le dossier com_content, nous voyons un dossier appelé views.

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

Ainsi, ces dossiers correspondent aux quatre vues( ?) possibles pour le contenu :archive, article,
category et section.
A l’intérieur d'un point de vue, nous trouvons le dossier tmpl, et dedans, les différentes présentations possibles.
Si nous regardons dans le dossier de category, nous voyons
/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

Notez que dans le cas de com_content, la mise en page de default.php se réfère à la mise en page
standard qui présente les articles comme une liste de liens.
Ouvrez le fichier blog_item.php, nous voyons les tableaux utilisés actuellement. Si nous voulons passer
outre ce qui sera produit, nous mettons ce que nous voulons utiliser dans notre dossier template/html /,
par exemple:
templates/templatetutorial15bold/html/com_content/category/blog_item.php

C'est un processus relativement simple de copier/coller ces output (sorties) depuis les dossiers
/components/ et /modules/ dans templates/yourtemplate /html.
La fonctionnalité override (remplacer/écraser) fournit un mécanisme puissant pour personnaliser votre site
Joomla grâce au template. Vous pouvez créer des modèles qui mettent l'accent sur le SEO, l'accessibilité ou les
besoins spécifiques d'un client.

Le minimum à savoir
Joomla 1.5 offre de nouvelles fonctionnalités pour les templates qui permettent aux concepteurs de contrôler
complètement le code et la présentation d'un site web Joomla.

5.6 Joomla sans table


Le téléchargement du CMS Joomla contient également un template appelé Beez qui est un exemple de template
Override en action. L'équipe chargée du design et d'accessibilité ont créé une série d’éléments de remplacement
dans le dossier html. Notre dernier exemple est un template qui utilise ces overrides pour supprimer toutes les
tables de Joomla.
5.7 CSS Template Tutorial étape 4
Nous avons maintenant un modèle basé sur une maquette (ou design). Plus style typographie ont été ajoutés,
mais plus important encore, nous avons utilisé la maquette de notre mise en page CSS pour créer un modèle qui
des colonnes dynamiquement étirables et un astucieux menu à onglet. Nous avons également redéfini la sortie
de Joomla de sorte qu'aucune table ne soit utilisée.

J'ai créé un modèle installable est disponible sur www.joomlabook.com:


CSSTemplateTutorialStep4.zip

Récapitulatif
Dans ce chapitre, nous avons travaillé au travers quatre exemples de templates, chaque fois en augmentant la
complexité et les fonctionnalités.
• Les sites modernes ont un contenu distinct de la présentation en utilisant une technique connue sous
le nom de feuilles de style en cascade (CSS). Dans Joomla, le template contrôle la présentation du
contenu.
• Lors de la création d'un template, vous devez disposer de Joomla sur un serveur ce qui vous
permettra d'effectuer des changements et de rafraîchir la page de sortie.
• La création de templates valides devrait être une intention, et non un objectif. L'idée est de faire
votre template aussi accessible que possible pour les humains et les robots, et non pour obtenir un
certificat de validité de votre code.
• Le template de base Joomla charge simplement les modules et le corps (composants). La
présentation et le design font partie des CSS, pas du noyau Joomla.
• Le Web design moderne utilise le CSS plutôt que des tableaux pour positionner des éléments. Il est
difficile à apprendre, mais c'est un investissement valable. Il ya beaucoup de ressources disponibles
pour vous aider.
• Joomla va produire des éléments spécifiques, des identifiants et des classes dans le code de la page
Web. Ceux-ci peuvent être anticipés et utilisés pour styler le design en utilisant CSS.
• Dans la version 1.5, la production des modules peut être entièrement personnalisé, ou vous pouvez
utiliser la sortie pré-construit. Toutes ces options sont appelées module de chrome.
• Il est préférable de toujours utiliser les liste à puces ou ordonnées pour créer un menu. Pour se faire,
vous pouvez consulter les nombreuses ressources CSS gratuites et disponibles sur le Web.
• Des éléments, tels que des colonnes ou des modules, peuvent être cachés (ou repliés) lorsqu'ils ne
contiennent rien. Cela se fait grâce aux instructions conditionnelles PHP qui les lient à différents
styles CSS.
• Créer un template Joomla est plus une question de conception graphique et de manipulation CSS que
d’avoir une « connaissance spéciale de Joomla ».
• Joomla 1.5 offre de nouvelles fonctionnalités pour les templates qui permettent aux concepteurs de
contrôler complètement le code et la présentation d'un site web Joomla.