Gabarits

Alors comment créer un gabarit avec "CMS Made Simple" ? C'est plutôt simple. Vous utilisez du code "HTML" pur, et placez les zones de contenu, le menu, etc, grâce aux balises adéquates. Quand un utilisateur visite votre site, la page est automatiquement générée depuis le gabarit, et les différentes zones marquées par les balises sont remplies du contenu lui-même. Pour vous faire une idée, regardez comment sont construits les gabarits fournis par défaut.

Cela veut dire que vous pouvez vous inspirer de la disposition d'une page que vous aimez et simplement en faire un gabarit pour les pages "CMS Made Simple".

Note importante : Attention, l'interface graphique d'un site (gabarits + CSS) est une œuvre au sens de la règlementation sur les droits d'auteur. Sous peines de poursuites, vous ne pouvez copiez que les gabarits "libres de droits" (Open source) et, en respectant les termes de la licence sous laquelle ils sont publiés (il y a parfois des restrictions : statut ou type du site utilisateur, obligation d'un lien vers le site de l'auteur, modifications non permises, distribution...) !

Balises utilisées couramment dans les gabarits "CMS Made Simple"

Voici les balises (ou "tags") les plus usuelles à placer dans un gabarit (telles quelles, en anglais). Il ne s'agit pas ici de code "HTML", mais de balises spécifiques à "Smarty" le moteur de templates PHP utilisé par "CMSMS". Elles remplacent à elles seules tout un ensemble de code "HTML", ce qui est particulièrement pratique.
Des modifications peuvent être apportée par les versions consulter l'aide dans la partie Administration, menu Extension puis Balises

{sitename} -- Ajoutera le nom du site, défini dans "Administration du site" » "Paramètres Globaux"
{title} -- Le titre. Cette balise sera remplacée par le titre du contenu (vous définissez le titre quand vous créez une page dans "Contenu" » "Pages").
{stylesheet} -- Feuille de style. Cette balise doit se trouver entre les balises <head>. Elle lie toutes les feuilles de style que vous aurez attachées à votre gabarit. Si vous l'omettez, votre page apparaîtra sans style. Si vous désirez utiliser des feuilles de style externes, vous pouvez aussi insérer un <link/> standard dans l'en-tête (obsolète à partir de version 1.8).
- NOTA : La balise {stylesheet} est remplacée par {cms_stylesheet} à partir de la version 1.8. Cette nouvelle balise permet d'utiliser des variables Smarty comme $red pour indiquer une couleur, et le changement se fera via votre mise en page. Cette nouvelle balise exige que le chemin des images soit root_url/dossier_images (exemple root_url/uploads/ngrey/body.png), car les feuilles de style seront mis en cache. (voir l'aide dans la partie Administration, menu Extension puis Balises).
{metadata} -- Ajoutera les métadonnées, définies dans "Administration du site" » "Paramètres Globaux". Cette balise est également à placer entre les balises <head>. Notez que les métadonnées peuvent aussi être définies page par page dans l'onglet "Options" lors de la création/édition d'une page.
{content} -- Contenu. Ceci sera remplacé par le véritable contenu de la page sélectionnée, le contenu que vous éditez pour chaque page dans le menu "Contenu" » "Pages". Pour donner à la balise un nom spécifique, utiliser l'étiquette label (exemple {content label="Mon_Contenu "}). Des blocs de contenus supplémentaires peuvent être ajoutés (exemple {content block="second_content_block" label="Second Content Block"}).
{content_image} -- Permet aux concepteurs de gabarits d'inciter les utilisateurs à sélectionner un fichier image lors de l'édition du contenu d'une page Ex :{content_image block='image1' dir='images'}.
{breadcrumbs} -- Fil d'Ariane. Sera remplacé par le chemin vers la page en cours.
{menu} -- Un des menus les plus courants. Là où vous placerez cette balise, le menu entier sera automatiquement généré à partir de la hiérarchie de vos pages ("parents", "enfants"). Cette balise accepte aussi des paramètres, selon l'affichage du menu désiré. Par exemple, {menu collapse='1'} pour la contraction de tous les sous-niveaux du menu, afin que seuls les sous-niveaux de l'élément en cours apparaissent.

Note : Si vous utilisez du javascript entourer votre code avec les balises (literal) (/ literal).

Comment savoir quelles balises peuvent être utilisées dans un gabarit ?

Vous trouverez une longue liste de "tags" dans le menu "Extensions" » "Balises" du panneau d'administration. Par exemple {title}, {stylesheet} et {breadcrumbs}. Cliquez sur leur lien d'aide pour voir comment les utiliser.
Vous pouvez faire votre propre "Tags Utilisateurs", voir le menu "Extensions" » "Tags Utilisateurs". Puis, insérez son nom ainsi dans le gabarit {nomdutag}
Les "Modules" sont insérés ainsi {cms_module module='nomdumodule'}. Regardez leur lien d'aide (dans "Extensions" » "Modules") pour voir comment les utiliser.

Pour la plupart des tags et modules, vous pouvez définir des paramètres, tels que {nomdutag parameter='valeur'}

Attacher les feuilles de style

Pour donner un style aux éléments de votre gabarit et pour positionner les éléments <div>, vous attacherez une ou plusieurs feuilles de style à votre gabarit. Dans la liste des gabarits, menu "Disposition" » "Gabarits", cliquez sur l'icône "CSS" à droite du gabarit. Sélectionnez la ou les feuille(s) de style à attacher au gabarit dans la liste des feuilles de style disponibles dans le menu déroulant puis cliquez sur "Ajouter la feuille de style".

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

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 :

DOCTYPE at W3C (en anglais).
Codes pour la représentation des noms de langues (en anglais).

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 ajoutez 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étadonnées que vous définissez dans "Administration du site" » "Paramètres Globaux" pour les métadonnées globales. Viendront s'y ajouter, les métadonné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="»" -- Ce qui veut dire que le symbole utilisé pour délimiter les niveaux est le signe ».
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ées (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 - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語简体中文

User Handbook/Getting Started/Designer/Templates/fr

From CMSMS

(Redirected from User Handbook/Getting Started/Designer/Customizing Templates/fr)