SlideShare une entreprise Scribd logo
Personnaliser un site Internet – Joomla! 2.5 – Les templates




                                 Joomla!
                                 Les templates




                                                               1
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Adresses utiles

     APPRENDRE LE HTML

        http://www.creation-du-web.com/honolulu

        http://www.siteduzero.com

        http://fr.html.net

     LES FEUILLES DE STYLES

        http://www.yoyodesign.org

        http://zonecss.free.fr

        http://www.alsacreations.com

                                                               2
Personnaliser un site Internet – Joomla! 2.5 – Les templates


    Un template, c’est quoi ?



        Un template est un ensemble de règles mettant en forme le contenu
           (l’information).

        Il n’y a pas de contenu dans un template...




                                                                             3
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Un template, ça sert à quoi ?

     Ca sert à séparer le FOND de la FORME

     Le fond
     c'est tous les fichiers que composent Joomla (le noyau).

     La forme
     c'est votre template codé en html + css.

     Le système de template de joomla est très utile :
        le designer ne touche pas au code php et le programmeur ne touche pas au
          html.
        Vous allez sans doute modifier l'interface de votre site, les couleurs, les
          formes …
        Il sera beaucoup plus facile de modifier le template que le PHP



                                                                                       4
Personnaliser un site Internet – Joomla! 2.5 – Les templates


    Où trouver des templates ?

        http://www.rockettheme.com

        http://www.joomlart.com

        http://www.yootheme.com

        http://www.siteground.com

        http://www.joomlafrance.org

        http://www.joomlademos.de




                                                               5
Personnaliser un site Internet – Joomla! 2.5 – Les templates


    Comment c’est fait ?

  Mon template
  Mon template                         3 fichiers minimum :
                                          index.php : C'est la page principale de votre site web, c'est
        index.php                            dans index.php que vous définissez la position de vos
                                             modules.
        templateDetails.xml               template_thumbnail.png : miniature de prévisualisation du
                                             template dans la console administrateur, et aussi dans le
        template_preview.png                 module sélecteur du template partie visible de votre site.
                                             206 x 150 pixels / format png.
         template_thumbnail.png           templateDetails.xml : Contient tous les fichiers et dossiers
                                             du template, c'est le fichier qui permet d'installer votre
     CSS
     CSS                                     template depuis la console d'administration. Définit
                                             également des paramêtres accessibles et réglables depuis
              template.css                   l’administration

              index.html               3 dossiers :
                                          images : Les images de votre site.
    images
     images                               css : Le ou les fichiers css de votre site.
                                          html : Les fichiers d’affichage de certains composants ou
              Logo.png                      modules (override)

              index.html
                                                                                                           6
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Comment adapter un template ?

     Les outils :

        Un éditeur de HTML (Dreamweaver, NVU,…) ou un éditeur de texte
           (Notepad++, …)

        Un éditeur d’images (Photoshop, Photofiltre, The Gimp,…)

        Plusieurs navigateurs (Firefox, Internet Explorer,…)

        Firefox et des extensions (WebDeveloper, Firebug,…)

        Un serveur local (EasyPHP, Wamp, Xamp,…)




                                                                          7
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Exemple

    Méthode :
      1. Créez un dossier dans le dossier templates de votre site : appelez le
         "mon_template "

       2. Créez un dossier CSS

       3. Créez un dossier image

       4. Un fichier templateDetails.xml : enregistrez le à la racine de votre template.

       5. Un fichier index.php que vous enregistrez à la racine de votre template.

       6. Un fichier template.css que vous enregistrez dans le dossier CSS.




                                                                                           8
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Le fichier d’installation

     Le fichier templateDetails.xml
     <?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 l'installation du
      template, le dossier sera crée avec le nom du template.
     <creationDate>avril 2012</creationDate>
             <author>Moi</author>
             <authorEmail>moi@monsite.fr</authorEmail>
             <authorUrl>http://www.monsite.fr</authorUrl>
             <copyright>Copyright (C) joomla.buldozer.fr</copyright>
             <license>GNU General Public License version 2 ou superieure</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>
                                                                                                                  9
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Les principaux éléments de votre template

     Le fichier index.php
       1. Joomla s'assure qu’on n’accède pas au fichier directement
           <?php defined('_JEXEC') or die;?>


       2. Doctype
           <!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>

                Voir http://www.pompage.net/pompe/doctype




                                                                              10
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Les principaux éléments de votre template

     Le fichier index.php
       3. Déclare l'encodage de la page
     <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />


       3. Permet d'afficher aux moteur de recherche le titre et meta de votre site

                                     <jdoc:include type="head" />




 <title>Welcome to the Frontpage</title>
 <meta name="description" content="Joomla! -the dynamic portal engine and
 content management system" />
 <metaname="generator" content="Joomla! 2.5 -Open Source Content Management" />
 <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="robots" content="index, follow" />
 <metaname="keywords" content="joomla, Joomla" />


            …                                                                        11
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Les principaux éléments de votre template

     Le fichier index.php
       6. Déclaration du CSS et son emplacement
          Les CSS système :

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


          Le CSS du template :
 <link rel="stylesheet" href="<?php echo$this->baseurl ?>/templates/<?php echo $this-
 >template ?>/css/template.css" type="text/css" />


                       <?php echo $this->baseurl ?>  url de base du site
                       <?php echo $this->template ?>  nom du template


       7. </head> : On ferme la commande head

       8. <body> : On ouvre body, la partie central de la page

                                                                                               12
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Les variables de Joomla!

        modules
        <jdoc:include type="modules" name="LOCATION" style="OPTION" />

           Exemple :
       <jdoc:include type="modules" name="position-1" style="xhtml" />



     Les différentes options des modules sont définies dans
            templates/system/html/modules.php




                          Attention ! La syntaxe est à respecter strictement




                                                                                13
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Les variables de Joomla!

        modules
           <jdoc:include type="modules" name="LOCATION" style="OPTION" />


     Joomla utilise 2 façons de nommer les emplacements pour vos modules, en voici
      quelques uns les plus utilisés :
            left                    position-0
            right                   position-1                   Vous pouvez utiliser les
            top                     position-2
                                                                noms que vous souhaitez
            bottom                  position-3
            inset                   position-4
            banner                  position-5
            header                  position-6
            footer                  position-7
            newsflash               position-8
            legals                  position-9
            breadcrumb              position-10
            …                       …




                                                                                            14
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Les variables de Joomla!

        modules
           <jdoc:include type="modules" name="LOCATION" style="OPTION" />


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

     horz: table horizontale

     Xhtml :
                <div class="moduletable<?phpecho $params->get('moduleclass_sfx'); ?>">
                          <?php if ($module->showtitle!= 0) : ?>
                          <h3><?php echo $module->title; ?></h3>
                          <?php endif; ?>
                          <?php echo $module->content; ?>
                </div>

     rounded: 4 div imbriqués

     none : affichage brut du contenu.

                                                                                               15
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Les variables de Joomla!


        contenu de votre site

                      <jdoc:include type="component" style="xhtml" />

     Cette ligne indique que l'on va afficher le texte (component) dans le bloc principal




                                                                                             16
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Exemple

    Le fichier d’aperçu :

       1. Faites une capture d'écran de votre template

       2. Ouvrez votre capture dans votre logiciel d'image

       3. Réduisez celle-ci en 640 x 350 pixels

       4. Enregistrez-sous template_preview.png à la racine du template.

       5. Réduisez celle-ci en 206 x 150 pixels

       6. Enregistrez-sous template_thumbnail.png à la racine du template.



                                                                             17
Personnaliser un site Internet – Joomla! 2.5 – Les templates


     Les paramètres

     Le fichier templateDetails.xml
     <params>
          <param name="template_width" type="list" default="fluid" label="Template Width"
          description="Width style of the template">
               <option value="fluid">Fluid with maximum and minimum</option>
               <option value="medium">Medium</option>
               <option value="small">Small</option>
          </param>
     </params>

        Détermine différents réglages du template depuis l’admin.


     Utilisation dans l’index.php :
             $this->params->get(‘template_width’);




                                                                                            18
Personnaliser un site Internet – Joomla! 2.5 – Les templates


    Installer le template dans le site


       1. Créez une archive .zip contenant tous les fichiers du template

       2. Dans votre Joomla!, allez dans Extensions > Gestion des extensions

       3. Installez votre template comme n’importe quelle extension




                                                                               19
Personnaliser un site Internet – Joomla! 2.5 – Les templates


    Les raisons pour lesquelles ça ne pourrait pas fonctionner

       1. Le template refuse de s’installer, une erreur s’affiche dans l’administration
           = Le fichier XML comporte des erreurs

                Vérifiez la syntaxe : toutes les balises ouvertes doivent être fermées

                Les informations obligatoires du template sont mal renseignées dans les
                 premières lignes du fichier

                Des noms de fichiers / répertoires sont écrits alors qu’ils n’existent pas

       1. Le template s’est bien installé mais des erreurs d’affichage apparaissent dans le site
                Des positions de modules / composant manquent

                La syntaxe des positions est fausse

                Les classes css ne sont pas correctes

                Les chemins vers les fichiers css et/ou images ne sont pas corrects



                                                                                                   20
Personnaliser un site Internet – Joomla! 2.5 – Les templates


    Nos formations




                        Plus d’informations sur http://6ble.com/formations




                                                                             21

Contenu connexe

Tendances

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
 
Guide de l'administration Wordpress
Guide de l'administration WordpressGuide de l'administration Wordpress
Guide de l'administration Wordpress
Com'3elles - www.com3elles.com
 
Joomla 4-les-nouveautes par Com3elles
Joomla 4-les-nouveautes par Com3ellesJoomla 4-les-nouveautes par Com3elles
Joomla 4-les-nouveautes par Com3elles
Com'3elles - www.com3elles.com
 
Prise en main de Joomla
Prise en main de JoomlaPrise en main de Joomla
Prise en main de Joomla
Abdoulaye Dieng
 
Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4
Jamel Eddine Zarga
 
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Claude BUENO
 
Presentation joomla
Presentation joomlaPresentation joomla
Presentation joomla
Cynapsys It Hotspot
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
Voyelle Voyelle
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
Daniel GUEYSSET
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
François Huynh
 
Formation wordpress
Formation wordpressFormation wordpress
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
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
MOHAMMED MOURADI
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
Erwan Tanguy
 
Comment devenir un Testeur Joomla!
Comment devenir un Testeur Joomla!Comment devenir un Testeur Joomla!
Comment devenir un Testeur Joomla!
Marc DECHEVRE
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
michel.titeux
 
Guide d'utilisation site colibri ville
Guide d'utilisation   site colibri villeGuide d'utilisation   site colibri ville
Guide d'utilisation site colibri ville
Peggy Le Déaut ☂️
 
Tutoriel SPIP
Tutoriel SPIPTutoriel SPIP
Tutoriel SPIP
Cyberco
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
Erwan Tanguy
 
Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)
Médiathèque Gaston Baissette à Mauguio
 

Tendances (20)

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
 
Guide de l'administration Wordpress
Guide de l'administration WordpressGuide de l'administration Wordpress
Guide de l'administration Wordpress
 
Joomla 4-les-nouveautes par Com3elles
Joomla 4-les-nouveautes par Com3ellesJoomla 4-les-nouveautes par Com3elles
Joomla 4-les-nouveautes par Com3elles
 
Prise en main de Joomla
Prise en main de JoomlaPrise en main de Joomla
Prise en main de Joomla
 
Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4
 
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
 
Presentation joomla
Presentation joomlaPresentation joomla
Presentation joomla
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
 
Formation wordpress
Formation wordpressFormation wordpress
Formation wordpress
 
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
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
 
Comment devenir un Testeur Joomla!
Comment devenir un Testeur Joomla!Comment devenir un Testeur Joomla!
Comment devenir un Testeur Joomla!
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
 
Guide d'utilisation site colibri ville
Guide d'utilisation   site colibri villeGuide d'utilisation   site colibri ville
Guide d'utilisation site colibri ville
 
Tutoriel SPIP
Tutoriel SPIPTutoriel SPIP
Tutoriel SPIP
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
 
Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)
 

En vedette

Etude AT Internet - Tendances du Web
Etude AT Internet - Tendances du WebEtude AT Internet - Tendances du Web
Etude AT Internet - Tendances du Web
PXNetwork
 
Presentation jdll
Presentation jdllPresentation jdll
Presentation jdll
FusionDirectory
 
France Marchés - Le portail des appels d'offres
France Marchés - Le portail des appels d'offresFrance Marchés - Le portail des appels d'offres
France Marchés - Le portail des appels d'offres
FranceMarches
 
Intro technos-reseau
Intro technos-reseauIntro technos-reseau
Intro technos-reseau
tsdi2011
 
Support de cours_et_t.d._reseaux_dacces
Support de cours_et_t.d._reseaux_daccesSupport de cours_et_t.d._reseaux_dacces
Support de cours_et_t.d._reseaux_dacces
Mido Lacoste
 
Boucle locale et_reseau_optique_optronique
Boucle locale et_reseau_optique_optroniqueBoucle locale et_reseau_optique_optronique
Boucle locale et_reseau_optique_optronique
constyfan21
 
Vivenci Energies
Vivenci EnergiesVivenci Energies
Vivenci Energies
Vivenci Energies
 
Edgar allan poe analisis biografico
Edgar allan poe  analisis biograficoEdgar allan poe  analisis biografico
Edgar allan poe analisis biografico
ramonamedina
 
Europe Information Jeunesse n°44 - La lettre du réseau Eurodesk en France
Europe Information Jeunesse n°44 - La lettre du réseau Eurodesk en FranceEurope Information Jeunesse n°44 - La lettre du réseau Eurodesk en France
Europe Information Jeunesse n°44 - La lettre du réseau Eurodesk en France
CIDJ
 
El ensayo
El ensayoEl ensayo
El ensayo
Jennypaya
 
Presentation Emgoldex-Goldxteam 2014(Français)
Presentation Emgoldex-Goldxteam 2014(Français)Presentation Emgoldex-Goldxteam 2014(Français)
Presentation Emgoldex-Goldxteam 2014(Français)
Goldexteam
 
Restitution publique diagnostic-territoirealimentationdurable_cc_chaise-dieu_...
Restitution publique diagnostic-territoirealimentationdurable_cc_chaise-dieu_...Restitution publique diagnostic-territoirealimentationdurable_cc_chaise-dieu_...
Restitution publique diagnostic-territoirealimentationdurable_cc_chaise-dieu_...
ANISetoile
 
Angelina analisis estructural
Angelina analisis estructuralAngelina analisis estructural
Angelina analisis estructural
ramonamedina
 
Analisis de-ciclo-de-vida-ambiental
Analisis de-ciclo-de-vida-ambientalAnalisis de-ciclo-de-vida-ambiental
Analisis de-ciclo-de-vida-ambiental
heroesboy07
 
Slide
SlideSlide
Slide
andrea0893
 
Plaquette profiler de talents
Plaquette profiler de talentsPlaquette profiler de talents
Plaquette profiler de talents
virgflg
 
Las matemáticas ...
Las matemáticas ...Las matemáticas ...
Las matemáticas ...
Victor Avendaño
 
Papilons mus e vert 2012 1
Papilons mus e vert 2012  1Papilons mus e vert 2012  1
Papilons mus e vert 2012 1
jaco49
 
·Cátalogo Empresas Zafiro
·Cátalogo Empresas Zafiro·Cátalogo Empresas Zafiro
·Cátalogo Empresas Zafiro
Jon Ander Landaluce
 

En vedette (20)

Etude AT Internet - Tendances du Web
Etude AT Internet - Tendances du WebEtude AT Internet - Tendances du Web
Etude AT Internet - Tendances du Web
 
Presentation jdll
Presentation jdllPresentation jdll
Presentation jdll
 
France Marchés - Le portail des appels d'offres
France Marchés - Le portail des appels d'offresFrance Marchés - Le portail des appels d'offres
France Marchés - Le portail des appels d'offres
 
Intro technos-reseau
Intro technos-reseauIntro technos-reseau
Intro technos-reseau
 
Support de cours_et_t.d._reseaux_dacces
Support de cours_et_t.d._reseaux_daccesSupport de cours_et_t.d._reseaux_dacces
Support de cours_et_t.d._reseaux_dacces
 
Boucle locale et_reseau_optique_optronique
Boucle locale et_reseau_optique_optroniqueBoucle locale et_reseau_optique_optronique
Boucle locale et_reseau_optique_optronique
 
Vivenci Energies
Vivenci EnergiesVivenci Energies
Vivenci Energies
 
Edgar allan poe analisis biografico
Edgar allan poe  analisis biograficoEdgar allan poe  analisis biografico
Edgar allan poe analisis biografico
 
Europe Information Jeunesse n°44 - La lettre du réseau Eurodesk en France
Europe Information Jeunesse n°44 - La lettre du réseau Eurodesk en FranceEurope Information Jeunesse n°44 - La lettre du réseau Eurodesk en France
Europe Information Jeunesse n°44 - La lettre du réseau Eurodesk en France
 
El ensayo
El ensayoEl ensayo
El ensayo
 
Presentation Emgoldex-Goldxteam 2014(Français)
Presentation Emgoldex-Goldxteam 2014(Français)Presentation Emgoldex-Goldxteam 2014(Français)
Presentation Emgoldex-Goldxteam 2014(Français)
 
Restitution publique diagnostic-territoirealimentationdurable_cc_chaise-dieu_...
Restitution publique diagnostic-territoirealimentationdurable_cc_chaise-dieu_...Restitution publique diagnostic-territoirealimentationdurable_cc_chaise-dieu_...
Restitution publique diagnostic-territoirealimentationdurable_cc_chaise-dieu_...
 
Angelina analisis estructural
Angelina analisis estructuralAngelina analisis estructural
Angelina analisis estructural
 
Analisis de-ciclo-de-vida-ambiental
Analisis de-ciclo-de-vida-ambientalAnalisis de-ciclo-de-vida-ambiental
Analisis de-ciclo-de-vida-ambiental
 
Slide
SlideSlide
Slide
 
France soir
France soirFrance soir
France soir
 
Plaquette profiler de talents
Plaquette profiler de talentsPlaquette profiler de talents
Plaquette profiler de talents
 
Las matemáticas ...
Las matemáticas ...Las matemáticas ...
Las matemáticas ...
 
Papilons mus e vert 2012 1
Papilons mus e vert 2012  1Papilons mus e vert 2012  1
Papilons mus e vert 2012 1
 
·Cátalogo Empresas Zafiro
·Cátalogo Empresas Zafiro·Cátalogo Empresas Zafiro
·Cátalogo Empresas Zafiro
 

Similaire à Créer un template pour Joomla 2.5

WordPress
WordPressWordPress
WordPress
Thomas Bodin
 
Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0
Faiz Morchid
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
RihabBENLAMINE
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)
Laurent Moccozet
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
ssuser1a62e1
 
Formation joomla 1ere_session
Formation joomla 1ere_sessionFormation joomla 1ere_session
Formation joomla 1ere_session
Ahmed Seye
 
SPIP
SPIPSPIP
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
Florence Labord Moodle
Florence Labord  MoodleFlorence Labord  Moodle
Florence Labord Moodle
Walibi
 
Référencer son site Joomla!
Référencer son site Joomla!Référencer son site Joomla!
Référencer son site Joomla!
Thierry Broussegoutte
 
Les bases de Joomla 1.5
Les bases de Joomla 1.5Les bases de Joomla 1.5
Les bases de Joomla 1.5
laurentber
 
Les bases de JOOMLA
Les bases de JOOMLALes bases de JOOMLA
Les bases de JOOMLA
laurentber
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
Frédéric Simonet
 
Présentation CMS ( Joomla )
Présentation CMS ( Joomla )Présentation CMS ( Joomla )
Présentation CMS ( Joomla )
Gaspar Daniel
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
Adyax
 
Fondamentaux des CMS
Fondamentaux des CMSFondamentaux des CMS
Fondamentaux des CMS
Frédéric Simonet
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
IbrahimaBarry49
 

Similaire à Créer un template pour Joomla 2.5 (20)

WordPress
WordPressWordPress
WordPress
 
Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
 
Formation joomla 1ere_session
Formation joomla 1ere_sessionFormation joomla 1ere_session
Formation joomla 1ere_session
 
SPIP
SPIPSPIP
SPIP
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Florence Labord Moodle
Florence Labord  MoodleFlorence Labord  Moodle
Florence Labord Moodle
 
Référencer son site Joomla!
Référencer son site Joomla!Référencer son site Joomla!
Référencer son site Joomla!
 
Les bases de Joomla 1.5
Les bases de Joomla 1.5Les bases de Joomla 1.5
Les bases de Joomla 1.5
 
Les bases de JOOMLA
Les bases de JOOMLALes bases de JOOMLA
Les bases de JOOMLA
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
 
Présentation CMS ( Joomla )
Présentation CMS ( Joomla )Présentation CMS ( Joomla )
Présentation CMS ( Joomla )
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Fondamentaux des CMS
Fondamentaux des CMSFondamentaux des CMS
Fondamentaux des CMS
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
 

Plus de Com'3elles - www.com3elles.com

RGPD, ami ou ennemi ?
RGPD, ami ou ennemi ?RGPD, ami ou ennemi ?
RGPD, ami ou ennemi ?
Com'3elles - www.com3elles.com
 
Bien sécuriser et gérer ses données
Bien sécuriser et gérer ses donnéesBien sécuriser et gérer ses données
Bien sécuriser et gérer ses données
Com'3elles - www.com3elles.com
 
La communication numérique : Internet et réseaux sociaux
La communication numérique : Internet et réseaux sociauxLa communication numérique : Internet et réseaux sociaux
La communication numérique : Internet et réseaux sociaux
Com'3elles - www.com3elles.com
 
Aller sur les réseaux sociaux (mai 2015)
Aller sur les réseaux sociaux (mai 2015)Aller sur les réseaux sociaux (mai 2015)
Aller sur les réseaux sociaux (mai 2015)
Com'3elles - www.com3elles.com
 
Nouveautés de Flexicontent 3 JoomlaDay France 2015
Nouveautés de Flexicontent 3 JoomlaDay France 2015Nouveautés de Flexicontent 3 JoomlaDay France 2015
Nouveautés de Flexicontent 3 JoomlaDay France 2015
Com'3elles - www.com3elles.com
 
Atelier template creator Joomladay France 2014
Atelier template creator Joomladay France 2014Atelier template creator Joomladay France 2014
Atelier template creator Joomladay France 2014
Com'3elles - www.com3elles.com
 
Stratégie de contenus & SEO, gagner du trafic qualifié et de la visibilité
Stratégie de contenus & SEO, gagner du trafic qualifié et de la visibilitéStratégie de contenus & SEO, gagner du trafic qualifié et de la visibilité
Stratégie de contenus & SEO, gagner du trafic qualifié et de la visibilité
Com'3elles - www.com3elles.com
 
Comment construire un compte Twitter et une page Facebook Professionnels ?
Comment construire un compte Twitter et une page Facebook Professionnels ?Comment construire un compte Twitter et une page Facebook Professionnels ?
Comment construire un compte Twitter et une page Facebook Professionnels ?
Com'3elles - www.com3elles.com
 
Mise en production d'un site : gérer sa comm (Joomladay 2012)
Mise en production d'un site : gérer sa comm (Joomladay 2012)Mise en production d'un site : gérer sa comm (Joomladay 2012)
Mise en production d'un site : gérer sa comm (Joomladay 2012)
Com'3elles - www.com3elles.com
 
Comment préparer un projet adapté à ses besoins et durable sous Joomla ?
Comment préparer un projet adapté à ses besoins et durable sous Joomla ?Comment préparer un projet adapté à ses besoins et durable sous Joomla ?
Comment préparer un projet adapté à ses besoins et durable sous Joomla ?
Com'3elles - www.com3elles.com
 
Communiquer quand on est une petite entreprise
Communiquer quand on est une petite entrepriseCommuniquer quand on est une petite entreprise
Communiquer quand on est une petite entreprise
Com'3elles - www.com3elles.com
 
Les outils du Web 2.0 pour les TPE / PME
Les outils du Web 2.0 pour les TPE / PMELes outils du Web 2.0 pour les TPE / PME
Les outils du Web 2.0 pour les TPE / PME
Com'3elles - www.com3elles.com
 
10 idees reçues sur le e-business
10 idees reçues sur le e-business10 idees reçues sur le e-business
10 idees reçues sur le e-business
Com'3elles - www.com3elles.com
 
Administration joomla2 5
Administration joomla2 5Administration joomla2 5
Administration joomla2 5
Com'3elles - www.com3elles.com
 

Plus de Com'3elles - www.com3elles.com (14)

RGPD, ami ou ennemi ?
RGPD, ami ou ennemi ?RGPD, ami ou ennemi ?
RGPD, ami ou ennemi ?
 
Bien sécuriser et gérer ses données
Bien sécuriser et gérer ses donnéesBien sécuriser et gérer ses données
Bien sécuriser et gérer ses données
 
La communication numérique : Internet et réseaux sociaux
La communication numérique : Internet et réseaux sociauxLa communication numérique : Internet et réseaux sociaux
La communication numérique : Internet et réseaux sociaux
 
Aller sur les réseaux sociaux (mai 2015)
Aller sur les réseaux sociaux (mai 2015)Aller sur les réseaux sociaux (mai 2015)
Aller sur les réseaux sociaux (mai 2015)
 
Nouveautés de Flexicontent 3 JoomlaDay France 2015
Nouveautés de Flexicontent 3 JoomlaDay France 2015Nouveautés de Flexicontent 3 JoomlaDay France 2015
Nouveautés de Flexicontent 3 JoomlaDay France 2015
 
Atelier template creator Joomladay France 2014
Atelier template creator Joomladay France 2014Atelier template creator Joomladay France 2014
Atelier template creator Joomladay France 2014
 
Stratégie de contenus & SEO, gagner du trafic qualifié et de la visibilité
Stratégie de contenus & SEO, gagner du trafic qualifié et de la visibilitéStratégie de contenus & SEO, gagner du trafic qualifié et de la visibilité
Stratégie de contenus & SEO, gagner du trafic qualifié et de la visibilité
 
Comment construire un compte Twitter et une page Facebook Professionnels ?
Comment construire un compte Twitter et une page Facebook Professionnels ?Comment construire un compte Twitter et une page Facebook Professionnels ?
Comment construire un compte Twitter et une page Facebook Professionnels ?
 
Mise en production d'un site : gérer sa comm (Joomladay 2012)
Mise en production d'un site : gérer sa comm (Joomladay 2012)Mise en production d'un site : gérer sa comm (Joomladay 2012)
Mise en production d'un site : gérer sa comm (Joomladay 2012)
 
Comment préparer un projet adapté à ses besoins et durable sous Joomla ?
Comment préparer un projet adapté à ses besoins et durable sous Joomla ?Comment préparer un projet adapté à ses besoins et durable sous Joomla ?
Comment préparer un projet adapté à ses besoins et durable sous Joomla ?
 
Communiquer quand on est une petite entreprise
Communiquer quand on est une petite entrepriseCommuniquer quand on est une petite entreprise
Communiquer quand on est une petite entreprise
 
Les outils du Web 2.0 pour les TPE / PME
Les outils du Web 2.0 pour les TPE / PMELes outils du Web 2.0 pour les TPE / PME
Les outils du Web 2.0 pour les TPE / PME
 
10 idees reçues sur le e-business
10 idees reçues sur le e-business10 idees reçues sur le e-business
10 idees reçues sur le e-business
 
Administration joomla2 5
Administration joomla2 5Administration joomla2 5
Administration joomla2 5
 

Créer un template pour Joomla 2.5

  • 1. Personnaliser un site Internet – Joomla! 2.5 – Les templates Joomla! Les templates 1
  • 2. Personnaliser un site Internet – Joomla! 2.5 – Les templates Adresses utiles  APPRENDRE LE HTML  http://www.creation-du-web.com/honolulu  http://www.siteduzero.com  http://fr.html.net  LES FEUILLES DE STYLES  http://www.yoyodesign.org  http://zonecss.free.fr  http://www.alsacreations.com 2
  • 3. Personnaliser un site Internet – Joomla! 2.5 – Les templates Un template, c’est quoi ?  Un template est un ensemble de règles mettant en forme le contenu (l’information).  Il n’y a pas de contenu dans un template... 3
  • 4. Personnaliser un site Internet – Joomla! 2.5 – Les templates Un template, ça sert à quoi ?  Ca sert à séparer le FOND de la FORME  Le fond  c'est tous les fichiers que composent Joomla (le noyau).  La forme  c'est votre template codé en html + css.  Le système de template de joomla est très utile :  le designer ne touche pas au code php et le programmeur ne touche pas au html.  Vous allez sans doute modifier l'interface de votre site, les couleurs, les formes …  Il sera beaucoup plus facile de modifier le template que le PHP 4
  • 5. Personnaliser un site Internet – Joomla! 2.5 – Les templates Où trouver des templates ?  http://www.rockettheme.com  http://www.joomlart.com  http://www.yootheme.com  http://www.siteground.com  http://www.joomlafrance.org  http://www.joomlademos.de 5
  • 6. Personnaliser un site Internet – Joomla! 2.5 – Les templates Comment c’est fait ? Mon template Mon template  3 fichiers minimum :  index.php : C'est la page principale de votre site web, c'est index.php dans index.php que vous définissez la position de vos modules. templateDetails.xml  template_thumbnail.png : miniature de prévisualisation du template dans la console administrateur, et aussi dans le template_preview.png module sélecteur du template partie visible de votre site. 206 x 150 pixels / format png. template_thumbnail.png  templateDetails.xml : Contient tous les fichiers et dossiers du template, c'est le fichier qui permet d'installer votre CSS CSS template depuis la console d'administration. Définit également des paramêtres accessibles et réglables depuis template.css l’administration index.html  3 dossiers :  images : Les images de votre site. images images  css : Le ou les fichiers css de votre site.  html : Les fichiers d’affichage de certains composants ou Logo.png modules (override) index.html 6
  • 7. Personnaliser un site Internet – Joomla! 2.5 – Les templates Comment adapter un template ?  Les outils :  Un éditeur de HTML (Dreamweaver, NVU,…) ou un éditeur de texte (Notepad++, …)  Un éditeur d’images (Photoshop, Photofiltre, The Gimp,…)  Plusieurs navigateurs (Firefox, Internet Explorer,…)  Firefox et des extensions (WebDeveloper, Firebug,…)  Un serveur local (EasyPHP, Wamp, Xamp,…) 7
  • 8. Personnaliser un site Internet – Joomla! 2.5 – Les templates Exemple  Méthode : 1. Créez un dossier dans le dossier templates de votre site : appelez le "mon_template " 2. Créez un dossier CSS 3. Créez un dossier image 4. Un fichier templateDetails.xml : enregistrez le à la racine de votre template. 5. Un fichier index.php que vous enregistrez à la racine de votre template. 6. Un fichier template.css que vous enregistrez dans le dossier CSS. 8
  • 9. Personnaliser un site Internet – Joomla! 2.5 – Les templates Le fichier d’installation  Le fichier templateDetails.xml  <?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 l'installation du template, le dossier sera crée avec le nom du template.  <creationDate>avril 2012</creationDate> <author>Moi</author> <authorEmail>moi@monsite.fr</authorEmail> <authorUrl>http://www.monsite.fr</authorUrl> <copyright>Copyright (C) joomla.buldozer.fr</copyright> <license>GNU General Public License version 2 ou superieure</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> 9
  • 10. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les principaux éléments de votre template  Le fichier index.php 1. Joomla s'assure qu’on n’accède pas au fichier directement <?php defined('_JEXEC') or die;?> 2. Doctype <!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> Voir http://www.pompage.net/pompe/doctype 10
  • 11. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les principaux éléments de votre template  Le fichier index.php 3. Déclare l'encodage de la page <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> 3. Permet d'afficher aux moteur de recherche le titre et meta de votre site <jdoc:include type="head" /> <title>Welcome to the Frontpage</title> <meta name="description" content="Joomla! -the dynamic portal engine and content management system" /> <metaname="generator" content="Joomla! 2.5 -Open Source Content Management" /> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <metaname="keywords" content="joomla, Joomla" /> … 11
  • 12. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les principaux éléments de votre template  Le fichier index.php 6. Déclaration du CSS et son emplacement  Les CSS système : <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" />  Le CSS du template : <link rel="stylesheet" href="<?php echo$this->baseurl ?>/templates/<?php echo $this- >template ?>/css/template.css" type="text/css" />  <?php echo $this->baseurl ?>  url de base du site  <?php echo $this->template ?>  nom du template 7. </head> : On ferme la commande head 8. <body> : On ouvre body, la partie central de la page 12
  • 13. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les variables de Joomla!  modules <jdoc:include type="modules" name="LOCATION" style="OPTION" /> Exemple : <jdoc:include type="modules" name="position-1" style="xhtml" />  Les différentes options des modules sont définies dans templates/system/html/modules.php  Attention ! La syntaxe est à respecter strictement 13
  • 14. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les variables de Joomla!  modules <jdoc:include type="modules" name="LOCATION" style="OPTION" />  Joomla utilise 2 façons de nommer les emplacements pour vos modules, en voici quelques uns les plus utilisés : left position-0 right position-1 Vous pouvez utiliser les top position-2 noms que vous souhaitez bottom position-3 inset position-4 banner position-5 header position-6 footer position-7 newsflash position-8 legals position-9 breadcrumb position-10 … … 14
  • 15. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les variables de Joomla!  modules <jdoc:include type="modules" name="LOCATION" style="OPTION" />  table : <table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params- >get('moduleclass_sfx'); ?>"> <?php if ($module->showtitle!= 0) : ?> <tr> <th valign="top«> <?php echo $module->title; ?></th></tr> <?php endif; ?> <tr> <td><?php echo $module->content; ?></td> </tr> </table>  horz: table horizontale  Xhtml : <div class="moduletable<?phpecho $params->get('moduleclass_sfx'); ?>"> <?php if ($module->showtitle!= 0) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div>  rounded: 4 div imbriqués  none : affichage brut du contenu. 15
  • 16. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les variables de Joomla!  contenu de votre site <jdoc:include type="component" style="xhtml" />  Cette ligne indique que l'on va afficher le texte (component) dans le bloc principal 16
  • 17. Personnaliser un site Internet – Joomla! 2.5 – Les templates Exemple  Le fichier d’aperçu : 1. Faites une capture d'écran de votre template 2. Ouvrez votre capture dans votre logiciel d'image 3. Réduisez celle-ci en 640 x 350 pixels 4. Enregistrez-sous template_preview.png à la racine du template. 5. Réduisez celle-ci en 206 x 150 pixels 6. Enregistrez-sous template_thumbnail.png à la racine du template. 17
  • 18. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les paramètres  Le fichier templateDetails.xml  <params> <param name="template_width" type="list" default="fluid" label="Template Width" description="Width style of the template"> <option value="fluid">Fluid with maximum and minimum</option> <option value="medium">Medium</option> <option value="small">Small</option> </param>  </params>  Détermine différents réglages du template depuis l’admin.  Utilisation dans l’index.php : $this->params->get(‘template_width’); 18
  • 19. Personnaliser un site Internet – Joomla! 2.5 – Les templates Installer le template dans le site 1. Créez une archive .zip contenant tous les fichiers du template 2. Dans votre Joomla!, allez dans Extensions > Gestion des extensions 3. Installez votre template comme n’importe quelle extension 19
  • 20. Personnaliser un site Internet – Joomla! 2.5 – Les templates Les raisons pour lesquelles ça ne pourrait pas fonctionner 1. Le template refuse de s’installer, une erreur s’affiche dans l’administration = Le fichier XML comporte des erreurs  Vérifiez la syntaxe : toutes les balises ouvertes doivent être fermées  Les informations obligatoires du template sont mal renseignées dans les premières lignes du fichier  Des noms de fichiers / répertoires sont écrits alors qu’ils n’existent pas 1. Le template s’est bien installé mais des erreurs d’affichage apparaissent dans le site  Des positions de modules / composant manquent  La syntaxe des positions est fausse  Les classes css ne sont pas correctes  Les chemins vers les fichiers css et/ou images ne sont pas corrects 20
  • 21. Personnaliser un site Internet – Joomla! 2.5 – Les templates Nos formations Plus d’informations sur http://6ble.com/formations 21