Bonjour à tous,
Merci pour ce sujet intéressant
Je viens de me plonger corps et âme (oui bon, disons clavier et souris) dans Yaml et son utilisation avec CMSMS. Petit résumé de la manière dont j'ai procédé, je sais pas si c'est la meilleure, mais elle semble bien fonctionner.
Tout d'abord, je conseille fortement la lecture intégrale de la documentation Yaml. Certes un peu longue (140 pages), elle détaille tous les points du framework. C'est l'un des gros avantages de Yaml par rapport à d'autres Frameworks CSS.
Ensuite, la version de Yaml proposée dans le package à intégrer dans CMSMS (ici :
http://themes.cmsmadesimple.org/index.ph...eturnid=63) est assez ancienne. Mieux vaut donc partir du package actuel.
Tuto rapide :
- Télécharger le package de Yaml :
http://www.yaml.de/fileadmin/download/re...101012.zip
- Télécharger et lire la doc (anglais ou allemand). Version anglaise :
http://www.yaml.de/fileadmin/download/re...101012.zip (selon moi, c'est important car elle répond à toutes les questions qu'on peut se poser)
- Décompresser le package de Yaml et copier le dossier "yaml" dans le "uploads/" de CMSMS - le dossier est au choix, mais j'aime bien mettre ce genre de fichiers dans uploads
- Dans CMSMS > Disposition > Gabarits : on crée un nouveau gabarit dans lequel on copie-colle le contenu de "uploads/yaml/markup_draft.html"
- Remplacer les éléments dynamiques du gabarit par les balises CMSMS, par exemple "{content}", "{title}", "{menu}", etc.. ne pas oublier de remettre "{cms_stylesheet}" dans <head>
- Disposition > Feuilles de styles : créer une nouvelle feuille qui sera la feuille centrale - pour l'exemple, on va l'appeler "styles_main"
- Dans cette nouvelle feuille, on commence par ajouter le "core" de Yaml qui se trouve dans notre dossier "uploads" (ou le dossier que vous avez choisi). Ca donne :
Code :
/* import core styles | Basis-Stylesheets einbinden */
@import url([[root_url]]/uploads/yaml/core/slim_base.css);
> Je conseille d'utiliser la "slim", car elle bien plus légère. De toutes façons, c'est un fichier qui ne sera jamais modifié - nos styles personnalisés iront ailleurs
- A la suite, toujours dans la feuille "styles_main", copiez-collez y le contenu de la feuille "uploads/yaml/screen/basemod_draft.css". Il s'agit de la feuille de style de base pour l'organisation des cadres (tailles des colonnes, propriétés du header, footer, etc..)
- Modifiez les styles des colonnes, header, footer, et tout ce dont vous avez besoin. C'est aussi ici que vous déterminez si le site à largeur flottante ou fixe par les min-width et max-width de "#page_margins"
- Vous pouvez bien sûr aller piocher dans les exemples fournis avec le package Yaml pour copier/coller les styles qui correspondent à votre design
A ce stade, vous avez normalement un site fonctionnel avec la feuille de base Yaml ainsi que le gabarit des cadres. Pour ajouter les styles de navigation et de contenus :
- CMSMS > Disposition > Feuilles de styles. Créez deux nouvelles feuilles "styles_nav" et "styles_contenu" et copiez-collez-y les contenus de "uploads/yaml/navigation/nav_shinybuttons.css" et "uploads/yaml/screen/content_defaults.css". L'utilisation de ces feuilles de styles est bien sûr optionnel et vous pouvez créer vous-même ces styles. C'est cependant un bon point de départ. Pour la navigation, rien ne vous empêche d'utiliser plutôt les feuilles "nav_slidingdoor.css" ou "nav_vlist".
Vous pouvez également utiliser les styles pour les formulaires depuis "uploads/yaml/screen/forms.css". Je ne l'ai pas fait car il n'est pas toujours facile de modifier la classe ou l'ID d'un formulaire général par CMSMS qui a sa propre nomenclature. Mais c'est possible avec quelques modifs.
Reste un point : Internet Explorer et les hacks. Pour ajouter la feuille "iehacks.css", voici ce qu'il faut faire :
- Contenu > Feuilles de styles : créer une nouvelle feuille qu'on nommera "iehacks". Y inclure le contenu de "uploads/yaml/patches/patch_layout_draft.css" et modifier la ligne d'import de la feuille "iehacks.css" par :
Code :
@import url([[root_url]]/uploads/yaml/core/iehacks.css);
- En dessous, libre à vous de mettre vos corrections pour IE
- Attention : ne PAS lier cette feuille avec votre gabarit ! Son inclusion sera faite "manuellement" juste après
- Dans le gabarit principal du site, section "<head>", après "{cms_stylesheet}" ajouter :
Code :
{* IE *}
<!--[if lte IE 7]>
{cms_stylesheet name="iehacks"}
<![endif]-->
- Ce code avec commentaire spécial pour Internet Explorer permet d'inclure la feuille "iehacks" même si elle n'est pas liée au gabarit via le CMS
Voilà, vous avez tout. C'était un tour rapide mais qui j'espère pourrra vous aider. Nul besoin de modifier les fichiers de CMSMS comme demandé dans le package des thèmes CMSMS en ligne.
Bon développement
