Comment intégrer son propre template dans CMSMS ?

Ce tuto s'adresse à ceux qui ont déjà conçu leur site et souhaite l'intégrer à CMSMS.

Je ne peux pas encore vous parler du reste, je n'ai jamais utilisé les templates disponibles dans le logiciel :-)... mais ça viendra !

Ce tuto se base pour une large part sur le post de Soupaloignon et la vidéo Mint-Chocolat.

1. Loggez-vous sur le panneau d'administration de CMS Made Simple avec les données définies durant l'installation du logiciel.

2. Menu Disposition → Gabarit, +ajouter un nouveau gabarit.

Image Interface Création gabarit

3. Dans la nouvelle fenêtre qui apparaît, dans le premier champ, nommez votre gabarit.

4. Collez dans le champ en-dessous l'intégralité de votre page .html et cliquez pour Envoyer pour l'enregistrer

5. Menu Disposition→Feuille de style +ajouter une nouvelle feuille de style.

6. Sur la nouvelle fenêtre, nommez votre feuille de style et collez l'entier de votre propre fichier .css.

7. Les images dans CMSMS sont classées dans un répertoire nommé "images". Modifiez vos urls dans la feuille de style en conséquence (par exemple : background:url(images/......) et non pas url(Image/..).

8. Choisissez le type de media selon l'utilisation de votre feuille de style.

9. Cliquez sur Envoyer pour enregistrer votre feuille de style.

10. Maintenant il faut lier la feuille de style au gabarit précédemment créé. Retourner au menu Disposition→Gabarit. Sur la ligne qui contient le gabarit que vous avez  créé auparavant, cliquez sur l'icône orange css (voir l'image ci-dessus).

11. Choisissez dans la liste déroulante la feuille de style que vous venez d'enregistrer et cliquez sur Ajouter une nouvelle feuille de style. Maintenant votre gabarit et votre feuille de style sont liés.

12. Cliquez sur l'option "choisir pour tous les contenus" dans la ligne de votre gabarit.

13. A l'aide de votre logiciel FTP, transférez tous les images nécessaires dans le répertoire images de CMSMS sur votre serveur.

14. On va retourner sur le gabarit. Donc menu Disposition→Gabarit, cliquez sur votre gabarit pour l'éditer.

15. On va remplacer un certain nombre de chose dans ce gabarit :

Dans le <head>
- effacez toutes les balises meta et indiquez à la place {metadata}
- effacez le lien vers la feuille de style et indiquez à la  place {stylesheet}.

Dans le <body>
- effacer le bloc <ul>..... </ul> (balises ul comprises) et indiquez {menu}.
- effacer l'entier du contenu et indiquez {content}.

Dans le <footer>
- effacez le contenu du footer et indiquez {global_content name="footer"}.

16. Cliquez sur Appliquer pour enregistrer.

17. Menu Administration du site→Paramètres globaux, complétez dans le champ prévu à cet effet les balises meta nécessaires.

18. Menu Contenu→Blocs de contenus globaux. Dans la liste, par défaut on a déjà un fichier "footer". Cliquez dessus et dans la nouvelle fenêtre, modifiez le texte selon vos désirs + Appliquer pour enregistrer.

Le plus gros est fait ! Maintenant on va créer une première page pour être sûr que tout fonctionne.

19. Menu Contenu→Pages, ajouter un nouveau contenu (en bas de la fenêtre à gauche).

Ajout nouveau contenu

20. Remplissez les champs titre, texte du menu (ce qui apparaîtra dans le menu), Parent (puisque c'est notre première page, laissez sur None), vérifiez que le gabarit est celui créé. A présent, vous pouvez remplir le contenu... C'est fait, alors cliquez sur "Envoyer".

Voilà ! Menu "voir le site" et contemplez votre première page générée avec CMS Made Simple !

Il est possible que votre menu apparaisse bizarrement (par exemple "Current page is..."). Ne vous inquiétez pas, rendez-vous au tutoriel sur la gestion des menus pour transformer tout cela.  

IE 6 : Pour ce site, j'ai dû corriger une marge avec le rendu soit le même sur IE6, voici un exemple de code à placer entre les balises <head></head> de votre gabarit.

{literal}
<!--[if lte IE 6]>
<style type="text/css">
#texte {margin-left: 30px}
</style>
<![endif]-->
{/literal}

Haut de la page
Page précédente: Avant de commencer       Page suivante: Gestion des menus