Template Joomla 1.5 Fr

Embed Size (px)

Citation preview

Template Joomla 1.5 Tutorial(Auteur : Harry M. North extrait du livre Joomla 1.5, A User's Guide. Version franaise : Marc Hron)

Le chapitre 9 de ce livre est dlivr sous Creative Commons et Non-commercial licence. Rfrez-vous http://creativecommons.org/licenses/by-nc-sa/2.5/ pour plus de dtails.

9Sommaire: 1 2 3 4 5 Crer un template Joomla 1.5 avec les CSS Cration d'un simple template vierge L'utilisation du CSS pour crer une mise en page sans table Raliser un vrai template Joomla 1.5 Template Joomla 1.5 avanc

1. Crer un template Joomla 1.5 avec les CSSDans ce chapitre, nous allons suivre les tapes de la cration d'un template Joomla. Concrtement, nous allons crer 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 rfrenc par les moteurs de recherche. Ces questions sont examines en dtail 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 exerces par un template Joomla, et quelle est la diffrence quand un template n'a pas de contenu par rapport au moment o le contenu est ajout dans le systme de gestion de contenu (CMS). Comment fonctionne le processus de conception localhost. En quoi diffre 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 crer une source en 3 colonnes qui utilise le CSS plutt que des tables? Quels sont les styles CSS qui doivent tre utiliss avec Joomla, et quels sont les styles par dfaut qui sont utiliss 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 manire simple de produire des menus en CSS qui imitent l'effet de ceux qui sont labores en JavaScript? Comment peut-on matriser l'affichage des colonnes en fonction de la prsence de contenu ou non ? Quelles sont les mesures appropries pour crer un vritable 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 contrlent la prsentation du contenu. Le template Joomla n'est pas un site. Le template est une partie ncessaire 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 donnes 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 conu de sorte que lorsque votre contenu est insr, il va hriter de la feuille de style dfinie 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 associes 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'inconvnients: Il existe une sparation entre le contenu et la prsentation, 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 critres d'un site web qui rpond des normes modernes. Un nouveau template, et donc un tout nouveau look, peut tre appliqu instantanment. Cela peut mme tre des endroits diffrents (positionnement du contenu ainsi que les couleurs et les graphiques). Si diffrentes prsentations sont ncessaires pour un mme site, cela peut tre compliqu raliser. Bien que des templates diffrents peuvent tre appliqus des pages diffrentes, cette fonctionnalit built-in n'est pas fiable. Il est prfrable d'utiliser le PHP dans certaines conditions et de crer 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 prsentation en utilisant une technique connue sous le nom de feuilles de style en cascade (CSS). Dans Joomla, le template contrle la prsentation 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 gnr dynamiquement par du contenu stock dans la base de donnes. La page que vous voyez est cr par le biais de diverses commandes PHP qui sont dans le template, ce qui prsente quelques difficults 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 mme 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 crer une page Web, cela dpend du concepteur. Ceux qui sont plus enclins aux graphisme font une ?image? de la page Web dans une application graphique comme Photoshop et ensuite dcoupe les images pour pouvoir les utiliser pour le Web (connu sous le nom de ?slice and dice?, morceler). Les concepteurs plus base 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 instantanment le rsultat 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 arrire-plan. Voir les modifications dans un navigateur Web. Retour l'tape 1.

Le minimum savoir Lors de la cration d'un template, vous devez disposer de Joomla sur un serveur ce qui vous permettre d'effectuer des changements et de rafrachir la page de sortie.

1.4

Options du serveur localhost

Prcdemment (chapitre 2), nous avons vu comment installer un serveur web qui fonctionne sur l'ordinateur. Nous avons crer 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 . dsormais facilement aller la page l'aide de style CSS et ne pas avoir passer par le cycle des tapes dcrites prcdemment. 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 intgr et est 100% open source. Cela signifie que toute personne est la bienvenue pour le tlcharger 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 utilises pour dcrire les pages Web de qualit sur l'Internet aujourd'hui. En ralit, il y a d'importante possibilit de ?liaison? entre l'ergonomie, l'accessibilit et le SEO. Une page web qui montre ces capacits grer 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 dfini par le World Wide Web Consortium (W3C) et les standards du Web. Par exemple, un site qui est structur smantiquement en XHTML (voir la diffrence entre XHTML et HTML) sera lue aisment par l'intermdiaire d'un lecteur spcifique aux malvoyants. Il sera galement lue aisment par un moteur de recherche (spider). Google est effectivement aveugle dans sa manire 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 "rgles" pour tous les navigateurs Web.La principale organisation soutenir ces normes est le World Wide Web Consortium (WC3), dont le directeur, Tim BernersLee, 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 conus 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'esprons) pousser les fabricants dvelopper 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 dveloppeurs de navigateur (comme Microsoft) ont tendance interprter le html / xhtml de manire lgrement diffrente que les standards. Cela a conduit avoir des conceptions web spcifiques pour supporter les anciens navigateurs, au dtriment des nouveaux.Il est souvent ?dcid? qu'il est important qu'une page Web apparaissent correctement en tenant compte de l'hritage de ces navigateurs. Le normes nonces par le WC3 pour coder une page web ont t dvelopps pour assurer une cohrence. 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 sre et concide avec les attentes des utilisateurs. Vous pouvez vrifier 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 rpond la validation du W3C utilise le (X) HTML qui spare le contenu de la prsentation 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 rponses. Mais la plupart conviennent qu'elle sont bases sur l'utilisation d'un code valide, que ce soit le HTML, XHTML ou autres.

1.6 Code smantiquement correctComme il a t mentionn plus tt, tre smantiquement correct signifie que le (X) HTML de la page W ne eb

dcrit que le contenu et non la prsentation. En particulier, cela signifie une organisation structure sous forme de balises (h1, h2, p, div, pre, a, etc) et utiliser uniquement les tableaux pour des donnes tabulaires, et non pour la mise en page.

1.7 Le CSS ou les feuilles de style en cascadeEtroitement li pour obtenir du code smantiquement correct, le Cascading Style Sheets (CSS) est de mise pour contrler l'apparence et la mise en page d'une page Web.Le CSS est un mcanisme simple pour ajouter du style (ce sont les polices, couleurs, espacement, etc) aux documents Web (source: http://www.w3.org/Style/CSS/). Il existe paralllement au code (X) HTML et vous permet ainsi de sparer totalement le contenu (code smantique) de la prsentation (CSS). Le meilleur exemple de cela est visible sur CSS Zen Garden, un site o la mme smantique XHTML est en forme de diffrentes faons et unique avec diffrents CSS. Le rsultat est la prsence de pages trs diffrente mais au contenu de base identique. Concevoir des sites Joomla actuellement prsente des dfis considrables pour rpondre la validation des normes. Dans la premire srie, 1.0.X, le code utilisait une importante proportion de tables. Ils n'utilisaient pas vraiment le CSS pour la prsentation, pas plus qu'il ne produisaient du code smantiquement correct. Ce problme s'est aggrav par le fait que trs peu de dveloppeurs tiers utilisaient le CSS, la plupart utilisaient des tableaux pour gnrer leur code. Heureusement, l'quipe de dveloppement 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 prcautions doivent encore tre prises lors de la cration 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-classs). Le minimum savoir La cration de templates valides devrait tre une intention, et non un objectif. L'ide 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. Cration d'un template viergePour 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 diffrents fichiers et dossiers qui composent un template Joomla. Ces fichiers doivent tre placs dans le rpertoire / templates / de Joomla. Donc, si nous avions deux templates installs, notre arborescence ressemblerait quelque chose comme ce qui suit: / Templates / Components (exemple) / Templates / Voodoo (exemple) Notez que les noms de rpertoire pour les templates doit tre le mme 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 rpertoire d'un template, il ya un certain nombre de dossiers cls:

/ Components / templateDetails.xml / Components / index.php Ces deux noms de fichier et l'emplacement doivent correspondre exactement parce que c'est la faon dont ils sont appels 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 mtadonnes au format XML appel par Joomla qui donne les fichiers ncessaires lors du chargement d'une page qui utilise ce template. Notez le majuscule "D." Il dtaille galement l'auteur, le droit d'auteur, ainsi que les fichiers constituant le template (y compris toutes les images utilises). La dernire utilisation de ce fichier est destin l'installation d'un gabarit partir de l'interface d'administration. Deuximement, nous avons le moteur du template, index.php: Index.php Ce fichier est le plus important. Il dcrit le site et explique au CMS Joomla o mettre les diffrents composants et modules. Il s'agit d'une combinaison de PHP et (X) HTML. Dans presque tous les templates, des fichiers additionnels sont utiliss. Il est classique (bien que non exige par le coeur), de les nommer et de les localiser, comme indiqu ci-aprs: / 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 / template_thumbnail.png Une capture d'cran du navigateur Web le template (en gnral rduit environ 140 pixels de large et 90 pixels de hauteur). Aprs le template a t install, cela fonctionne comme un "Aperu d'image" visible dans l'administration template Joomla Manager et aussi le slecteur de template dans le module frontal (si utilises).

/ Components / css / template.css Le CSS du template. L'emplacement du dossier est optionnelle, mais vous devez spcifier o elle se trouve dans le fichier index.php. Vous pouvez l'appeler ce que vous voulez. Gnralement, 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 ncessaires 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 indiques dans l'administration du Template. Un exemple de fichier XML est montr ici: TemplateTutorial15 August 2007 Barrie North GPL [email protected] www.compassdesigns.net 1.0 premier exemple de fichier XML index.php templateDetails.xml js/somejsfile.js images/threecol-l.gif images/threecol-r.gif css/customize.css css/layout.css css/template_css.css user1 top left banner right footer Expliquons ce que certaines de ces lignes veulent dire: . Le contenu du document XML, utile pour les instructions d'installation. L'option type = "template" spcifie que l'installateur est un template et que c'est pour Joomla 1.5. TemplateTutorial15. Dfinit le nom de votre template. Le nom que vous entrez ici sera galement utilis pour crer le rpertoire dans le rpertoire des templates. Par consquent, il ne devrait pas contenir de caractres que le systme de fichier ne peut pas manipuler, par exemple les espaces. Si l'installation est manuel, vous devez crer un rpertoire qui est identique au nom du template. August 2007.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. Barrie North. Le nom de l'auteur de ce template, trs probablement votre nom. GPL. Toute information de copyright passe par cet lment. Des explications lmentaire concernant la licence pour les dveloppeurs et les concepteurs peuvent tre trouves sur les forums Joomla. [email protected]. Adresse de courriel laquelle l'auteur de ce template peut tre contacter. www.compassdesigns.net. L'URL du site de l'auteur. 1.0. La version de ce template. .Divers fichiers utiliss dans le template. Les fichiers utiliss dans le template sont exposes avec la balise : index.php templateDetails.xml js/somejsfile.js images/threecol-l.gif images/threecol-r.gif css/customize.css css/layout.css css/template_css.css La section contient tous les fichiers gnriques comme les sources PHP pour le template ou la vignette de prvisualisation. Chaque fichier numres dans la prsente section est dlimite par . Y seront galement cits les fichiers utiliss par le template ; ci-dessus l'exemple d'un fichier JavaScript. Tous les fichiers image que le template utilise sont galement rpertoris dans la section . Encore une fois, chaque fichier joint est balis par . Les informations de chemin des fichiers sont relatifs la racine du template. Par exemple, si le template est dans le rpertoire appel 'YourTemplate', et que toutes les images sont dans un rpertoire "images" l'intrieur de "YourTemplate ', le chemin correct est : images/my_image.jpg. Enfin, toutes les feuilles de style sont numrs dans la section des fichiers. Encore une fois, le nom de fichier est ferm par , et ce chemin est relatif la racine du template. . La position des modules disponibles dans le template. .Elles dcrivent les paramtres qui peuvent tre transmis au template via les fonctions avances de l'admin comme le changement de couleur du template.

2.3

Index.php

Qui a t'il en ralit dans le fichier index.php? Il s'agit d'une combinaison de (X) HTML et de PHP qui dtermine tout ce qui concerne la structure et la prsentation des pages.

Tout d'abord, intressons-nous une partie critique de la ralisation 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:

La premire dclaration PHP fait en sorte que le fichier ne soit pas accessible directement pour des raisons de scurit. Le DOCTYPE d'une page Web est l'un des composants fondamentaux qui dtermine comment une page Web est affich par un navigateur, et plus prcisment, la faon dont ce navigateur interprte les CSS. Pour vous donner une meilleure comprhension, 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-mre, la premire fois quelle reoit un mail. Quoi qu'il en soit, vous pouvez utiliser plusieurs DOCTYPEs. Fondamentalement, le DOCTYPE indique au navigateur la manire d'interprter la page. Ici, les mots "strict" et "transitional" commencent flotter... (float: left et float: right habituellement). Essentiellement, depuis que le Web a commenc, les diffrents navigateurs ont eu diffrents degrs 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 considrer le XHTML comme une amlioration du HTML est mauvais. Si vous comprenez rellement cette dclaration, vous tes bien en avance et au-del de ce guide. V pouvez en lire ous plus hixie.ch/advocacy/xhtml. ?Strict? veut dire que le HTML (ou XHTML) sera interprte exactement comme le dicte les normes. Un DOCTYPE "transitional" signifie que l'criture de la page autorise quelques diffrences par rapport aux normes. Pour compliquer les choses, il existe des modes qu'on appelle "bizarreries". Si le DOCTYPE est faux, prim ou absent, le navigateur passe en mode ?quirks?. Il s'agit d'une tentative pour tre rtro-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 faons: Ils utilisent la dclaration DOCTYPE directement tire de la page Web du WC3, et le lien est relatif :

DTD/xhtml1-strict.dtd. Vous devez indiquer le chemin complet, comme spcifi prcdemment. Microsoft IE6 est valide mais passe en mode ?quirks?. Cela arrive lorsqu'il y a une dclaration xml avant le DOCTYPE. Ci-dessous, une dclaration XML (aprs le DOCTYPE): Une bonne partie de ces informations sont cres la vole et sont spcifiques 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 dernires lignes de l'en-tte fournissent des liens vers des fichiers CSS pour le template: Powered by Joomla!. Valid XHTML and CSS. 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 rduire la quantit de code CSS en utilisant des "raccourcis". Un exemple pour padding avec une marge applique un lment, d'o: Margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; Peut tre remplace par: Margin: 5px 10px; Il existe des ?raccourci? pour chaque dfinition de style. Une fois que vous avez dtermin 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, plutt 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 proprits 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 ordonnes. Pour cela, nous devons utiliser une structure plus volue connue sous le nom de nested float ([boites] flottantes imbriques). Une structure dont le contenu est hirarchise permet d' obtenir de meilleurs rsultats 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 dfaut Jusqu' prsent, 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 entire, puis nous ferrons gauche dans les colonnes. En commmoration 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 lments. Il va ignorer le!important et avoir 960px de largeur. NOTE Il peut paratre trange de dfinir la largeur de nos colonnes en pourcentage et ensuite paramtrer le conteneur global en fixe. Eh bien, un certain nombre de choses se jouent ici: Avoir l'intrieur d'un conteneur fixe des colonnes fluides rend le template trs 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 rduiront la largeur. Au dbut 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 zro, ensuite tous les lments de type bloc reoivent une marge par dfaut. Cela contribue assurer la cohrence des navigateurs. V pouvez en savoir plus sur le global ous 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 cohrente sur tous les navigateurs. Toutes les tailles de police sont alors cals 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 prfrences. Cette question est examine plus avant dans "Une exprience de la typographie" sur The Noodle Incident (Owen Briggs) Si nous devions ajouter des couleurs l'arrire-plan, l'en-tte, aux marges et au contenu des conteneurs, nous verrions quelque chose comme le montre la Figure 9,5. Notez que les colonnes latrales 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 problme. Nous allons utiliser cette approche et nous aurons des boites autour des modules. Si nous voulons que les colonnes soient colores sur toute leur hauteur, nous devons utiliser une image de fond qui s'talera verticalement. Cette technique est appele Fausses Colonnes et est dcrite par Douglas Bowman et Eric Meyer.

3.1

Les CSS spcifiques Joomla

Bien que Joomla 1.5 donne la possibilit de compltement dfinir la structure partir du template, il existe des valeurs par dfaut qui sont significatifs dans la production de contenu et en particulier des tables. Paralllement ces tableaux, il y a des structures CSS prdfinies disponibles pour les designers pour agrmenter le style des pages. Base 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 gnriques, comme H1, H2, p, ul, a, form, et ainsi de suite. Tableau 9,2 : Styles CSS par dfaut de la version 1,0 1.5 article_separator adminform article_separator author bannerfooter bannergroup bannerheader banneritem blog blog_more blogsection breadcrumbs button buttonheading clr componentheading content_email content_rating content_vote contentdescription contentheading contentpagetitle contentpane contentpaneopen contenttoc createdate created-date date input inputbox intro latestnews loclink mainlevel message metadata modifydate module moduletable mosimage mosimage_caption mostread newsfeed outline pagenav pagenav_next pagenav_prev pagenavbar pagenavcounter pathway pollstableborder read search searchintro sections sectiontable_footer sectiontableentry sectiontablefooter sectiontableheader small smalldark sublevel title wrapper

Beaucoup de styles que vous pourriez voir dans ce tableau ont en ralit des styles CSS encore plus spcifiques. Fondamentalement, une rgle spcifique l'emporte sur une moindre rgle d'ordre gnral.

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 rgle est plus spcifique (comme .contentheading est contenue dans un ) Dans le cas des templates Joomla, vous allez souvent voir des rgles plus spcifiques que d'autres. Cela se produit souvent lorsque la classe est applique une table. Voici d'autres exemples: .moduletable table.moduletable .moduletable est le nom d'une 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 active. 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'intrieur de cette classe. Les spcificits ne sont pas facile comprendre; c'est souvent plus facile de commencer en utilisant le style le plus gnral possible et puis, de plus en plus prcis lorsque les rsultats ne sont pas ceux que vous attendez. V oici quelques liens vers des sites qui traitent de la spcificit dans le dtail: 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 rduire le nombre de tableaux, quand nous appelerons les modules, nous paramtrerons les styles dans le jdoc: include. Le minimum savoir Joomla va produire des lments spcifiques, des identifiants et des classes dans le code de la page Web. Ceux-ci peuvent tre prvus et utiliss 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 faon dont il est affiche.

La syntaxe est: Le style est facultative et est dfini dans templates/system/html/modules.php. Actuellement, par dfaut le fichier modules.php contient les valeurs suivantes : OPTION=table (affichage par dfaut) modules affichs dans une colonne. Ce qui suit montre un exemple de ce qui est produit: OPTION=xhtml fait apparaitre le module comme un simple lment div. Le code suivant montre un exemple: Notez que nous ne pouvons pas mettre ce style sur parce que ce n'est pas un module. Le minimum savoir Dans la version 1.5, la production des modules peut tre entirement personnalise, ou vous pouvez utiliser la sortie pr-construit. Toutes ces options sont appeles module de chrome. Nous avons galement plac le titre du site l'intrieur d'une balise . C'est smantiquement 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 prsente 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 dfaut du menu ont un suffixe dans le module de proprits _menu. Pour obtenir que tout fonctionne correctement, j'ai supprim ce paramtre. Cette gestion CSS de la typographie produit maintenant le rsultat illustr la figure 9,6.

Figure 9,6 : template de base avec les modules titre styls

3.3

les menus dans les Templates

Nous avons vu prcdemment (chapitre 5), "Cration de menus et de navigation," qu'il existe un certain nombre de paramtres de la faon dont un menu sera rendue. L encore, en utilisant des listes gres par du CSS plutt que des tableaux nous obtenons un code allg et plus facile baliser. Aprs 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 rglage list est nouveau dans la version 1.5; flat list est issu de la version 1.0 et deviendra obsolte. Les listes sont galement prfrables aux tables parce que les navigateurs, les lecteurs d'cran et les robots de recherche seront en mesure d'accder 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 dvelopps en CSS. Jetons un oeil l'un d'eux et voyons comment ils sont utiliss. Le site Web http://css.maxdesign.com.au/listamatic/ une slection de plus de 30 menus, tous utilisent le mme code.Il y a de lgres diffrences dans le code que nous devons modifier afin de l'adapter nos menus Joomla. Ces listes utilisent le code suivant:

  • Item one

Item two Item three Item four Item five Cela signifie qu'il existe une englobante appele navcontainer, et une liste

  • avec une id navlist. Pour reproduire cet effet dans Joomla, nous avons besoin d'avoir une sorte de cadre constitu de . Nous pouvons y parvenir en utilisant les suffixes de module. Si vous vous souvenez, le rsultat d'un module avec pour option le style XHTML est: modChrome_xhtml modChrome_xhtml Si l'on ajoute un suffixe au module, qui s'ajoutera la classe moduletable, comme ceci: modChrome_xhtml modChrome_xhtml 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 sparation entre la conception du site et l'administration du site. L'un des objectifs de dveloppement du noyau Joomla est de sparer clairement ces rles. Ceci implique qu'il est probable que cela deviennent obsolte dans les version ultrieur de Joomla 1.5 Cette utilisation d'un suffixe de classe est utile. Cela permet d'attribuer diffrents design d'un simple changement de suffixe. Le minimum savoir Il est prfrable de toujours utiliser les liste puces ou ordonnes pour crer 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 rsultat est montr dans la Figure 9,7. Pour tout menu, nous voulons tre de style de cette faon, il nous faut ajouter "menu" comme module suffixe.Figure 9,7 : Modle de base avec le style de menuTUYAU Lorsque vous essayez d'obtenir un menu particulier pour travailler, voici un bon conseil: Crer une installation par dfaut 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 rgles CSS jusqu' ce que l'effet que vous voulez est atteint. Le code pour le menu afin de crer le style est comme suit: Untitled Document Main Menu
    • Home
  • Joomla! Overview

Whats New in 1.5?

News Feeds

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 trs raliste. Dans un site statique le contenu ne change jamais, mais nous voulons donner aux administrateurs la possibilit de mettre jour leur contenu sans s'inquiter du design. Nous voulons qu'automatiquement une colonne disparaisse s'il n'y a aucun contenu dedans. Pendant le dveloppement du noyau de Joomla 1.5, il y a eu de nombreux changements et amliorations directement tirer du blog de dveloppement.. Nous pouvons sparer ces changement en deux catgories. D'abord, il y a des changements dans la manire dont les choses tait faire dans la version 1.0 - par-exemple la nouvelle manire dont les modules sont chargs, deuximement il y a de nombreuses fonctions supplmentaires, comme les paramtres 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 : do something do something else

Il y a 4 conditions possibles. Pour exemple, comptons le nombre de modules de la figure 9.7. Nous pourrions intgrer ce code n'importe o dans index.php left=
left and right=
Using CSS to Create a Tableless Layout 276 Chapter 9 Creating a Pure CSS Template left or right=
left + right= Making a Real Joomla 1.5 Template 286 Chapter 9 Creating a Pure CSS Template Remarquez, nous avons galement utilis un commentaire conditionnel de sorte que si l'emplacement du module suprieur n'a pas de contenu, l'image teaser orange ne sera pas l. CE qui sera l cest un conteneur vide qui contiendra un peu de l'image de fond et 20px de padding vertical au pire. Il s'agit l dun choix purement esthtique. Le CSS a besoin d'utiliser les spcificits CSS pour remplacer les styles moduletable dfinie prcdemment: #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 dfinir en tant que tel de manire 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 crerons en utilisant une image de fond de la maquette. Il s'agit d'une petite image qui est strie 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 arrire-plan simple en r-utilisant l'image du teaser. Rutiliser 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 redfinition 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 dcoupons une image unique qui comprend la fois la puce et le soulignement. Le style est activ par lajout dun 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, longlet du menu en haut droite. En tant quavocat de l'accessibilit, nous voulons le paramtrer de manire ce que la police soit redimensionnable. Heureusement, une technique a t dveloppe pour cela, c'est en fait le mme 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 ct gauche et droit de nos "portes", aussi bien pour les tats actifs quinactifs.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 ltat "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 icnes sur ces onglets. Comme nous utilisons dj deux images de fond, une sur le

et l'autre sur le lien, nous aurions besoin d'un troisime lment sur lequel nous placerons licne darrire-plan. V pouvez le faire avec un , mais ous ceci est du CSS trs avanc. Je vais vous laisser a comme un devoir de vacance. La dernire chose qui reste faire est de revoir le fichier templateDetails.xml. Il doit contenir tous les fichiers et images utiliss dans le modle afin dinstaller 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 rdaction 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 Crer un template Joomla est plus une question de conception graphique et de manipulation CSS que davoir une connaissance spciale de Joomla.

4.7

CSS Template Tutorial tape 3

Nous avons maintenant un modle bas sur une maquette (ou design). Quelques rgles simplesde typographie ont t ajoutes, 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 modle qui est installable et disponible sur www.joomlabook.com: CSSTemplateTutorialStep3.zip. Maintenant que nous avons fait les bases, commenons d'abord plonger dans quelques-unes des fonctionnalits avances possibles avec le template 1.5.

5. Advanced Templating FeaturesJoomla 1.5 offre un certain nombre de fonctionnalits avances qui augmentent de manire significative ce qui est possible de faire avec des templates. Nous avons dj vu un exemple dans ce chapitre, la possibilit de crer un Chrome personnalis ou des sorties (?) pour les modules. Examinons chacun deux tour tour:

Paramtres de template Templates de remplacement

5.1

Les Paramtres de template

Nouveau dans joomla 1.5, l'ajout de paramtres de template. Cela vous permet de passer des variables au template partir des options slectionnes dans ladministration. Nous pouvons ajouter une fonction assez simplement notre modle. Dans le fichier templateDetails.xml, ajoutez le code suivant: Fluid with maximum and minimum Medium Small 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 rglages que vous avez. Un fichier INI pour l'exemple prcdent pourrait ressembler ceci: template_width=2 V devez vous assurer que ce fichier est accessible en criture donc des modifications doivent tre apportes. ous Nous avons aussi besoin d'ajouter ce fichier dans le fichier templateDetails.xml. Dans le gestionnaire des templates pour ce modle, vous voyez les rglages possibles pour ce paramtre, comme le montre la Figure 9.11.

FIGURE 9.11 paramtres de template dans ladministration

Nous pouvons voir qu'il s'agit de simples boutons radios avec trois options. 800x600 1024x756 fluid (min/max with FF and IE7, 80% with IE6) Ensuite, nous changeons la balise dans notre index.php par la suivante: