Nous avons récemment intégré le thème Wordpress “ Food express one”. Nous vous proposons ici de rendre “habillable” la chose, c'est à dire permettre de facilement décliner la charte graphique, depuis le backoffice, en utilisant un formulaire que le non expert CSS pourra manipuler.Vous pouvez par ailleurs explorer les fonctionnalités du module “habillage” ou skin au travers du site http://skin.demos.rbschange.fr/.
Note : il semblerait que le site http://cssclub.uuuq.com dont le thème est issu aie disparu depuis la rédaction de cette page … vous pouvez télécharger les thèmes originaux ici :
Rendre habillable une charte graphique repose sur un principe relativement simple :
Pour associer des variables à une propriété CSS donnée, il suffit de rajouter un commentaire en fin d'instruction CSS.
Exemple : déclaration de la variable “bannerbgimage” pour permettre l'édition de l'image de fond du bandeau du site :
#header { width: 1000px; height: 250px; background: url(/media/themes/mytheme/header.png)/*@var bannerbgimage*/; margin-left: auto; margin-right: auto; }
Créer un champ de formulaire se fait dans le fichier skin/skin.xml. Les champs, matérialisés par des éléments <field />, sont regroupés en sections / sous-sections, matérialisées par des éléments <section /> :
<?xml version="1.0" encoding="UTF-8"?> <sections> <section name="Asection"> <field name="bannerbgimage" type="imagecss" initialvalue="/media/themes/mytheme/header.png"/> </section> <section name="Anothersection"> <section name="subsection"> ... </section> </section> </section>
Le champ “bannerbgimage” ainsi crée permet de renseigner la valeur de la variable associée : l'utilisateur pourra sélectionner un élément du thème, de la médiathèque ou directement sélectionner un fichier depuis son disque dur (celui-ci sera alors placé dans le dossier “Inbox” de la médiathèque).
Le contrôle de formulaire utilisé dépend de l'attribut type :
Le thème “Express Food One”, vous le savez peut-être déjà, a été choisi pour le thème traité : la cuisine ;). Il a aussi été choisi parce qu'il existe des déclinaisons, allant de “Express Food Two” à “Express Food Five” :
Prévisualisation du thème Express Food Five | Prévisualisation du thème Express Food Two |
Nous allons rendre habillable notre gabarit pour permettre la création de ces déclinaisons depuis le backoffice.
En quoi diffèrent nos déclinaisons ? Après Analyse, les éléments suivants sont différents d'une déclinaison à une autre :
Ces différences correspondent à la valeur de certaines propriétés CSS pour lesquelles nous allons donc déclarer des variables.
Les feuilles de styles impactées par les changements sont simple.css et content.css.
Après modifications, la feuille themes/foodexpress/style/simple.css :
/* Theme Name: WordPress Express Food One 2.7 Edition Theme URI: http://cssthemesclub.com/wordpressexpressfoodone Description: Please download from <a href="http://cssthemesclub.com/wordpressexpressfoodone.rar">http://cssthemesclub.com/wordpressexpressfoodone.rar</a>. A car WordPress theme. To install correctly, read the readme.txt. Author: CSSThemesClub.com Author URI: http://cssthemesclub.com/support Tags: green, white, gray */ /* ... */ a:link { color: #5d784f/*@var linkfgcolor*/; text-decoration: none; } a:visited { color: #5d784f/*@var linkfgcolor*/; text-decoration: none; } /* ... */ div.modules-website-switchlanguage ul li a.link { color: #5D784F/*@var linkfgcolor*/; } /* ... */ #header { width: 1000px; height: 250px; background: url(/media/themes/foodexpress/header.png)/*@var bannerbgimage*/; margin-left: auto; margin-right: auto; } /* ... */ #navigation { height: 36px; line-height: 36px; background: url(/media/themes/foodexpress/nav.png)/*@var navbgimage*/; } /* ... */ #navigationleft li { width: 119px; height: 34px; text-align: center; background: url(/media/themes/foodexpress/hover.png)/*@var menumaintopimage*/; display: block; float: left; overflow: visible; } /* ... */ #navigationleft a:hover { color: #84aa70/*@var linkhoverfgcolor*/; } /* ... */ #navigationright .textfield { width: 220px; height: 13px; font-size: 12px; background: #ffffff; border: none; padding: 5px; color: #5d784f/*@var linkfgcolor*/; line-height: 18px; text-align: center; margin-top: 5px; margin-right: 5px; } /* ... */ ul.thread li a.link,ul.thread li span { color: #5D784F/*@var linkfgcolor*/; } /* ... */ .sidebox a:link { color: #5d784f/*@var linkfgcolor*/; text-decoration: none; } .sidebox a:visited { color: #5d784f/*@var linkfgcolor*/; text-decoration: none; } .sideboxheader,#left h2,#middle h2 { font-size: 18px; color: #ffffff; height: 26px; line-height: 26px; background: url(/media/themes/foodexpress/nav.png)/*@var sideboxh2bgimage*/; padding: 5px; margin-top: 10px; } /* ... */ .sidebox ul li a:link { color: #5d784f/*@var linkfgcolor*/; text-decoration: none; } .sidebox ul li a:visited { color: #5d784f/*@var linkfgcolor*/; text-decoration: none; } /* ... */ #footer { height: 26px; line-height: 26px; background: url(/media/themes/foodexpress/nav.png)/*@var footerbgimage*/; padding: 5px; } /* ... */ #footerleft a:hover { color: #84aa70/*@var linkhoverfgcolor*/; text-decoration: none; } /* ... */ #footerright a:hover { color: #84aa70/*@var linkhoverfgcolor*/; text-decoration: none; } @import url(/themes/foodexpress/style/simple.xul.all.css);
La feuille themes/foodexpress/style/content.css, initialisée à partir de modules/website/style/content.css était déjà entièrement “variabilisée”. Nous en redonnons tout de même ici le contenu complet :
a.link{ text-decoration: underline/*@var linkdecoration*/; color: #5d784f/*@var linkfgcolor*/; } a.link:hover{ text-decoration: none/*@var linkhoverdecoration*/; color: #5d784f/*@var linkhoverfgcolor*/; } h1.title,.heading-one{ color: #5d784f/*@var headingonefgcolor*/; font-size: 1.8em/*@var headingonesize*/; margin-bottom: 16px/*@var headingonemarginbottom*/; padding-left: 0/*@var headingonepaddingleft*/; font-weight: bold/*@var headingonefontweight*/; font-style: normal/*@var headingonefontstyle*/; border-bottom-color: #5d784f/*@var headingonebordercolor*/; background-image: /*@var headingonebgimage*/; background-position: 0 0/*@var headingonebgposition*/; background-repeat: no-repeat/*@var headingonebgrepeat*/; } h2.title,.heading-two{ color: #5d784f/*@var headingtwofgcolor*/; font-size: 1.6em/*@var headingtwosize*/; margin-bottom: 16px/*@var headingtwomarginbottom*/; padding-left: 0/*@var headingtwopaddingleft*/; font-weight: bold/*@var headingtwofontweight*/; font-style: normal/*@var headingtwofontstyle*/; border-bottom-color: #5d784f/*@var headingtwobordercolor*/; background-image: /*@var headingtwobgimage*/; background-position: 0 0/*@var headingtwobgposition*/; background-repeat: no-repeat/*@var headingtwobgrepeat*/; } h3,h3.title,.heading-three{ color: #5d784f/*@var headingthreefgcolor*/; font-size: 1.2em/*@var headingthreesize*/; margin-bottom: 16px/*@var headingthreemarginbottom*/; padding-left: 0/*@var headingthreepaddingleft*/; font-weight: bold/*@var headingthreefontweight*/; font-style: normal/*@var headingthreefontstyle*/; border-bottom-color: #5d784f/*@var headingthreebordercolor*/; background-image: /*@var headingthreebgimage*/; background-position: 0 0/*@var headingthreebgposition*/; background-repeat: no-repeat/*@var headingthreebgrepeat*/; } h4.title,.heading-four{ color: #5d784f/*@var headingfourfgcolor*/; font-size: 1em/*@var headingfoursize*/; margin-bottom: 16px/*@var headingfourmarginbottom*/; padding-left: 0/*@var headingfourpaddingleft*/; font-weight: bold/*@var headingfourfontweight*/; font-style: normal/*@var headingfourfontstyle*/; border-bottom-color: #5d784f/*@var headingfourbordercolor*/; background-image: /*@var headingfourbgimage*/; background-position: 0 0/*@var headingfourbgposition*/; background-repeat: no-repeat/*@var headingfourbgrepeat*/; } h5.title,.heading-five{ color: #5d784f/*@var headingfivefgcolor*/; font-size: 0.9em/*@var headingfivesize*/; margin-bottom: 16px/*@var headingfivemarginbottom*/; padding-left: 0/*@var headingfivepaddingleft*/; font-weight: bold/*@var headingfivefontweight*/; font-style: normal/*@var headingfivefontstyle*/; border-bottom-color: #5d784f/*@var headingfivebordercolor*/; background-image: /*@var headingfivebgimage*/; background-position: 0 0/*@var headingfivebgposition*/; background-repeat: no-repeat/*@var headingfivebgrepeat*/; } h6.title,.heading-six{ color: #5d784f/*@var headingsixfgcolor*/; font-size: 0.8em/*@var headingsixsize*/; margin-bottom: 16px/*@var headingsixmarginbottom*/; padding-left: 0/*@var headingsixpaddingleft*/; font-weight: bold/*@var headingsixfontweight*/; font-style: normal/*@var headingsixfontstyle*/; border-bottom-color: #5d784f/*@var headingsixbordercolor*/; background-image: /*@var headingsixbgimage*/; background-position: 0 0/*@var headingsixbgposition*/; background-repeat: no-repeat/*@var headingsixbgrepeat*/; } h1.title,.heading-one{ border-bottom-style: solid/*@var headingoneborderstyle*/; border-bottom-width: 0px/*@var headingoneborderwidth*/; background-color: none/*@var headingonebgcolor*/; font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif/*@var headingonefontfamily*/; } h2.title,.heading-two{ border-bottom-style: solid/*@var headingtwoborderstyle*/; border-bottom-width: 0px/*@var headingtwoborderwidth*/; background-color: none/*@var headingtwobgcolor*/; font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif/*@var headingtwofontfamily*/; } h3.title,.heading-three{ border-bottom-style: solid/*@var headingthreeborderstyle*/; border-bottom-width: 0px/*@var headingthreeborderwidth*/; background-color: none/*@var headingthreebgcolor*/; font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif/*@var headingthreefontfamily*/; } h4.title,.heading-four{ border-bottom-style: solid/*@var headingfourborderstyle*/; border-bottom-width: 0px/*@var headingfourborderwidth*/; background-color: none/*@var headingfourbgcolor*/; font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif/*@var headingfourfontfamily*/; } h5.title,.heading-five{ border-bottom-style: none/*@var headingfiveborderstyle*/; border-bottom-width: 0px/*@var headingfiveborderwidth*/; background-color: none/*@var headingfivebgcolor*/; font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif/*@var headingfivefontfamily*/; } h6.title,.heading-six{ border-bottom-style: none/*@var headingsixborderstyle*/; border-bottom-width: 0px/*@var headingsixborderwidth*/; background-color: none/*@var headingsixbgcolor*/; font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif/*@var headingsixfontfamily*/; } body { font-size: 14px; } p.normal{ margin-bottom: 16px; } hr.clear-both{ width: 0; clear: both; } dl.normal dt{ font-weight: bold; } dl.normal dd{ margin-left: 16px; margin-bottom: 4px; } ul.normal{ margin-bottom: 16px/*@var ulmarginbottom*/; } ul.normal ul{ margin-bottom: 0px/*@var ululmarginbottom*/; padding-left: 26px/*@var ulpaddingleft*/; } ul.normal li{ list-style-type: disc/*@var ultype*/; padding-top: 4px/*@var ulpaddingtop*/; padding-bottom: 4px/*@var ulpaddingbottom*/; padding-left: 26px/*@var ulpaddingleft*/; padding-right: 0px/*@var ulpaddingright*/; background-image: none/*@var ulbullet*/; background-position: 0 0/*@var ulbgposition*/; background-repeat: no-repeat/*@var ulbgrepeat*/; } ol.normal{ margin-bottom: 16px/*@var olmarginbottom*/; } ol.normal ol{ margin-bottom: 0px/*@var ololmarginbottom*/; } ol.normal li{ list-style-type: decimal/*@var oltype*/; padding-top: 4px/*@var olpaddingtop*/; padding-bottom: 4px/*@var olpaddingbottom*/; padding-left: 26px/*@var olpaddingleft*/; padding-right: 0px/*@var olpaddingright*/; background-image: none/*@var olbullet*/; background-position: 0 0/*@var olbgposition*/; background-repeat: no-repeat/*@var olbgrepeat*/; } table.normal{ margin-bottom: 16px/*@var tablemarginbottom*/; } table.normal tr th{ text-align: left/*@var thtextalign*/; color: #fff/*@var thfgcolor*/; background-color: #5d784f/*@var thbgcolor*/; border-style: solid/*@var thborderstyle*/; border-width: 1px/*@var thborderwidth*/; border-color: #ccc/*@var thbordercolor*/; } table.normal tr td{ text-align: left/*@var tdtextalign*/; border-style: solid/*@var tdborderstyle*/; border-width: 1px/*@var tdborderwidth*/; border-color: #ccc/*@var tdbordercolor*/; } table.normal tr td, table.normal tr th { padding:6px 2px; } table.normal tr.row-0{ background-color: #eee/*@var trevenbgcolor*/; } table.normal tr.row-1{ background-color: #fff/*@var troddbgcolor*/; } blockquote{ margin: 0px 0 15px 25px; padding: 0px 10px 0px 10px; border-left-width: 1px/*@var blockquoteborderwidth*/; border-left-style: solid/*@var blockquoteborderstyle*/; border-left-color: #5d784f/*@var blockquotebordercolor*/; font-style: italic/*@var blockquotefontstyle*/; font-weight: normal/*@var blockquotefontweight*/; font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif/*@var blockquotefontfamily*/; }
Une fois l'ensemble des variables positionnées, nous devons créer le formulaire de saisie. Celui est représenté par le fichier skin/skin.xml que la commande changedev.php theme.generate-skin initialise :
changedev.php theme.generate-skin foodexpressCette commande scanne l'ensemble des fichiers styles/*.css, y repère les variables et crée une entrée y correspondant, en reprenant la valeur par défaut.
Nous faisons le choix de retenir les propriétés suivantes :
Après modifications, voici le fichier skin/skin.xml :
<?xml version="1.0" encoding="UTF-8"?> <sections> <section name="TemplateTab"> <field name="bannerbgimage" type="imagecss" initialvalue="url(/media/themes/foodexpress/header.png)" hidehelp="true"/> <field name="footerbgimage" type="imagecss" initialvalue="url(/media/themes/foodexpress/nav.png)" hidehelp="true"/> </section> <section name="MainmenuTab"> <field name="menumaintopimage" type="imagecss" initialvalue="url(/media/themes/foodexpress/hover.png)" hidehelp="true"/> <field name="navbgimage" type="imagecss" initialvalue="url(/media/themes/foodexpress/nav.png)" hidehelp="true"/> </section> <section name="SideboxTab"> <field name="sideboxh2bgimage" type="imagecss" initialvalue="url(/media/themes/foodexpress/nav.png)" hidehelp="true"/> </section> <section name="LinksTab"> <field name="linkfgcolor" type="color" initialvalue="#5D784F" hidehelp="true"/> <field name="linkhoverfgcolor" type="color" initialvalue="#5D784F" hidehelp="true"/> </section> <section name="HeadingsTab"> <field name="headingonefgcolor" type="color" initialvalue="#5D784F"/> <field name="headingtwofgcolor" type="color" initialvalue="#5D784F"/> <field name="headingthreefgcolor" type="color" initialvalue="#5D784F"/> <field name="headingfourfgcolor" type="color" initialvalue="#5D784F"/> <field name="headingfivefgcolor" type="color" initialvalue="#5D784F"/> </section> </sections>
Les libellés des variables sont définis dans le fichier locale/skin.xml :
<?xml version="1.0" encoding="utf-8"?> <localization> <!-- Template --> <entity id="TemplateTab"> <locale lang="fr">Gabarit</locale> </entity> <entity id="bannerbgimage"> <locale lang="fr">Image de fond du bandeau</locale> </entity> <entity id="footerbgimage"> <locale lang="fr">Image de fond du pied de page</locale> </entity> <!-- Main menu --> <entity id="MainmenuTab"> <locale lang="fr">Menu principal</locale> </entity> <entity id="menumaintopimage"> <locale lang="fr">Image de fond d'un élément</locale> </entity> <entity id="navbgimage"> <locale lang="fr">Image de fond globale</locale> </entity> <!-- Columns --> <entity id="SideboxTab"> <locale lang="fr">Colonnes latérales</locale> </entity> <entity id="sideboxh2bgimage"> <locale lang="fr">Image de fond d'un titre de second niveau</locale> </entity> <!-- Links --> <entity id="LinksTab"> <locale lang="fr">Liens</locale> </entity> <entity id="linkfgcolor"> <locale lang="fr">Couleur des liens</locale> </entity> <entity id="linkhoverfgcolor"> <locale lang="fr">Couleur des liens au survol</locale> </entity> <!-- Headings --> <entity id="HeadingsTab"> <locale lang="fr">Titres</locale> </entity> <entity id="headingonefgcolor"> <locale lang="fr">Couleur des titres de niveau 1</locale> </entity> <entity id="headingtwofgcolor"> <locale lang="fr">Couleur des titres de niveau 2</locale> </entity> <entity id="headingthreefgcolor"> <locale lang="fr">Couleur des titres de niveau 3</locale> </entity> <entity id="headingfourfgcolor"> <locale lang="fr">Couleur des titres de niveau 4</locale> </entity> <entity id="headingfivefgcolor"> <locale lang="fr">Couleur des titres de niveau 5</locale> </entity> </localization>
Enregistrons les messages auprès du système :
change.php compile-locale themes/foodexpress
Au bout de 30 secondes maximum, l'utilisateur connecté au backoffice est invité à le recharger :
A l'issue de ces différentes manipulations, nous pouvons créer des habillages permettant de décliner la charte graphique de “Food Express One” à “Food Express Five” :
Vous pouvez maintenant créer vos habillages à partir des thèmes originaux ou télécharger puis installer le thème foodexpress [ZIP, 2.59 Mo] qui définit les quatre habillages de FoodExpressTwo à FoodExpressFive.