You are here: Documentation
Personal tools
Views

User Handbook/Getting Started/Designer/Customizing Templates/fr

From CMSMS

Table of Contents

This page in: English - Deutsch - Français - Svenska - Русский - Norsk - Polski - Nederlands - Español - Lietuvių

Personnaliser les gabarits par défaut

Tous les gabarits fournis par défaut avec "CMS Made Simple" contiennent plus ou moins le même code "HTML". La seule différence est le menu utilisé et, s'il y a un seul, ou plusieurs blocs de contenu. Le reste est purement stylé avec le "CSS".

C'est parce que les gabarits par défaut n'utilisent pas de tables. A la place, les balises <div> sont utilisées pour définir chaque bloc de contenu dans la page. Leurs positions et styles peuvent être personnalisés par le code "CSS".

Sur cette page, nous allons examiner le gabarit, pas à pas, pour expliquer ce que c'est et, ce que vous pouvez changer.

Le style et l'apparence sont donc modifiés dans les feuilles de style qui sont attachées à chaque gabarit.

Déclarer le "DOCTYPE" et spécifier la langue 

<!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="fr" lang="fr">

Ceci est le "DOCTYPE" (déclaration du type de document "HTML"). Il envoie l'information au navigateur quant à la version de "(X)HTML" que votre document utilise, pour que le navigateur l'interprète correctement. C'est aussi nécessaire pour les outils de validation qui vérifient votre code.

Les deux premières lignes restent (en général) telles quelles. Ce que vous pouvez être amené à changer, c'est la langue déclarée dans la balise <html>. C'est là que vous définissez la langue du contenu de votre page. Changez "en" et mettez le code à deux lettres de votre langue (p.ex "fr").

Pour plus d'information :

Balises d'en-tête 

<head>

<title>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>

Comment les personnaliser :

  • <title> -- Ce qui se trouve entre ces balises apparaîtra dans la barre de titre de votre navigateur.
  • {sitename} -- Le nom du site est défini dans "Administration du site" » "Paramètres Globaux".
  • {title} -- Si vous voulez également que le titre de chaque page apparaisse, vous pouvez ajouter cette balise. Elle sera remplacée par le titre de la page courante tel que défini dans "Contenu" » "Pages" » "Editer" / "Ajouter une page".
  • {stylesheet} -- C'est la balise qui relie toutes les feuilles de style que vous aurez attachées au gabarit. Ainsi, vous ajouter cette balise une seule fois et obtenez toutes les feuilles de style liées. Si vous l'oubliez, vos pages s'afficheront sans aucun style.
  • {metadata} -- Sera remplacée par toutes les méta données que vous définissez dans "Administration du site" » "Paramètres Globaux" pour les méta données globales. Viendront s'y ajouter, les méta données additionnelles que vous définissez par page dans l'onglet "Options" de "Contenu" » "Pages" » "Editer" / "Ajouter une page" (typiquement les mots-clefs et la description de la page).

Le bloc "pagewrapper" 

<body>

<div id="pagewrapper">

C'est le début du bloc <div> dans lequel toute la page est englobée. Dans la feuille de style, vous pouvez définir par exemple la largeur de la page, si elle est centrée, etc.

Comment le personnaliser :

  • Trouvez div#pagewrapper dans une des feuilles de style dont le nom commence par Layout.

L'en-tête 

   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />

L'en-tête de la page ("header"), c'est là où vous trouverez par exemple le logo de "CMS Made Simple". Il s'agit d'un contenu, ne pas confondre avec les balises <head> dans le code (que l'on doit plutôt voir, elles, comme un en-tête de fichier). Comme vous pouvez le constater, il n'y a aucune information (texte, image) dans le gabarit. Le contenu réel est défini dans la feuille de style. Ceci crée un code "HTML" propre. Cependant, si vous le désirez, vous pouvez également ajouter directement dans le gabarit du texte ou autre contenu que vous voulez voir apparaître dans l'en-tête.

Comment le personnaliser :

  • Trouvez div#header et div#header h1 a (pour le lien) dans une des feuilles de style dont le nom commence par Layout. C'est ici que vous pourrez définir la couleur du fond, le logo, la hauteur, etc.

Le "Fil d'Ariane" 

   <!-- Start Breadcrumbs -->
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   <!-- End Breadcrumbs -->

Les "Fils d'Ariane" (breadcrumbs) sont des liens qui montrent aux visiteurs où ils se trouvent et quelle est la hiérarchie de la page courante. Cela peut ressembler à quelque chose comme :

Accueil >> Page de chapitre >> Page de contenu

Dans "CMS Made Simple", il y a la balise {breadcrumbs} qui insère automatiquement le "Fil d'Ariane" pour chaque page.

Comment le personnaliser :

  • Comme vous le voyez, un certain nombre de paramètres optionnels peuvent être passés avec cette balise :
  • delimiter="&raquo;" -- Ce qui veut dire que le symbole utilisé pour délimiter les niveaux est le signe &raquo;.
  • initial='1' -- Qui signifie que le "Fil d'Ariane" débute avec le délimiteur. Si ce paramètre est omis, ou à 0, aucun délimiteur ne sera inséré avant le premier niveau.
  • Pour plus d'information à propos des "Fils d'Ariane" et l'utilisation de la balise {breadrumbs}, lisez le lien "Aide" dans "Extensions" » "Balises" du panneau d'administration.
  • La balise {breadcrumbs} peut aussi être personnalisée (stylée) via les CSS. Trouvez div.breadcrumbs dans une des feuilles de style dont le nom commence par Layout. Vous pourrez y modifier la police, le fond, etc.


Dans les gabarits par défaut, vous constaterez la présence d'autres balises de ce type. Cela évolue en fonction des versions de "CMSMS". Ces balises sont en général commentée (en anglais) dans le code source, ce qui vous permet d'en connaître l'utilité. Par ailleurs, rappelons que toutes les balises internes à "CMSMS" sont listées dans "Extensions" » "Balises" du panneau d'administration, où un lien "Aide" est disponible pour chacune d'elles.

Note : Il y a une vidéo flash (en anglais) qui montre comment convertir un template tel qu'on les trouve sur internet en un gabarit pour "CMS Made Simple" : http://cmsmadesimple.org/uploads/media/mint_chocolate.htm


This page in: English - Deutsch - Français - Svenska - Русский - Norsk - Polski - Nederlands - Español - Lietuvių

Retrieved from "http://wiki.cmsmadesimple.org/index.php/User_Handbook/Getting_Started/Designer/Customizing_Templates/fr"