Agence web et solutions IT, Experts Symfony contact@avanim-prod.com

Création template joomla

11 octobre 2010 jravouna Joomla 1.5 Étiquettes : , , , , , , , , , 0 Comments

Des tutoriels complémentaires vous apprennent, par la suite, à construire un template complet pour votre site web joomla 1.5 ou  joomla 1.0. L’objectif étant d’avoir un code propre parfaitement maitrisable et réussir à modifier et personnaliser un template pour son site web professionnel.

Rappelons qu’un minimum de connaissances sur l’html et le langage css est requis. La lecture des articles correspondants s’avère nécessaire pour les débutants qui vont s’apercevoir que l’apprentissage des éléments de base de ces deux langages est à la fois facile et bénéfique pour une meilleure maîtrise du code.

Si vous êtes bien initiés, le tutoriel sur le positionnement css des blocs div vous sera d’un apport considérable. En effet, ce dernier propose des solutions à des problèmes fréquents sur la mise en oeuvre de certaines propriètés css. La résolution de ces problèmes vous sera utile lors de la construction de votre template professionnel.

Pour commencer, on admet que « c:xampplitehtdocs » est la racine de votre serveur web (cf installation xampp). Le dossier de votre site portant le nom « MonSitePerso » est, par conséquent, « c:xampplitehtdocsMonSitePerso » à l’issue de l’installation de joomla sur votre ordinateur local.

Après l’installation de votre site « MonSitePerso », vous avez bien remarqué que son url « http://localhost/MonSitePerso » donne un affichage par défaut basé sur le template « rhuk_solarflare_ii » fourni en standard avec joomla.

Le template est l’élement qui gère toute la partie design de votre site. Concrétement, il s’agit d’un répertoire portant le nom de votretemplate et situé  dans le dossier « c:xampplitehtdocsMonSitePersotemplates » de votre site « MonSitePerso ».

Par défaut, l’installation de joomla 1.0.15 fournit deux templates:  « rhuk_solarflare_ii » et « madeyourweb ». Vous pouvez rajouter vos propres modèles. Ainsi, pour le même site, différents templates seront disponibles et chacun fournit une apparence et un design particulier.

Dans les pages suivantes, vous allez créer votre propre template nommé  » TemplatePerso « . Alors le dossier de votre nouveautemplate sera le suivant:

« c:xampplitehtdocsMonSitePersotemplatesTemplatePerso« .

Le Contenu du dossier template

Le dossier « c:xampplitehtdocsMonSitePersoTemplates » est le conteneur qui comprend tous les templates disponibles pour votre site web.

Pour la mise en oeuvre de votre template nommé « TemplatePerso« , créez  l’arborescence suivante dans le dossier « Templates »:

« TemplatePerso » :  dossier contenant tout les éléments du  template.
« TemplatePersocss » :  dossier contenant les fichiers css.
« TemplatePersoimages » : dossier contenant toutes les images du template.

Examinons le contenu de chacun de ces dossiers:

Le dossier « TemplatePerso » va contenir les fichiers suivants:

index.php : le fichier définissant la structure de votre template.
templateDetails.xml : le fichier descriptif de votre template (auteur, nom, liste des images, etc)
template_thumbnail.png : fichier correspondant à la miniature affichée dans joomla.

Cette image miniature, vous pouvez la créer après finalisation (création et amélioration) de votre template.

Le dossier « TemplatePersocss » va contenir le fichier :

template_css.css : fiche des déclarations de style pour paramétrer l’affichage du contenu dans joomla (police, taille, couleurs, bordure, espacements, positionnement etc..)

Le contenu de ces fichiers sera examiné en détail dans les pages qui suivent.

Le dernier dossier de l’arborescence « TemplatePersoimages » comprend tous les fichiers images propres à votre template.

N.B: pour les images utilisées dans votre site quel que soit le template, elles sont placées dans un niveau plus haut,  dans le dossier : « c:xampplitehtdocsMonSitePersoimages« . C’est là où vous placez les images illustrant vos articles.

Le fichier index.html :

Dans tous les dossiers de l’arborescence (racine et sous dossiers du template), un fichierindex.html est placé pour sécuriser votre site. Il n’a pas de fonction ni sur le contenu ni sur la présentation de vos pages web. De ce fait, la présence d’un code particulier dedans n’est pas une obligation, cependant on y insère généralement le code suivant :

<html><body bgcolor= »#FFFFFF »></body></html>

Si un internaute tente d’accéder à un dossier pour en lister le contenu,  il verra la page d’index de ce répertoire. Une page vierge sans contenu lui est , alors, affichée (c’est ce qui est inscrit dans le fichier, par défaut, index.html).

Pour tester l’effet en local, lancez l’url suivante:

http://localhost/MonSitePerso/templates/TemplatePerso/css/

avec et sans fichier index.html dans le dossier css.

Jusqu’à présent, tous les fichiers de l’arborescence sont vierges. Aucun code n’est inséré dedans sauf  pour le fichier de sécurité index.html.

A l’aide d’un éditeur de texte, Notepad ++ , par exemple, de votre « Boîte à outils », vous allez préparer, par la suite, les fichiers de votre template.

Le fichier template_thumbnail.png

En supposant que votre template final tiendra sur toute la page de votre navigateur pour une résolution de 1024*768 pixels, une image miniature de 25% de cette taille est généralement acceptable. Soit une dimension de 256*192 pixels pour votretemplate_thumbnail.png. Adoptez, par exemple, une dimension de 250*200 pixels.

Vous pouvez créer ce fichier miniature grâce à un outil de dessin tel que Gimp, une fois, la conception de votre template achevée. Une capture d’écran et une réduction de l’image en spécifiant les dimensions dans votre outil de dessin est une tâche facile et rapide.

Le fichier templateDetails.xml

Il s’agit d’un  fichier comprenant une série de balises xml qu’il faudra adapter au contexte du template nouvellement créé, notamment pour la troisième ligne où il faut placer le nom exacte du template.

A l’aide de Notepad++ par exemple, créez un nouveau fichier nommétemplateDetails.xml (la lettre « D » en majuscule). Voici le contenu à insérer dedans :

<?xml version= »1.0″ encoding= »iso-8859-1″?>
<mosinstall type= »template » version= »1.0.0″>

<name>TemplatePerso</name>
<creationDate>04/02/2009</creationDate>
<author>Inserer-Votre-Nom</author>
<copyright>GNU/GPL</copyright>
<authorEmail>Inserer-Votre-Email</authorEmail>
<authorUrl>http://www.Votre-Site.com</authorUrl>
<version>1.0</version>
<description>Inserer-Texte-Descriptif-De-Votre-Template.</description>
<files>

<filename>index.php</filename>
<filename>template_thumbnail.png</filename>

</files>
<images>

<filename>images/powered_by.png</filename>

</images>
<css>

<filename>css/template_css.css</filename>

</css>

</mosinstall>

Modifiez le texte, entre les balises xml ouvrante et fermante, par un texte qui vous correspond le mieux :

<name> : pour le nom de votre template
<creationDate> : date de création du template
<author> : le nom du créateur du template
<copyright> : Information sur le copyright du template.
<authorEmail> : l’email du créateur.
<authorUrl> : adresse du site du créateur
<version> : version du template
<description> : texte descriptif du template

<files> : indique la liste des fichiers à installer associés au template.
<images> : indique la liste des images associées au template
<css> : indique la liste des feuilles de styles.

Après modification, sauvegarder le fichier avant de quitter.

Le squelette du fichier index.php

A l’aide de Notepad++ par exemple, créez un nouveau fichier nommé index.php et insérer dedans le squelette suivant :

<?php $iso = split( ‘=’, _ISO );
echo ‘<?xml version= »1.0″ encoding= »‘. $iso[1] .' »?’ .’>’;
?>
<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>

<html xmlns= »http://www.w3.org/1999/xhtml »>

<head>

<?php mosShowHead(); ?>
<?php if ( $my->id ) {initEditor(); } ?>
<meta http-equiv= »Content-Type » content= »text/html; <?php echo _ISO; ?> » />
<link href= »<?php echo $mosConfig_live_site;?>/templates/<?php echo $GLOBALS[cur_template];?>/css/template_css.css » rel= »stylesheet » type= »text/css » />

</head>
<body>

</body>

</html>

Explication de la balise <link>

Entre les balises <head> et  </head> , on indique au ficher index.php le fichier css qu’il doit charger, et ce à l’aide de la balise<link />. L’attribut « href » de cette balise indique l’emplacement de  votre feuille de template_css.css.

La balise <link />, au départ,  a la forme suivante :

<link  href= « http://localhost/MonSitePerso/Templates/TemplatePerso/css/template_css.css » rel= »stylesheet » type= »text/css » />

En utilisant les variables joomla à la place des noms de dossier et fichier, on parvient à généraliser la balise et la rendre valable pour n’importe quel template.

Joomla! possède la variable  $GLOBALS[cur_template] qui renvoie le nom du template courant et la variable$mosConfig_live_site qui contient l’adresse du site.

La balise <link /> devient après remplacement du contenu des variables par les noms des variables :

<link href= »<?php echo $mosConfig_live_site;?>/templates/<?php echo $GLOBALS[cur_template];?>/css/template_css.css » rel= »stylesheet » type= »text/css » />

En procédant ainsi, le squelette de votre fichier index.php sera valable quel que soit le nom du site et pour tous vos futurstemplates. Le code, de cette façon, est bien optimisé.

Le corps du fichier index.php

Pour compléter le squelette de votre fichier index.php, il faut insérer du code entre les balises <body> et </body>.

Entrer le nom « admin » et le mot de passe correspondant (cf Etape 3 de l’installation de joomla sur votre ordinateur local)

Allez ensuit dans le menu « Site–>Gestion des Templates–>Template du Site »

TemplatePerso4.jpg

Dans le nouveau écran ainsi affiché, cliquez sur le bouton en regard de votre template « TemplatePerso » et puis cliquez sur le bouton « Default ».

TemplatePerso5.jpg

Raffraichir l’écran dans votre navigateur pour l’url de votre site: « http://localhost/MonSitePerso/ ». L’affichage correspond maintenant à votre nouveau template :

TemplatePerso6.jpg

Comme vous le remarquez, à ce stade, votre template affiche 4 blocs div, le bloc « haut » , le bloc « gauche », le bloc « centre » , le bloc « droit » et enfin le bloc « bas ».

Dans la page suivante, vous allez paramétrer votre fichier template_css.css qui est encore vierge jusqu’à maintenant.

Le fichier template_css.css

Pour le démarrage, créez le fichier template_css.css à l’aide de Notepad++, en  insérant dedans le code suivant :

div {
padding:0;
margin:0;
}

#haut {
width:800px;
background-color: orange;
}
#gauche {
width:200px;
float:left;
background-color: olive;
}
#centre {
width:400px;
float:left;
background-color: silver;
}
#droit {
width:200px;
float:left;
background-color: aqua;
}
#bas {
clear:left;
width:800px;
background-color: gray;
}

Dans ce fichier, on a définit pour chaque bloc <div> via son identifiant «id», la largeur (width), la couleur d’arrière plan (background-color), et le positionnement dans le flux des blocs (float).

Par défaut un nouveau bloc <div> vient s’insérer en dessous du bloc précédent. En effet, pour un flux de blocs <div>1, <div>2 … <div>n déclaré dans cet ordre dans votre fichier php, les <div> seront affichés, par défaut, l’un en dessous de l’autre: <div>1 situé au niveau le plus haut et <div>n au niveau le plus bas de la page. Pour modifier ce comportement, on utilise la proprièté de stylecss  » float » qui  spécifie de quel côté du conteneur, le bloc <div> doit s’aligner.  « float:left » pour un alignement à gauche et « float: right » pour un alignement à droite. La proprièté « clear » permet d’annuler l’alignement de float.

Si vous n’êtes pas encore familiarisés avec toutes ces notions, reportez vous au tutoriel sur le langage css qui donne des conseils bien adaptés. Pour la proprièté float, consultez l’article sur le Positionnement css qui traite un cas pratique et fournit des informations plus détaillées qui vous seront d’une grande utilité.

Une fois que vous avez sauvegardé votre fichier template_css.css nouvellement créé, rafraichissez l’écran de votre navigateur pour votre site « http://localhost/MonSitePerso/ ». Le résultat affiché montre dès le départ l’apport du fichier css :

Pour centrer l’ensemble de vos blocs, ajouter un bloc conteneur. Le corps  de votre fichier index.php devient (modifications en gras) :

<div id= « conteneur »>

<div id= »haut »>CONTENU BANNER</div>
<div id= »gauche »>CONTENU GAUCHE</div>
<div id= »centre »>CONTENU PRINCIPAL</div>
<div id= »droit »>CONTENU DROIT</div>
<div id= »bas »>CONTENU PIED DE PAGE</div>

</div>

Rappelez vous bien que le corps est entre les balises <body> et </body>.

Modifier  le fichier template (modifications en gras) :

div {
padding:0;
margin:0;
}

#conteneur {
width:800px;
margin: 0 auto;
}

#haut {
width:800px;
background-color: orange;
}
#gauche {
width:200px;
float:left;
background-color: olive;
}
#centre {
width:400px;
float:left;
background-color: silver;
}
#droit {
width:200px;
float:left;
background-color: aqua;
}
#bas {
clear:left;
width:800px;
background-color: gray;
}

La même fenêtre Notepad++ va vous servir pour l’édition des deux fichiers index.php et template_css.css; un onglet par fichier. Vous sauvegardez l’ensemble après modifications et rafraichissez la page sur votre navigateur pour voir le résultat : page bien centrée, cette fois ci.

En fait, « margin: 0 auto » définit les marges du bloc « conteneur » : une valeur nulle pour le  haut et le bas et auto (une même valeur calculée automatiquement) pour la droite  et la gauche. Ce qui permet de centrer l’ensemble dans la page.

Dans la suite, vous allez afficher du contenu fourni en standard avec l’installation de joomla.

Il ne vous reste plus qu’à configurer votre template avec les positions de modules et leurs CSS.

Plus d’info sur : http://www.apprendre-joomla.com/creation-template-9.html

0 Comments

  1. C’est ma première visite i temps ici. J’ai trouvé tellement de choses intéressantes sur votre blog en particulier sa discussion.

  2. danieladrienx 6 années Répondre

    Conseils tres interessants. A quand la suite?

    • Jeremy Ravouna 6 années Répondre

      Très bientôt 😉 Merci !

  3. Bubba 3 années Répondre

    Me dull. You smart. That’s just what I nedeed.