SlideShare une entreprise Scribd logo
Copyright : Philippe STEINER
   Licence : GNU / GPL
  http://joomla.buldozer.fr
Table des matières


I Introduction........................................................................................................................................3

    Logiciels nécessaires :.....................................................................................................................3

    Petit rappel.......................................................................................................................................3

    Les fichiers nécessaires au template................................................................................................4


II Créer le template provisoire..............................................................................................................5

    Création du répertoire et des fichiers...............................................................................................5

    Renseigner le fichier templateDetails.xml.......................................................................................6

    Compresser le dossier......................................................................................................................8


III Installer notre template....................................................................................................................9


IV Création du template « mon_template »........................................................................................10

    Modification du fichier index.php.................................................................................................11

    Modification du fichier template.css.............................................................................................14
Tutoriel de création de Template pour joomla 2.5.x



I Introduction
Dans ce tutoriel, je vais vous expliquer comment créer votre premier template joomla.
Avant de commencer, il faut savoir que le template c'est le gabarit du site, la structure. Il détermine
l’apparence visuelle du site.
C'est le template qui va déterminer la couleur du site, la taille du texte et des titres, l'affichage des
pages, les positions des modules, les couleurs du texte...
En modifiant le template, on change l'aspect du site.
Avec joomla 2.5.x, on peut attribuer un template spécifique pour une catégorie ou pour un article
uniquement.
Le template est constitué au minimum d'un fichier php et d'un fichier au format xml. On peut aussi
rajouter une feuille de style au format css, ainsi que des images.
Dans ce tutoriel, je vais vous expliquer comment concevoir un template (vous pouvez voir l'aperçu
du template sur le site demo.buldozer.fr.



Logiciels nécessaires :
On n'a pas besoin de logiciels spécifiques
On aura besoin d'un éditeur. Le bloc-notes de Windows suffit.
Pour un meilleur affiche du code, je vous conseille d'utiliser 2 logiciels, qui sont gratuits et en
français. Ils ne sont pas indispensables, mais plutôt conseillés.
Pour rentrer le code, il faudra un éditeur. Le bloc-notes de Windows fait l'affaire, mais il n'affiche
pas le code php en couleurs.
Notepad++ affiche le code en couleur et il est mieux optimisé que le bloc-notes pour l'affichage du
code php. Il est gratuit et en français : http://notepad-plus-plus.org/fr/download
On aura besoin aussi d'un logiciel de compression de fichier zip. N'importe quel logiciel fera
l'affaire. Si vous n'avez pas de logiciel, je vous conseille izarc. Il est gratuit et en français :
http://www.clubic.com/telecharger-fiche11017-izarc.html



Petit rappel
Sous Joomla 1.5 on pouvait mettre directement le template dans le dossier templates et il était
automatiquement reconnu par joomla.
Sous Joomla 1.6, 1.7 et 2.5.x, cela ne fonctionne plus. On est maintenant obligé d'installer le
template comme une extension.
Le template devra être au format zip
Avant de créer le template, on va d'abord créer un dossier, avec des fichiers vides. Ce répertoire va
nous permettre de créer le fichier zip du template


http://joomla.buldozer.fr                                                                          1 / 19
Tutoriel de création de Template pour joomla 2.5.x


Les fichiers nécessaires au template
Comme il a été dit, 2 fichiers sont indispensables pour un template, les fichiers index.php et
templateDetails.xml. Avec juste ces 2 fichiers, un template est opérationnel.
Mais vous allez voir que l'on va utiliser d'autres fichiers optionnels, pour améliorer le graphisme et
l'organisation du template. Voici une vue type d'un template, une fois que l'on aura rentré tous les
fichiers :




css : contient le fichier css du template (que l'on va appeler template.css). C'est dans ce fichier que
l'on mettra tous les styles, couleurs...
images : contient toutes les images du templates.
Racine :
index.html : c'est un fichier pour éviter qu'une personne vienne fouiner dans le répertoire. Le
fichier est vide. Vous pouvez y insérer le code que vous voulez.
index.php : c'est ce fichier qui contient toutes les positions du template


http://joomla.buldozer.fr                                                                        2 / 19
Tutoriel de création de Template pour joomla 2.5.x

templateDetails.xml : c'est le fichier qui sert à l'installation du template et qui va indiquer les
positions disponibles dans la partie des modules
template_thumbnail.png : c'est une copie-écran du template
template_preview.png : c'est une copie écran plus grande. Elle est affichée pour avoir un aperçu du
template.




II Créer le template provisoire

Création du répertoire et des fichiers
Comme il a été expliqué plus haut, pour utiliser un template, on doit d'abord l'installer. On va crée
un template vide pour l'installer dans joomla, ainsi on pourra faire les modifications et les visualiser.
Le template vide pourra être utilisé par la suite, pour la création de vos templates.
Je vous conseille d'installer le serveur wamp (ou celui que vous voulez) sur votre PC, d'installer un
site vide pour faire les exemples. Sur ce site, créer un petit texte bidon, c'est juste pour faire un
essai.
Si vous ne voulez pas le créer, vous pouvez le télécharger à l'adresse suivante:
http://joomla.buldozer.fr/98


Pour la création de ce template que l'on va appeler vide, vous créer un dossier sur votre disque dur,
où vous voulez. A mon avis, le plus simple est de le créer dans le répertoire templates de votre site.
1. il faut créer un dossier, avec le nom que vous voulez. Pour notre exemple on va utiliser :
template_vide (ne pas mettre d'espace)
       ne pas utiliser le nom de votre template, sinon quand vous voudrez l'installer, vous aurez un
       message vous indiquant qu'il y a déjà un répertoire avec le même nom.
                                2. Dans dans le dossier, vous aller créer les dossiers : images, css.
                                Dans chacun des dossiers, vous allez créer un fichier index.htm : ce
                                fichier restera vide ou vous pourrez y mettre le code que vous
                                voudrez. Il sert juste à empêcher de consulter le contenu du répertoire.
                                3. à la racine de template_vide, il faut créer les fichiers : index.html,
                                index.php, templateDetails.xml


                                Vous devriez avoir une arborescence comme celle qui se trouve ci-
                                contre.




http://joomla.buldozer.fr                                                                          3 / 19
Tutoriel de création de Template pour joomla 2.5.x

Maintentant, nous allons renseigner le fichier templateDetails.xml, sans quoi, on ne pourra pas
installer le template

Renseigner le fichier templateDetails.xml
C'est ce fichier qui va indiquer à joomla que c'est un template. Il comporte le nom du template, ainsi
que les positions que l'ont peut choisir lorsqu’on veut affecter une position à un module.
Pour ceux qui ne veulent pas saisir le texte, vous pouvez télécharger le template_vide ici:
http://joomla.buldozer.fr/98
Pour les autres, ouvrez le fichier templateDetails.xml avec votre éditeur (notepad+ est conseillé)
Il faut taper les lignes suivantes :




<?xml version="1.0" encoding="utf-8"?> : Indique que c'est un fichier xml avec un encodage utf-8
<extension version="2.5" type="template" client="site"> : indique à joomla que c'est un template
<name>mon_template</name> : indique le nom du template. Ne pas mettre d'espace. Lors de la
l'installation du template, le dossier sera crée avec le nom du template. On appellera le template
« mon_template ». Vous pouvez laisser ce nom ou mettre le vôtre, sans espace.
<creationDate>avril 2012</creationDate>
       <author>Philippe</author>
       <authorEmail>webmaster@buldozer.fr</authorEmail>
       <authorUrl>http://joomla.buldozer.fr</authorUrl>
       <copyright>Copyright (C) joomla.buldozer.fr</copyright>
       <license>GNU General Public License version 2 ou supérieure</license>

http://joomla.buldozer.fr                                                                       4 / 19
Tutoriel de création de Template pour joomla 2.5.x

       <version>1.0</version>
       <description>Template joomla 2.5</description>
Ce sont des options, c'est informations s'affichent dans joomla, dans la partie gestion des templates.
Indique la date de création, nom de l'auteur, adresse courriel, site, copyright, licence, la version, la
description.
Voici ce que cela donne dans joomla :




       <files>
               <folder>css</folder>
               <folder>images</folder>
               <filename>index.php</filename>
               <filename>index.html</filename>
               <filename>templateDetails.xml</filename>
       </files>
Ce sont les fichiers qui composent le template. S'il en manque un ou si le nom n'est pas exact, vous
aurez un message d'erreur à l'installation du template.
       <positions>
               <position>gauche</position>
               <position>droite</position>
       </positions>
Ce sont les positions qui seront affichées dans le menu déroulant, lors du choix d'une position dans
le module




Si vous ne rentrez pas la position, vous devrez la saisir en manuel pour l'utiliser.
Sur la page suivante, je vous ai mis le code du fichier. Vous pouvez le sélectionner et faire un
copier-coller dans votre éditeur, cela vous évitera de la saisir manuellement.




http://joomla.buldozer.fr                                                                         5 / 19
Tutoriel de création de Template pour joomla 2.5.x

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
       <name>mon_template</name>
       <creationDate>avril 2012</creationDate>
       <author>Philippe</author>
       <authorEmail>webmaster@buldozer.fr</authorEmail>
       <authorUrl>http://joomla.buldozer.fr</authorUrl>
       <copyright>Copyright (C) joomla.buldozer.fr</copyright>
       <license>GNU General Public License version 2 ou supérieure</license>
       <version>1.0</version>
       <description>Template joomla 2.5</description>
       <files>
               <folder>css</folder>
               <folder>images</folder>
               <filename>index.php</filename>
               <filename>index.html</filename>
               <filename>templateDetails.xml</filename>
       </files>
       <positions>
               <position>gauche</position>
               <position>droite</position>
       </positions>
</extension>


Maintenant que le fichier templateDetails.xml est enregistré, on va créer notre fichier compressé.

Compresser le dossier
Maintenant, vous revenez à la racine de votre dossier. Vous devriez avoir le dossier template_vide
sur l'écran.




Faites un clic avec le bouton droit sur le dossier template_vide -> choisisser izarc -> Ajouter
template_vide.zip
ou alors compresser le dossier comme vous faites d'habitude, si vous utilisez un autre logiciel.
Si vous n'y arrivez pas, vous pouvez télécharger le fichier ici : http://joomla.buldozer.fr/98


http://joomla.buldozer.fr                                                                          6 / 19
Tutoriel de création de Template pour joomla 2.5.x


III Installer notre template
Pour installer le template, il faut aller dans la partie administration du site :
Extensions → Gestion des extensions




Il faut aller chercher le fichier template_vide.zip




Cliqué sur Envoyer & Installer.
Le template est installé. Pour le vérifier, cliquer sur : Extensions ->Gestion des templates




Le template mon_template doit être affiché. Cliquer sur l'étoile blanche qui se trouve sur la ligne du
template




L'étoile devient jaune. Le template est maintenant le template par défaut.




http://joomla.buldozer.fr                                                                       7 / 19
Tutoriel de création de Template pour joomla 2.5.x




Si vous cliquer sur l'icône voir le site (en haut à droite de l'écran) vous allez faire apparaitre le site.
La page devrait être blanche avec rien d'afficher, c'est normal, vu que l'on n’a rien rempli dans le
fichier index.php.
Nous allons maintenant modifier le fichier index.php



IV Création du template « mon_template »

Avant de se lancer dans la création du template, on va quand même en préciser les grandes lignes du
template.
On va concevoir un template avec :
    ➔ une partie haute, pour y insérer le logo
    ➔ une colonne à gauche
    ➔ une partie centrale pour le texte
    ➔ une colonne à droite
    ➔ une partie pied de page
    ➔ les colonnes s'adapteront à la taille du navigateur
    ➔ On aura un espace sur les coins du navigateur, pour ne pas coller les colonnes au bord de
      l'écran
Le template aura cette structure :




http://joomla.buldozer.fr                                                                             8 / 19
Tutoriel de création de Template pour joomla 2.5.x




Modification du fichier index.php
Aller dans le répertoire templates de votre site, ouvrez le dossier mon_template
Ouvrez le fichier index.php avec votre éditeur

Il n'y a que 22 lignes à taper




http://joomla.buldozer.fr                                                          9 / 19
Tutoriel de création de Template pour joomla 2.5.x

A la fin de la description, je vous ai collé l'ensemble des lignes pour vous éviter de les taper. Il suffit
de faire un copier – coller
<?php defined('_JEXEC') or die;?>
C'est une ligne de commande pour sécuriser le système. Il vérifie que les données proviennent de
joomla.
<!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; ?>" >
Ce sont 2 lignes standard. Elles ne sont pas propres à joomla.
<head> : On ouvre la commande head, l'entête du fichier html.
<jdoc:include type="head" /> : On dit à joomla d'ouvrir les balises
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?
>/css/template.css" type="text/css" />
 On dit à joomla d'ouvrir les 3 fichiers templates. Les 2 premiers sont les fichiers standard de
joomla. Le 3e c'est notre fichier. Au lieu d'utiliser le nom du site et le nom du templates on utilise
cette commande
$this->baseurl : utilise l'adresse du site
$this->template : utilise le nom du template.
</head> : On ferme la commande head
<body> : On ouvre body, la partie central de la page
On va utiliser des id pour identifier les différents blocs : <div id= ''nom du bloc''>. Vous pouvez
changer les noms comme vous voulez. Il faut juste que le nom dans le fichier.php corresponde au
nom qui se trouve dans template.css. J'essaie d'utiliser des noms significatifs, qui sont parlants.
<div id="cadre_exterieur"> : on indique d'ouvrir le bloc cadre_exterieur. C'est le cadre qui permet
de centrer toutes les colonnes et de ne pas coller les colonnes au bord de l'écran. Les informations
seront rentrées dans le fichier template.css.
<div id="logo"></div> : on indique d'ouvrir le bloc logo et de le refermer juste après. Joomla
affichera le logo du site
<div id="logo"></div> : on indique d'ouvrir le bloc logo et de le refermer juste après. Joomla
affichera le logo du site
<div id="cadre_gauche"><jdoc:include type="modules" name="gauche" style="xhtml" /></div> :
On va détailler la ligne :
<div id="cadre_gauche"> : on indique que l'on veut utiliser le style (couleur, fond, retrait...)
cadre_gauche pour le bloc qui arrive


http://joomla.buldozer.fr                                                                          10 / 19
Tutoriel de création de Template pour joomla 2.5.x

<jdoc:include type="modules" name="gauche" style="xhtml" /> : jdoc:include est la ligne de
commande qui indique à joomla d'afficher un module à cet endroit. La position de ce module aura
le nom de gauche. On utilisera le style xtml.
</div> : ferme le bloc
<div id="cadre_texte"><jdoc:include type="component" style="xhtml" /></div> :
Cette ligne indique que l'on va afficher le texte (component) dans le bloc que l'on appel cadre_texte

<div id="cadre_droite"><jdoc:include type="modules" name="droite" style="xhtml" /></div> :
C'est la même ligne que pour la colonne gauche, sauf que l'on met les paramètres pour la droite.

      Il faut retenir ceci:
<jdoc:include type="modules" name="nom de la position" style="xhtml" /> : indique le nom d'un
module
<jdoc:include type="component" style="xhtml" /> : Affiche le texte
Ce sont ces 2 commandes qu'il faut connaître. Ces 2 lignes sont spécifiques à joomla. C'est cela qui
permet d'afficher le texte et les modules

<div class="clr"></div> : c'est une commande que l'on utilise pour réinitialiser les positions
<div id="footer"><jdoc:include type="modules" name="pied_de_page" style="xhtml" /></div> :
comme avant. On indique à joomla d'afficher un module qui à la position pied_de_page en utilisant
le style footer.

</div> : ferme le bloc cadre_exterieur
</body> : ferme body, le corps du fichier.

Vous pouvez enregistrer, le format index.php est finis.

Voici le code :




http://joomla.buldozer.fr                                                                      11 / 19
Tutoriel de création de Template pour joomla 2.5.x

<?php defined('_JEXEC') or die;?>
<!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="<?php echo $this->baseurl ?>/templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="cadre_exterieur">
<div id="logo"></div>
<div id="cadre_gauche"><jdoc:include type="modules" name="gauche" style="xhtml" /></div>
<div id="cadre_texte"><jdoc:include type="component" style="xhtml" /></div>
<div id="cadre_droite"><jdoc:include type="modules" name="droite" style="xhtml" /></div>
<div class="clr"></div>
<div id="footer"><jdoc:include type="modules" name="pied_de_page" style="xhtml" /></div>
</div>
</body>


Modification du fichier template.css
Nous allons maintenant voir ce que cela donne sur notre site. Aller voir sur votre site et voici ce que
cela donne:


                                  Cela ne correspond pas à ce que je veux. Tout est mis l'un en
                                  dessous de l'autre.
                                  C'est normal, car on a pas encore rentré les données de style.
                                  On va le faire maintenant.
                                  Vous aller dans le répertoire de votre template/ « mon_template »
                                  vous ouvrez le dossier : css
                                  vous ouvrez le fichier template.css avec votre éditeur.
                                  C'est du code css.
                                  Toutes les lignes de codes du fichier seront mises à la fin des
                                  descriptions.




http://joomla.buldozer.fr                                                                          12 / 19
Tutoriel de création de Template pour joomla 2.5.x

On va maintenant rentrer nos premières lignes :
/* General */
html {margin:0;padding:0}
body {background:#EBEBEB;font-family: Arial,sans-serif;font-size:12px;width:100%}
img {border:none}
.clr {clear:both}
/* General */ : c'est un commentaire. Dans la partie générale, je mets des informations générales.
Tous les commentaires sont à rentrés comme ceci : /* commentaire */
html {margin:0;padding:0} : on indique que les marges et les retraits sont à 0
body {background:#EBEBEB;font-family: Arial,sans-serif;font-size:12px;width:100%} :
on va utiliser un fond gris ( EBEBEB), la police arial ou sans empattement si la police arial n'est pas
installée sur le poste, les caractères seront de la taille 12 pouces, on utilisera toute la largeur du
navigateur
img {border:none} : on indique que l'on ne veut pas de cadre autour des images
.clr {clear:both} : commande pour réinitialiser les positions
Maintenant on va s'attaquer aux id :
/* Id */
#cadre_exterieur{background:#FFF;width:90%;min-width:800px;margin:40px
auto;padding:10px;border:5px outset #808080}
#logo{width:100%;height:97px;margin:0 auto;background:url(../images/logo.png) center no-
repeat}
#cadre_gauche, #cadre_droite{width:20%;float:left}
#cadre_texte{width:60%;float:left}
#pied_de_page {margin:10px 0;text-align:center}


#cadre_exterieur{background:#FFF;width:90%;min-width:800px;margin:40px
auto;padding:10px;border:5px outset #808080} :
on crée un cadre, dans lequel les autres blocs seront imbriqués. Il a un fond blanc (&FFF), il a une
taille de 90% de la taille du navigateur, avec une dimension minimum de 800 pixels. En hauteur et
bas de page, il a une marge de 40 pixels et sur les côtés, c'est calculer automatiquement. A l'intérieur
du cadre, il y a un retrait de 10 pixels sur chaque côté. Le cadre est en relief.
#logo{width:100%;height:97px;margin:0 auto;background:url(../images/logo.png) center no-
repeat} : C'est le logo. Mon image à une hauteur de 97 pixels. Il faudra indiquer la hauteur de votre
logo
#cadre_gauche, #cadre_droite{width:20%;float:left} :C'est le style que l'on a indiqué pour le
module gauche (dans le fichier index.php). On indique que le bloc aura une largeur de 20% de la
taille de cadre_exterieur. On indique qu'il est positionné sur la gauche de la page. Si on n’indique
pas cette position, les 3 blocs (gauche, droite et texte) seront affichés l'un en dessous de l'autre.
Comme le cadre_gauche et le cadre_droit ont les mêmes infos, on les rentre sur la même ligne, pour
éviter de retaper les informations.
#cadre_texte{width:60%;float:left} : C'est le cadre du texte. Il occupera 60 % de la taille de

http://joomla.buldozer.fr                                                                       13 / 19
Tutoriel de création de Template pour joomla 2.5.x

cadre_exterieur, logique vu que les 2 autres colonnes font 20 + 20 = 40% de la taille.
#pied_de_page {margin:10px 0;text-align:center} : on met une marge de 10 pixels au dessus et en
dessous du bloc et on centre le texte.
Si on enregistre notre fichier et on regarde le site, voici ce que cela doit donner :




Mes modules ne sont pas affichés. Normal, vous n'avez pas indiquer les positions dans joomla. Il
faut aller dans le module administration de joomla → gestion des modules :




Pour notre menu, on voit qu'il est affiché à une position x


Cliquer sur Menu principal :




Cliquer sur Sélectionner la position :




Il nous affiche nos 2 positions que nous avions rentrées dans le fichier templateDetails.xml. Cliquer
sur gauche

http://joomla.buldozer.fr                                                                     14 / 19
Tutoriel de création de Template pour joomla 2.5.x

Faites la même chose pour le module connexion, mais choisissez droite.
Après, allez de nouveau consulter votre site, il devrait ressembler à cela :




C'est ce que l'on avait prévu. Si vous supprimer la class clr, voici ce que l'on obtient :




Le cadre entoure le logo, ce que l'on ne veut pas.
Le template est fini. Après, il faut créer les styles pour chaque élément (les liens, le menu...). Cela
fait l'objet d'un autre tutoriel, que vous pourrez consulter sur le site http://joomla.buldozer.fr.
Avant de finir complètement, on se dit : j'aurais pu rajouter le module recherche et le fil ariane.
Allez on va le faire, mais avant, vous avez une petite idée pour arriver à cela :




La ligne du fil ariane et le module recherche sont sur la même ligne et on a rajouté l'image au
module recherche.
Voici la solution :
Dans le fichier index.php, il faut rajouter les 3 lignes après <div id="logo"></div> :


http://joomla.buldozer.fr                                                                      15 / 19
Tutoriel de création de Template pour joomla 2.5.x

<div id="chemin"><jdoc:include type="modules" name="chemin" style="xhtml" /></div>
<div id="recherche"><jdoc:include type="modules" name="recherche" style="xhtml" /></div>
<div class="clr"></div>
Les 2 premières lignes sont semblables aux autres lignes pour afficher les modules. Comme les 2
lignes n'ont pas la même hauteur, la classe clr évite d'avoir un effet d'escalier sur les lignes suivantes
Exemple :
sans la classe clr, on obtient cela :




Avec la classe clr, on obtient cela :




Dans le fichier template.css, il faut rajouter les 2 lignes suivantes, en dessous de #cadre_texte :
#chemin {margin-top:5px;padding-top:0;width:70%;float:left;font-size:14px}
#recherche {width:30%;margin:0;padding:0;float:right;text-align:right}
Pour chemin, on indique qu'il a une largeur de 60 % et recherche de 30 %. On reste sur une largeur
de 90 % car




On constate que l'image de la loupe est trop haute. On va modifié cela en rajoutant cette ligne :


http://joomla.buldozer.fr                                                                         16 / 19
Tutoriel de création de Template pour joomla 2.5.x

div.search input.button {margin-bottom:-10px} : fait remonter le cadre recherche de 10 pixels




Vous trouverez ci-dessous le code du fichier template.css :
/* General */
html {height:101%;margin:0;padding:0}
body {background:#EBEBEB;font-family: Arial,sans-serif;font-size:12px;width:100%}
img1 {border:none}
.clr {clear:both}

/* Id */
#cadre_exterieur{background:#FFF;width:90%;min-width:800px;margin:40px
auto;padding:10px;border:5px outset #808080}
#logo{width:100%;height:97px;margin:0 auto;background:url(../images/logo.png) center no-
repeat}
#cadre_gauche, #cadre_droite{width:20%;float:left}
#cadre_texte{width:60%;float:left}
#chemin {margin-top:5px;padding-top:0;width:70%;float:left;font-size:14px}
#recherche {width:30%;margin:0;padding:0;float:right;text-align:right}
#pied_de_page {margin:10px 0;text-align:center}

div.search input.button {margin-bottom:-10px}




http://joomla.buldozer.fr                                                                   17 / 19
Tutoriel de création de Template pour joomla 2.5.x

Vous trouverez ci-dessous le code du fichier index.php :
<?php defined('_JEXEC') or die;?>
<!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="<?php echo $this->baseurl ?>/templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="cadre_exterieur">
<div id="logo"></div>
<div id="chemin"><jdoc:include type="modules" name="chemin" style="xhtml" /></div>
<div id="recherche"><jdoc:include type="modules" name="recherche" style="xhtml" /></div>
<div class="clr"></div>
<div id="cadre_gauche"><jdoc:include type="modules" name="gauche" style="xhtml" /></div>
<div id="cadre_texte"><jdoc:include type="component" style="xhtml" /></div>
<div id="cadre_droite"><jdoc:include type="modules" name="droite" style="xhtml" /></div>
<div class="clr"></div>
<div id="pied_de_page"><jdoc:include type="modules" name="footer" style="xhtml" /></div>
</div>
</body>


Maintenant, on peut aussi modifier le fichier templateDetails.xml pour y rajouter les nouvelles
positions :
   ➢ chemin
   ➢ recherche
   ➢ footer


Cela nous fait au total 5 positions.




http://joomla.buldozer.fr                                                                     18 / 19
Tutoriel de création de Template pour joomla 2.5.x

Vous trouverez ci-dessous le code du fichier templateDetails.xml :
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
       <name>mon_template</name>
       <creationDate>avril 2012</creationDate>
       <author>Philippe</author>
       <authorEmail>webmaster@buldozer.fr</authorEmail>
       <authorUrl>http://joomla.buldozer.fr</authorUrl>
       <copyright>Copyright (C) joomla.buldozer.fr</copyright>
       <license>GNU General Public License version 2 ou supérieure</license>
       <version>1.0</version>
       <description>Template joomla 2.5</description>
       <files>
               <folder>css</folder>
               <folder>images</folder>
               <filename>index.php</filename>
               <filename>index.html</filename>
               <filename>templateDetails.xml</filename>
       </files>
       <positions>
               <position>gauche</position>
               <position>droite</position>
               <position>footer</position>
               <position>recherche</position>
               <position>chemin</position>
       </positions>
</extension>




http://joomla.buldozer.fr                                                        19 / 19

Contenu connexe

Tendances

Guide de l'Utilisateur 1.9.0
Guide de l'Utilisateur 1.9.0Guide de l'Utilisateur 1.9.0
Guide de l'Utilisateur 1.9.0
Adèle Dewitte
 
Rapport open erp
Rapport open erpRapport open erp
Rapport open erp
Hassan WAHSISS
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
Thabet Chokri
 
Pots de Miel, Honeypot informatique - Sécurité informatique
Pots de Miel, Honeypot informatique - Sécurité informatiquePots de Miel, Honeypot informatique - Sécurité informatique
Pots de Miel, Honeypot informatique - Sécurité informatique
🏁 Pierre-Henry Soria 💡
 
Gérer et animer votre site - Le Guide Joomla3
Gérer et animer votre site - Le Guide Joomla3Gérer et animer votre site - Le Guide Joomla3
Gérer et animer votre site - Le Guide Joomla3
Com'3elles - www.com3elles.com
 
Automatisation d'import export salesforce data loader & Salesforce CLI
Automatisation d'import export salesforce data loader & Salesforce CLIAutomatisation d'import export salesforce data loader & Salesforce CLI
Automatisation d'import export salesforce data loader & Salesforce CLI
Fabien Huot
 
Créer une barre de progression grâce à PHP 5.4
Créer une barre de progression grâce à PHP 5.4Créer une barre de progression grâce à PHP 5.4
Créer une barre de progression grâce à PHP 5.4
🏁 Pierre-Henry Soria 💡
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Guide de l'administration Wordpress
Guide de l'administration WordpressGuide de l'administration Wordpress
Guide de l'administration Wordpress
Com'3elles - www.com3elles.com
 
Système d'exploitation TC.pptx
Système d'exploitation TC.pptxSystème d'exploitation TC.pptx
Système d'exploitation TC.pptx
NidAgency
 

Tendances (10)

Guide de l'Utilisateur 1.9.0
Guide de l'Utilisateur 1.9.0Guide de l'Utilisateur 1.9.0
Guide de l'Utilisateur 1.9.0
 
Rapport open erp
Rapport open erpRapport open erp
Rapport open erp
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
 
Pots de Miel, Honeypot informatique - Sécurité informatique
Pots de Miel, Honeypot informatique - Sécurité informatiquePots de Miel, Honeypot informatique - Sécurité informatique
Pots de Miel, Honeypot informatique - Sécurité informatique
 
Gérer et animer votre site - Le Guide Joomla3
Gérer et animer votre site - Le Guide Joomla3Gérer et animer votre site - Le Guide Joomla3
Gérer et animer votre site - Le Guide Joomla3
 
Automatisation d'import export salesforce data loader & Salesforce CLI
Automatisation d'import export salesforce data loader & Salesforce CLIAutomatisation d'import export salesforce data loader & Salesforce CLI
Automatisation d'import export salesforce data loader & Salesforce CLI
 
Créer une barre de progression grâce à PHP 5.4
Créer une barre de progression grâce à PHP 5.4Créer une barre de progression grâce à PHP 5.4
Créer une barre de progression grâce à PHP 5.4
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Guide de l'administration Wordpress
Guide de l'administration WordpressGuide de l'administration Wordpress
Guide de l'administration Wordpress
 
Système d'exploitation TC.pptx
Système d'exploitation TC.pptxSystème d'exploitation TC.pptx
Système d'exploitation TC.pptx
 

En vedette

11 currículo de a eduación superior
11 currículo de a eduación superior11 currículo de a eduación superior
11 currículo de a eduación superior
Adalberto
 
Saviez vous que - La planète Mars
Saviez vous que - La planète MarsSaviez vous que - La planète Mars
Saviez vous que - La planète Mars
CasKil0167
 
Précocité de la pratique pongiste
Précocité de la pratique pongistePrécocité de la pratique pongiste
Précocité de la pratique pongiste
Bernard Bousigue
 
Herramientas de Internet
Herramientas de InternetHerramientas de Internet
Herramientas de Internet
Juani Quesada
 
Vade Retro Technology anti spam, anti pub, anti-phishing
Vade Retro Technology   anti spam, anti pub, anti-phishingVade Retro Technology   anti spam, anti pub, anti-phishing
Vade Retro Technology anti spam, anti pub, anti-phishing
Synergie Informatique France
 
Jacek Yerka
Jacek YerkaJacek Yerka
Jacek Yerka
ourensan
 
Dss64 2
Dss64 2Dss64 2
Dss64 2
Market iT
 
Elementos de un proyecto de investigacion
Elementos de un proyecto de investigacionElementos de un proyecto de investigacion
Elementos de un proyecto de investigacion
Adalberto
 
MaestríA CurríCulum Historia Del CurríCulum
MaestríA  CurríCulum Historia Del CurríCulumMaestríA  CurríCulum Historia Del CurríCulum
MaestríA CurríCulum Historia Del CurríCulum
Adalberto
 
Comment travailler au sein d'une startup a changé ma carrière ? par Cédric Gi...
Comment travailler au sein d'une startup a changé ma carrière ? par Cédric Gi...Comment travailler au sein d'une startup a changé ma carrière ? par Cédric Gi...
Comment travailler au sein d'une startup a changé ma carrière ? par Cédric Gi...
osezleweb
 
Accord enseignants
Accord enseignantsAccord enseignants
Accord enseignants
Luxemburger Wort
 
Sitzungsbericht sew, féduse, apess
Sitzungsbericht sew, féduse, apessSitzungsbericht sew, féduse, apess
Sitzungsbericht sew, féduse, apess
Luxemburger Wort
 
Catalogue formations analytics 2015 show me your data
Catalogue formations analytics 2015 show me your dataCatalogue formations analytics 2015 show me your data
Catalogue formations analytics 2015 show me your data
Fabien BOURGOIS
 
Brief Miltgen
Brief MiltgenBrief Miltgen
Brief Miltgen
Luxemburger Wort
 
Explication d'un handicap
Explication d'un handicapExplication d'un handicap
Explication d'un handicap
ndgc
 
Methodo support
Methodo supportMethodo support
Methodo support
James Sylvano
 
Liste forums semaine_du_microcredit_2011
Liste forums semaine_du_microcredit_2011Liste forums semaine_du_microcredit_2011
Liste forums semaine_du_microcredit_2011
Nathalie SALLES
 
Saviez vous que - Planète Mars
Saviez vous que - Planète MarsSaviez vous que - Planète Mars
Saviez vous que - Planète Mars
CasKil0167
 
Presentación1
Presentación1Presentación1
Presentación1
pabl09
 

En vedette (20)

11 currículo de a eduación superior
11 currículo de a eduación superior11 currículo de a eduación superior
11 currículo de a eduación superior
 
Saviez vous que - La planète Mars
Saviez vous que - La planète MarsSaviez vous que - La planète Mars
Saviez vous que - La planète Mars
 
Précocité de la pratique pongiste
Précocité de la pratique pongistePrécocité de la pratique pongiste
Précocité de la pratique pongiste
 
Herramientas de Internet
Herramientas de InternetHerramientas de Internet
Herramientas de Internet
 
Vade Retro Technology anti spam, anti pub, anti-phishing
Vade Retro Technology   anti spam, anti pub, anti-phishingVade Retro Technology   anti spam, anti pub, anti-phishing
Vade Retro Technology anti spam, anti pub, anti-phishing
 
Jacek Yerka
Jacek YerkaJacek Yerka
Jacek Yerka
 
Dss64 2
Dss64 2Dss64 2
Dss64 2
 
Elementos de un proyecto de investigacion
Elementos de un proyecto de investigacionElementos de un proyecto de investigacion
Elementos de un proyecto de investigacion
 
MaestríA CurríCulum Historia Del CurríCulum
MaestríA  CurríCulum Historia Del CurríCulumMaestríA  CurríCulum Historia Del CurríCulum
MaestríA CurríCulum Historia Del CurríCulum
 
Comment travailler au sein d'une startup a changé ma carrière ? par Cédric Gi...
Comment travailler au sein d'une startup a changé ma carrière ? par Cédric Gi...Comment travailler au sein d'une startup a changé ma carrière ? par Cédric Gi...
Comment travailler au sein d'une startup a changé ma carrière ? par Cédric Gi...
 
Accord enseignants
Accord enseignantsAccord enseignants
Accord enseignants
 
Le festival de cannes
Le festival de cannesLe festival de cannes
Le festival de cannes
 
Sitzungsbericht sew, féduse, apess
Sitzungsbericht sew, féduse, apessSitzungsbericht sew, féduse, apess
Sitzungsbericht sew, féduse, apess
 
Catalogue formations analytics 2015 show me your data
Catalogue formations analytics 2015 show me your dataCatalogue formations analytics 2015 show me your data
Catalogue formations analytics 2015 show me your data
 
Brief Miltgen
Brief MiltgenBrief Miltgen
Brief Miltgen
 
Explication d'un handicap
Explication d'un handicapExplication d'un handicap
Explication d'un handicap
 
Methodo support
Methodo supportMethodo support
Methodo support
 
Liste forums semaine_du_microcredit_2011
Liste forums semaine_du_microcredit_2011Liste forums semaine_du_microcredit_2011
Liste forums semaine_du_microcredit_2011
 
Saviez vous que - Planète Mars
Saviez vous que - Planète MarsSaviez vous que - Planète Mars
Saviez vous que - Planète Mars
 
Presentación1
Presentación1Presentación1
Presentación1
 

Similaire à Creation de template_joomla_2.5_-_v_1.0

WordPress
WordPressWordPress
WordPress
Thomas Bodin
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMM
Abdelmonem NAAMANE
 
Florence Labord Moodle
Florence Labord  MoodleFlorence Labord  Moodle
Florence Labord Moodle
Walibi
 
Atelier symfony n 2
Atelier symfony n 2Atelier symfony n 2
Atelier symfony n 2
Amir Souissi
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
Thomas Bodin
 
Exemple demarrage wp_v01
Exemple demarrage wp_v01Exemple demarrage wp_v01
Exemple demarrage wp_v01
Louis de Cacqueray
 
Introduction aspnet
Introduction aspnetIntroduction aspnet
Introduction aspnet
abdellatif edkhaili
 
Mop export-dataloader-salesforce-en-ligne-commande
Mop export-dataloader-salesforce-en-ligne-commandeMop export-dataloader-salesforce-en-ligne-commande
Mop export-dataloader-salesforce-en-ligne-commande
Cyrille Coeurjoly
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
mdallamohamed
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
tp1 management system-tp1 management system
tp1 management system-tp1 management systemtp1 management system-tp1 management system
tp1 management system-tp1 management system
AbdelkbirWs
 
Présentation du template T3 Framework de Joomlart
Présentation du template T3 Framework de JoomlartPrésentation du template T3 Framework de Joomlart
Présentation du template T3 Framework de Joomlart
Pierre Sempé
 
Optimiser son environnement de développement PHP (Tuto NetBeans v4.4)
Optimiser son environnement de développement PHP (Tuto NetBeans v4.4)Optimiser son environnement de développement PHP (Tuto NetBeans v4.4)
Optimiser son environnement de développement PHP (Tuto NetBeans v4.4)
Nicolas Defay
 
Guide de l'administration joomla 3
Guide de l'administration joomla 3Guide de l'administration joomla 3
Guide de l'administration joomla 3
Com'3elles - www.com3elles.com
 
Html 5
Html 5Html 5
Html 5
Thomas Bodin
 
TD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites webTD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites web
Stéphane Rouilly
 
Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
Ines Ouaz
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 
Creer un-site-avec-joomla-1.5
Creer un-site-avec-joomla-1.5Creer un-site-avec-joomla-1.5
Creer un-site-avec-joomla-1.5
aelfkih
 

Similaire à Creation de template_joomla_2.5_-_v_1.0 (20)

WordPress
WordPressWordPress
WordPress
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMM
 
Florence Labord Moodle
Florence Labord  MoodleFlorence Labord  Moodle
Florence Labord Moodle
 
Atelier symfony n 2
Atelier symfony n 2Atelier symfony n 2
Atelier symfony n 2
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Exemple demarrage wp_v01
Exemple demarrage wp_v01Exemple demarrage wp_v01
Exemple demarrage wp_v01
 
Introduction aspnet
Introduction aspnetIntroduction aspnet
Introduction aspnet
 
Joomla distant
Joomla distantJoomla distant
Joomla distant
 
Mop export-dataloader-salesforce-en-ligne-commande
Mop export-dataloader-salesforce-en-ligne-commandeMop export-dataloader-salesforce-en-ligne-commande
Mop export-dataloader-salesforce-en-ligne-commande
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
tp1 management system-tp1 management system
tp1 management system-tp1 management systemtp1 management system-tp1 management system
tp1 management system-tp1 management system
 
Présentation du template T3 Framework de Joomlart
Présentation du template T3 Framework de JoomlartPrésentation du template T3 Framework de Joomlart
Présentation du template T3 Framework de Joomlart
 
Optimiser son environnement de développement PHP (Tuto NetBeans v4.4)
Optimiser son environnement de développement PHP (Tuto NetBeans v4.4)Optimiser son environnement de développement PHP (Tuto NetBeans v4.4)
Optimiser son environnement de développement PHP (Tuto NetBeans v4.4)
 
Guide de l'administration joomla 3
Guide de l'administration joomla 3Guide de l'administration joomla 3
Guide de l'administration joomla 3
 
Html 5
Html 5Html 5
Html 5
 
TD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites webTD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites web
 
Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Creer un-site-avec-joomla-1.5
Creer un-site-avec-joomla-1.5Creer un-site-avec-joomla-1.5
Creer un-site-avec-joomla-1.5
 

Plus de Faiz Morchid

Guide de l'étudiant5
Guide de l'étudiant5Guide de l'étudiant5
Guide de l'étudiant5
Faiz Morchid
 
Liste selection crmef_marrakech_internet
Liste selection crmef_marrakech_internetListe selection crmef_marrakech_internet
Liste selection crmef_marrakech_internet
Faiz Morchid
 
Flash as2 components_help
Flash as2 components_helpFlash as2 components_help
Flash as2 components_help
Faiz Morchid
 
مباراة توظيف أساتذة التعليم العالي المساعدين
مباراة توظيف أساتذة التعليم العالي المساعدينمباراة توظيف أساتذة التعليم العالي المساعدين
مباراة توظيف أساتذة التعليم العالي المساعدين
Faiz Morchid
 
Presentation dema itqane
Presentation dema itqanePresentation dema itqane
Presentation dema itqane
Faiz Morchid
 
الدعم البيداغوجي
الدعم البيداغوجيالدعم البيداغوجي
الدعم البيداغوجي
Faiz Morchid
 
Liens
LiensLiens
Liens
LiensLiens
Pedagogie differencie tirch
Pedagogie differencie tirchPedagogie differencie tirch
Pedagogie differencie tirch
Faiz Morchid
 

Plus de Faiz Morchid (20)

Guide de l'étudiant5
Guide de l'étudiant5Guide de l'étudiant5
Guide de l'étudiant5
 
Primai
PrimaiPrimai
Primai
 
Primaire
PrimairePrimaire
Primaire
 
Liste islamique
Liste islamiqueListe islamique
Liste islamique
 
Liste islamique
Liste islamiqueListe islamique
Liste islamique
 
Liste selection crmef_marrakech_internet
Liste selection crmef_marrakech_internetListe selection crmef_marrakech_internet
Liste selection crmef_marrakech_internet
 
Liste arabe
Liste arabeListe arabe
Liste arabe
 
Primaire
PrimairePrimaire
Primaire
 
Lycee
LyceeLycee
Lycee
 
College
CollegeCollege
College
 
Tt
TtTt
Tt
 
Flash as2 components_help
Flash as2 components_helpFlash as2 components_help
Flash as2 components_help
 
مباراة توظيف أساتذة التعليم العالي المساعدين
مباراة توظيف أساتذة التعليم العالي المساعدينمباراة توظيف أساتذة التعليم العالي المساعدين
مباراة توظيف أساتذة التعليم العالي المساعدين
 
Holy quran
Holy quranHoly quran
Holy quran
 
Presentation dema itqane
Presentation dema itqanePresentation dema itqane
Presentation dema itqane
 
الدعم البيداغوجي
الدعم البيداغوجيالدعم البيداغوجي
الدعم البيداغوجي
 
Liens
LiensLiens
Liens
 
Liens
LiensLiens
Liens
 
Pedagogie differencie tirch
Pedagogie differencie tirchPedagogie differencie tirch
Pedagogie differencie tirch
 
Pd
PdPd
Pd
 

Dernier

La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
Editions La Dondaine
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
Txaruka
 
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGESGUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
DjibrilToure5
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
NadineHG
 

Dernier (6)

La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 
Auguste Herbin.pptx Peintre français
Auguste   Herbin.pptx Peintre   françaisAuguste   Herbin.pptx Peintre   français
Auguste Herbin.pptx Peintre français
 
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGESGUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
GUIDE POUR L’EVRAS BALISES ET APPRENTISSAGES
 
1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif1e Espaces productifs 2024.Espaces productif
1e Espaces productifs 2024.Espaces productif
 

Creation de template_joomla_2.5_-_v_1.0

  • 1. Copyright : Philippe STEINER Licence : GNU / GPL http://joomla.buldozer.fr
  • 2. Table des matières I Introduction........................................................................................................................................3 Logiciels nécessaires :.....................................................................................................................3 Petit rappel.......................................................................................................................................3 Les fichiers nécessaires au template................................................................................................4 II Créer le template provisoire..............................................................................................................5 Création du répertoire et des fichiers...............................................................................................5 Renseigner le fichier templateDetails.xml.......................................................................................6 Compresser le dossier......................................................................................................................8 III Installer notre template....................................................................................................................9 IV Création du template « mon_template »........................................................................................10 Modification du fichier index.php.................................................................................................11 Modification du fichier template.css.............................................................................................14
  • 3. Tutoriel de création de Template pour joomla 2.5.x I Introduction Dans ce tutoriel, je vais vous expliquer comment créer votre premier template joomla. Avant de commencer, il faut savoir que le template c'est le gabarit du site, la structure. Il détermine l’apparence visuelle du site. C'est le template qui va déterminer la couleur du site, la taille du texte et des titres, l'affichage des pages, les positions des modules, les couleurs du texte... En modifiant le template, on change l'aspect du site. Avec joomla 2.5.x, on peut attribuer un template spécifique pour une catégorie ou pour un article uniquement. Le template est constitué au minimum d'un fichier php et d'un fichier au format xml. On peut aussi rajouter une feuille de style au format css, ainsi que des images. Dans ce tutoriel, je vais vous expliquer comment concevoir un template (vous pouvez voir l'aperçu du template sur le site demo.buldozer.fr. Logiciels nécessaires : On n'a pas besoin de logiciels spécifiques On aura besoin d'un éditeur. Le bloc-notes de Windows suffit. Pour un meilleur affiche du code, je vous conseille d'utiliser 2 logiciels, qui sont gratuits et en français. Ils ne sont pas indispensables, mais plutôt conseillés. Pour rentrer le code, il faudra un éditeur. Le bloc-notes de Windows fait l'affaire, mais il n'affiche pas le code php en couleurs. Notepad++ affiche le code en couleur et il est mieux optimisé que le bloc-notes pour l'affichage du code php. Il est gratuit et en français : http://notepad-plus-plus.org/fr/download On aura besoin aussi d'un logiciel de compression de fichier zip. N'importe quel logiciel fera l'affaire. Si vous n'avez pas de logiciel, je vous conseille izarc. Il est gratuit et en français : http://www.clubic.com/telecharger-fiche11017-izarc.html Petit rappel Sous Joomla 1.5 on pouvait mettre directement le template dans le dossier templates et il était automatiquement reconnu par joomla. Sous Joomla 1.6, 1.7 et 2.5.x, cela ne fonctionne plus. On est maintenant obligé d'installer le template comme une extension. Le template devra être au format zip Avant de créer le template, on va d'abord créer un dossier, avec des fichiers vides. Ce répertoire va nous permettre de créer le fichier zip du template http://joomla.buldozer.fr 1 / 19
  • 4. Tutoriel de création de Template pour joomla 2.5.x Les fichiers nécessaires au template Comme il a été dit, 2 fichiers sont indispensables pour un template, les fichiers index.php et templateDetails.xml. Avec juste ces 2 fichiers, un template est opérationnel. Mais vous allez voir que l'on va utiliser d'autres fichiers optionnels, pour améliorer le graphisme et l'organisation du template. Voici une vue type d'un template, une fois que l'on aura rentré tous les fichiers : css : contient le fichier css du template (que l'on va appeler template.css). C'est dans ce fichier que l'on mettra tous les styles, couleurs... images : contient toutes les images du templates. Racine : index.html : c'est un fichier pour éviter qu'une personne vienne fouiner dans le répertoire. Le fichier est vide. Vous pouvez y insérer le code que vous voulez. index.php : c'est ce fichier qui contient toutes les positions du template http://joomla.buldozer.fr 2 / 19
  • 5. Tutoriel de création de Template pour joomla 2.5.x templateDetails.xml : c'est le fichier qui sert à l'installation du template et qui va indiquer les positions disponibles dans la partie des modules template_thumbnail.png : c'est une copie-écran du template template_preview.png : c'est une copie écran plus grande. Elle est affichée pour avoir un aperçu du template. II Créer le template provisoire Création du répertoire et des fichiers Comme il a été expliqué plus haut, pour utiliser un template, on doit d'abord l'installer. On va crée un template vide pour l'installer dans joomla, ainsi on pourra faire les modifications et les visualiser. Le template vide pourra être utilisé par la suite, pour la création de vos templates. Je vous conseille d'installer le serveur wamp (ou celui que vous voulez) sur votre PC, d'installer un site vide pour faire les exemples. Sur ce site, créer un petit texte bidon, c'est juste pour faire un essai. Si vous ne voulez pas le créer, vous pouvez le télécharger à l'adresse suivante: http://joomla.buldozer.fr/98 Pour la création de ce template que l'on va appeler vide, vous créer un dossier sur votre disque dur, où vous voulez. A mon avis, le plus simple est de le créer dans le répertoire templates de votre site. 1. il faut créer un dossier, avec le nom que vous voulez. Pour notre exemple on va utiliser : template_vide (ne pas mettre d'espace) ne pas utiliser le nom de votre template, sinon quand vous voudrez l'installer, vous aurez un message vous indiquant qu'il y a déjà un répertoire avec le même nom. 2. Dans dans le dossier, vous aller créer les dossiers : images, css. Dans chacun des dossiers, vous allez créer un fichier index.htm : ce fichier restera vide ou vous pourrez y mettre le code que vous voudrez. Il sert juste à empêcher de consulter le contenu du répertoire. 3. à la racine de template_vide, il faut créer les fichiers : index.html, index.php, templateDetails.xml Vous devriez avoir une arborescence comme celle qui se trouve ci- contre. http://joomla.buldozer.fr 3 / 19
  • 6. Tutoriel de création de Template pour joomla 2.5.x Maintentant, nous allons renseigner le fichier templateDetails.xml, sans quoi, on ne pourra pas installer le template Renseigner le fichier templateDetails.xml C'est ce fichier qui va indiquer à joomla que c'est un template. Il comporte le nom du template, ainsi que les positions que l'ont peut choisir lorsqu’on veut affecter une position à un module. Pour ceux qui ne veulent pas saisir le texte, vous pouvez télécharger le template_vide ici: http://joomla.buldozer.fr/98 Pour les autres, ouvrez le fichier templateDetails.xml avec votre éditeur (notepad+ est conseillé) Il faut taper les lignes suivantes : <?xml version="1.0" encoding="utf-8"?> : Indique que c'est un fichier xml avec un encodage utf-8 <extension version="2.5" type="template" client="site"> : indique à joomla que c'est un template <name>mon_template</name> : indique le nom du template. Ne pas mettre d'espace. Lors de la l'installation du template, le dossier sera crée avec le nom du template. On appellera le template « mon_template ». Vous pouvez laisser ce nom ou mettre le vôtre, sans espace. <creationDate>avril 2012</creationDate> <author>Philippe</author> <authorEmail>webmaster@buldozer.fr</authorEmail> <authorUrl>http://joomla.buldozer.fr</authorUrl> <copyright>Copyright (C) joomla.buldozer.fr</copyright> <license>GNU General Public License version 2 ou supérieure</license> http://joomla.buldozer.fr 4 / 19
  • 7. Tutoriel de création de Template pour joomla 2.5.x <version>1.0</version> <description>Template joomla 2.5</description> Ce sont des options, c'est informations s'affichent dans joomla, dans la partie gestion des templates. Indique la date de création, nom de l'auteur, adresse courriel, site, copyright, licence, la version, la description. Voici ce que cela donne dans joomla : <files> <folder>css</folder> <folder>images</folder> <filename>index.php</filename> <filename>index.html</filename> <filename>templateDetails.xml</filename> </files> Ce sont les fichiers qui composent le template. S'il en manque un ou si le nom n'est pas exact, vous aurez un message d'erreur à l'installation du template. <positions> <position>gauche</position> <position>droite</position> </positions> Ce sont les positions qui seront affichées dans le menu déroulant, lors du choix d'une position dans le module Si vous ne rentrez pas la position, vous devrez la saisir en manuel pour l'utiliser. Sur la page suivante, je vous ai mis le code du fichier. Vous pouvez le sélectionner et faire un copier-coller dans votre éditeur, cela vous évitera de la saisir manuellement. http://joomla.buldozer.fr 5 / 19
  • 8. Tutoriel de création de Template pour joomla 2.5.x <?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>mon_template</name> <creationDate>avril 2012</creationDate> <author>Philippe</author> <authorEmail>webmaster@buldozer.fr</authorEmail> <authorUrl>http://joomla.buldozer.fr</authorUrl> <copyright>Copyright (C) joomla.buldozer.fr</copyright> <license>GNU General Public License version 2 ou supérieure</license> <version>1.0</version> <description>Template joomla 2.5</description> <files> <folder>css</folder> <folder>images</folder> <filename>index.php</filename> <filename>index.html</filename> <filename>templateDetails.xml</filename> </files> <positions> <position>gauche</position> <position>droite</position> </positions> </extension> Maintenant que le fichier templateDetails.xml est enregistré, on va créer notre fichier compressé. Compresser le dossier Maintenant, vous revenez à la racine de votre dossier. Vous devriez avoir le dossier template_vide sur l'écran. Faites un clic avec le bouton droit sur le dossier template_vide -> choisisser izarc -> Ajouter template_vide.zip ou alors compresser le dossier comme vous faites d'habitude, si vous utilisez un autre logiciel. Si vous n'y arrivez pas, vous pouvez télécharger le fichier ici : http://joomla.buldozer.fr/98 http://joomla.buldozer.fr 6 / 19
  • 9. Tutoriel de création de Template pour joomla 2.5.x III Installer notre template Pour installer le template, il faut aller dans la partie administration du site : Extensions → Gestion des extensions Il faut aller chercher le fichier template_vide.zip Cliqué sur Envoyer & Installer. Le template est installé. Pour le vérifier, cliquer sur : Extensions ->Gestion des templates Le template mon_template doit être affiché. Cliquer sur l'étoile blanche qui se trouve sur la ligne du template L'étoile devient jaune. Le template est maintenant le template par défaut. http://joomla.buldozer.fr 7 / 19
  • 10. Tutoriel de création de Template pour joomla 2.5.x Si vous cliquer sur l'icône voir le site (en haut à droite de l'écran) vous allez faire apparaitre le site. La page devrait être blanche avec rien d'afficher, c'est normal, vu que l'on n’a rien rempli dans le fichier index.php. Nous allons maintenant modifier le fichier index.php IV Création du template « mon_template » Avant de se lancer dans la création du template, on va quand même en préciser les grandes lignes du template. On va concevoir un template avec : ➔ une partie haute, pour y insérer le logo ➔ une colonne à gauche ➔ une partie centrale pour le texte ➔ une colonne à droite ➔ une partie pied de page ➔ les colonnes s'adapteront à la taille du navigateur ➔ On aura un espace sur les coins du navigateur, pour ne pas coller les colonnes au bord de l'écran Le template aura cette structure : http://joomla.buldozer.fr 8 / 19
  • 11. Tutoriel de création de Template pour joomla 2.5.x Modification du fichier index.php Aller dans le répertoire templates de votre site, ouvrez le dossier mon_template Ouvrez le fichier index.php avec votre éditeur Il n'y a que 22 lignes à taper http://joomla.buldozer.fr 9 / 19
  • 12. Tutoriel de création de Template pour joomla 2.5.x A la fin de la description, je vous ai collé l'ensemble des lignes pour vous éviter de les taper. Il suffit de faire un copier – coller <?php defined('_JEXEC') or die;?> C'est une ligne de commande pour sécuriser le système. Il vérifie que les données proviennent de joomla. <!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; ?>" > Ce sont 2 lignes standard. Elles ne sont pas propres à joomla. <head> : On ouvre la commande head, l'entête du fichier html. <jdoc:include type="head" /> : On dit à joomla d'ouvrir les balises <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ? >/css/template.css" type="text/css" /> On dit à joomla d'ouvrir les 3 fichiers templates. Les 2 premiers sont les fichiers standard de joomla. Le 3e c'est notre fichier. Au lieu d'utiliser le nom du site et le nom du templates on utilise cette commande $this->baseurl : utilise l'adresse du site $this->template : utilise le nom du template. </head> : On ferme la commande head <body> : On ouvre body, la partie central de la page On va utiliser des id pour identifier les différents blocs : <div id= ''nom du bloc''>. Vous pouvez changer les noms comme vous voulez. Il faut juste que le nom dans le fichier.php corresponde au nom qui se trouve dans template.css. J'essaie d'utiliser des noms significatifs, qui sont parlants. <div id="cadre_exterieur"> : on indique d'ouvrir le bloc cadre_exterieur. C'est le cadre qui permet de centrer toutes les colonnes et de ne pas coller les colonnes au bord de l'écran. Les informations seront rentrées dans le fichier template.css. <div id="logo"></div> : on indique d'ouvrir le bloc logo et de le refermer juste après. Joomla affichera le logo du site <div id="logo"></div> : on indique d'ouvrir le bloc logo et de le refermer juste après. Joomla affichera le logo du site <div id="cadre_gauche"><jdoc:include type="modules" name="gauche" style="xhtml" /></div> : On va détailler la ligne : <div id="cadre_gauche"> : on indique que l'on veut utiliser le style (couleur, fond, retrait...) cadre_gauche pour le bloc qui arrive http://joomla.buldozer.fr 10 / 19
  • 13. Tutoriel de création de Template pour joomla 2.5.x <jdoc:include type="modules" name="gauche" style="xhtml" /> : jdoc:include est la ligne de commande qui indique à joomla d'afficher un module à cet endroit. La position de ce module aura le nom de gauche. On utilisera le style xtml. </div> : ferme le bloc <div id="cadre_texte"><jdoc:include type="component" style="xhtml" /></div> : Cette ligne indique que l'on va afficher le texte (component) dans le bloc que l'on appel cadre_texte <div id="cadre_droite"><jdoc:include type="modules" name="droite" style="xhtml" /></div> : C'est la même ligne que pour la colonne gauche, sauf que l'on met les paramètres pour la droite. Il faut retenir ceci: <jdoc:include type="modules" name="nom de la position" style="xhtml" /> : indique le nom d'un module <jdoc:include type="component" style="xhtml" /> : Affiche le texte Ce sont ces 2 commandes qu'il faut connaître. Ces 2 lignes sont spécifiques à joomla. C'est cela qui permet d'afficher le texte et les modules <div class="clr"></div> : c'est une commande que l'on utilise pour réinitialiser les positions <div id="footer"><jdoc:include type="modules" name="pied_de_page" style="xhtml" /></div> : comme avant. On indique à joomla d'afficher un module qui à la position pied_de_page en utilisant le style footer. </div> : ferme le bloc cadre_exterieur </body> : ferme body, le corps du fichier. Vous pouvez enregistrer, le format index.php est finis. Voici le code : http://joomla.buldozer.fr 11 / 19
  • 14. Tutoriel de création de Template pour joomla 2.5.x <?php defined('_JEXEC') or die;?> <!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="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body> <div id="cadre_exterieur"> <div id="logo"></div> <div id="cadre_gauche"><jdoc:include type="modules" name="gauche" style="xhtml" /></div> <div id="cadre_texte"><jdoc:include type="component" style="xhtml" /></div> <div id="cadre_droite"><jdoc:include type="modules" name="droite" style="xhtml" /></div> <div class="clr"></div> <div id="footer"><jdoc:include type="modules" name="pied_de_page" style="xhtml" /></div> </div> </body> Modification du fichier template.css Nous allons maintenant voir ce que cela donne sur notre site. Aller voir sur votre site et voici ce que cela donne: Cela ne correspond pas à ce que je veux. Tout est mis l'un en dessous de l'autre. C'est normal, car on a pas encore rentré les données de style. On va le faire maintenant. Vous aller dans le répertoire de votre template/ « mon_template » vous ouvrez le dossier : css vous ouvrez le fichier template.css avec votre éditeur. C'est du code css. Toutes les lignes de codes du fichier seront mises à la fin des descriptions. http://joomla.buldozer.fr 12 / 19
  • 15. Tutoriel de création de Template pour joomla 2.5.x On va maintenant rentrer nos premières lignes : /* General */ html {margin:0;padding:0} body {background:#EBEBEB;font-family: Arial,sans-serif;font-size:12px;width:100%} img {border:none} .clr {clear:both} /* General */ : c'est un commentaire. Dans la partie générale, je mets des informations générales. Tous les commentaires sont à rentrés comme ceci : /* commentaire */ html {margin:0;padding:0} : on indique que les marges et les retraits sont à 0 body {background:#EBEBEB;font-family: Arial,sans-serif;font-size:12px;width:100%} : on va utiliser un fond gris ( EBEBEB), la police arial ou sans empattement si la police arial n'est pas installée sur le poste, les caractères seront de la taille 12 pouces, on utilisera toute la largeur du navigateur img {border:none} : on indique que l'on ne veut pas de cadre autour des images .clr {clear:both} : commande pour réinitialiser les positions Maintenant on va s'attaquer aux id : /* Id */ #cadre_exterieur{background:#FFF;width:90%;min-width:800px;margin:40px auto;padding:10px;border:5px outset #808080} #logo{width:100%;height:97px;margin:0 auto;background:url(../images/logo.png) center no- repeat} #cadre_gauche, #cadre_droite{width:20%;float:left} #cadre_texte{width:60%;float:left} #pied_de_page {margin:10px 0;text-align:center} #cadre_exterieur{background:#FFF;width:90%;min-width:800px;margin:40px auto;padding:10px;border:5px outset #808080} : on crée un cadre, dans lequel les autres blocs seront imbriqués. Il a un fond blanc (&FFF), il a une taille de 90% de la taille du navigateur, avec une dimension minimum de 800 pixels. En hauteur et bas de page, il a une marge de 40 pixels et sur les côtés, c'est calculer automatiquement. A l'intérieur du cadre, il y a un retrait de 10 pixels sur chaque côté. Le cadre est en relief. #logo{width:100%;height:97px;margin:0 auto;background:url(../images/logo.png) center no- repeat} : C'est le logo. Mon image à une hauteur de 97 pixels. Il faudra indiquer la hauteur de votre logo #cadre_gauche, #cadre_droite{width:20%;float:left} :C'est le style que l'on a indiqué pour le module gauche (dans le fichier index.php). On indique que le bloc aura une largeur de 20% de la taille de cadre_exterieur. On indique qu'il est positionné sur la gauche de la page. Si on n’indique pas cette position, les 3 blocs (gauche, droite et texte) seront affichés l'un en dessous de l'autre. Comme le cadre_gauche et le cadre_droit ont les mêmes infos, on les rentre sur la même ligne, pour éviter de retaper les informations. #cadre_texte{width:60%;float:left} : C'est le cadre du texte. Il occupera 60 % de la taille de http://joomla.buldozer.fr 13 / 19
  • 16. Tutoriel de création de Template pour joomla 2.5.x cadre_exterieur, logique vu que les 2 autres colonnes font 20 + 20 = 40% de la taille. #pied_de_page {margin:10px 0;text-align:center} : on met une marge de 10 pixels au dessus et en dessous du bloc et on centre le texte. Si on enregistre notre fichier et on regarde le site, voici ce que cela doit donner : Mes modules ne sont pas affichés. Normal, vous n'avez pas indiquer les positions dans joomla. Il faut aller dans le module administration de joomla → gestion des modules : Pour notre menu, on voit qu'il est affiché à une position x Cliquer sur Menu principal : Cliquer sur Sélectionner la position : Il nous affiche nos 2 positions que nous avions rentrées dans le fichier templateDetails.xml. Cliquer sur gauche http://joomla.buldozer.fr 14 / 19
  • 17. Tutoriel de création de Template pour joomla 2.5.x Faites la même chose pour le module connexion, mais choisissez droite. Après, allez de nouveau consulter votre site, il devrait ressembler à cela : C'est ce que l'on avait prévu. Si vous supprimer la class clr, voici ce que l'on obtient : Le cadre entoure le logo, ce que l'on ne veut pas. Le template est fini. Après, il faut créer les styles pour chaque élément (les liens, le menu...). Cela fait l'objet d'un autre tutoriel, que vous pourrez consulter sur le site http://joomla.buldozer.fr. Avant de finir complètement, on se dit : j'aurais pu rajouter le module recherche et le fil ariane. Allez on va le faire, mais avant, vous avez une petite idée pour arriver à cela : La ligne du fil ariane et le module recherche sont sur la même ligne et on a rajouté l'image au module recherche. Voici la solution : Dans le fichier index.php, il faut rajouter les 3 lignes après <div id="logo"></div> : http://joomla.buldozer.fr 15 / 19
  • 18. Tutoriel de création de Template pour joomla 2.5.x <div id="chemin"><jdoc:include type="modules" name="chemin" style="xhtml" /></div> <div id="recherche"><jdoc:include type="modules" name="recherche" style="xhtml" /></div> <div class="clr"></div> Les 2 premières lignes sont semblables aux autres lignes pour afficher les modules. Comme les 2 lignes n'ont pas la même hauteur, la classe clr évite d'avoir un effet d'escalier sur les lignes suivantes Exemple : sans la classe clr, on obtient cela : Avec la classe clr, on obtient cela : Dans le fichier template.css, il faut rajouter les 2 lignes suivantes, en dessous de #cadre_texte : #chemin {margin-top:5px;padding-top:0;width:70%;float:left;font-size:14px} #recherche {width:30%;margin:0;padding:0;float:right;text-align:right} Pour chemin, on indique qu'il a une largeur de 60 % et recherche de 30 %. On reste sur une largeur de 90 % car On constate que l'image de la loupe est trop haute. On va modifié cela en rajoutant cette ligne : http://joomla.buldozer.fr 16 / 19
  • 19. Tutoriel de création de Template pour joomla 2.5.x div.search input.button {margin-bottom:-10px} : fait remonter le cadre recherche de 10 pixels Vous trouverez ci-dessous le code du fichier template.css : /* General */ html {height:101%;margin:0;padding:0} body {background:#EBEBEB;font-family: Arial,sans-serif;font-size:12px;width:100%} img1 {border:none} .clr {clear:both} /* Id */ #cadre_exterieur{background:#FFF;width:90%;min-width:800px;margin:40px auto;padding:10px;border:5px outset #808080} #logo{width:100%;height:97px;margin:0 auto;background:url(../images/logo.png) center no- repeat} #cadre_gauche, #cadre_droite{width:20%;float:left} #cadre_texte{width:60%;float:left} #chemin {margin-top:5px;padding-top:0;width:70%;float:left;font-size:14px} #recherche {width:30%;margin:0;padding:0;float:right;text-align:right} #pied_de_page {margin:10px 0;text-align:center} div.search input.button {margin-bottom:-10px} http://joomla.buldozer.fr 17 / 19
  • 20. Tutoriel de création de Template pour joomla 2.5.x Vous trouverez ci-dessous le code du fichier index.php : <?php defined('_JEXEC') or die;?> <!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="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body> <div id="cadre_exterieur"> <div id="logo"></div> <div id="chemin"><jdoc:include type="modules" name="chemin" style="xhtml" /></div> <div id="recherche"><jdoc:include type="modules" name="recherche" style="xhtml" /></div> <div class="clr"></div> <div id="cadre_gauche"><jdoc:include type="modules" name="gauche" style="xhtml" /></div> <div id="cadre_texte"><jdoc:include type="component" style="xhtml" /></div> <div id="cadre_droite"><jdoc:include type="modules" name="droite" style="xhtml" /></div> <div class="clr"></div> <div id="pied_de_page"><jdoc:include type="modules" name="footer" style="xhtml" /></div> </div> </body> Maintenant, on peut aussi modifier le fichier templateDetails.xml pour y rajouter les nouvelles positions : ➢ chemin ➢ recherche ➢ footer Cela nous fait au total 5 positions. http://joomla.buldozer.fr 18 / 19
  • 21. Tutoriel de création de Template pour joomla 2.5.x Vous trouverez ci-dessous le code du fichier templateDetails.xml : <?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>mon_template</name> <creationDate>avril 2012</creationDate> <author>Philippe</author> <authorEmail>webmaster@buldozer.fr</authorEmail> <authorUrl>http://joomla.buldozer.fr</authorUrl> <copyright>Copyright (C) joomla.buldozer.fr</copyright> <license>GNU General Public License version 2 ou supérieure</license> <version>1.0</version> <description>Template joomla 2.5</description> <files> <folder>css</folder> <folder>images</folder> <filename>index.php</filename> <filename>index.html</filename> <filename>templateDetails.xml</filename> </files> <positions> <position>gauche</position> <position>droite</position> <position>footer</position> <position>recherche</position> <position>chemin</position> </positions> </extension> http://joomla.buldozer.fr 19 / 19