Outils pour utilisateurs

Outils du site


Panneau latéral

html_design:skinable_theme

Rendre un thème habillable

1)

Préambule

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 :

Principes

Rendre habillable une charte graphique repose sur un principe relativement simple :

  1. Associer des variables à une propriété CSS utilisée dans votre feuille
  2. Permettre l'édition des variables dans un formulaire dédié

Déclaration d'une variable d'habillage

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éation d'un champ de formulaire

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 :

  • color : la valeur est une couleur,
  • dropdownlist : la valeur est un élément de la liste indiquée par l'attribut listid,
  • imagecss : la valeur est une image venant du thème ou de la médiathèque,
  • size : la valeur est une “taille” (width, height, …),
  • text : la valeur est un texte “libre”, c'est le type attribué par défaut.

Dans les détails

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 Five Prévisualisation du thème Express Food Two 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.

Le jeu des sept erreurs

En quoi diffèrent nos déclinaisons ? Après Analyse, les éléments suivants sont différents d'une déclinaison à une autre :

  • L'image de fond utilisée pour le menu principal
  • L'image de fond utilisée pour chacun des éléments du menu principal
  • La couleur par défaut des liens du menu principal
  • La couleur des liens du menu principal, au survol
  • La couleur du texte du champ de recherche du formulaire
  • La couleur des liens de manière générale
  • La couleur des titres
  • L'image de fond utilisée pour les titres dans les colonnes latérales
  • L'image de fond utilisée pour le pied de page

Ces différences correspondent à la valeur de certaines propriétés CSS pour lesquelles nous allons donc déclarer des variables.

Altération des feuilles de styles

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*/;
}

Génération du nouveau modèle d'habillage

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 foodexpress
Cette 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 :

  • bannerbgimage, type imagecss
  • footerbgimage, type imagecss
  • linkfgcolor, type color
  • linkhoverfgcolor, type color
  • menumaintopimage, type imagecss
  • navbgimage, type imagecss
  • sideboxh2bgimage, type imagecss
  • headingonefgcolor à headingfivecolor, type color

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>

Saisie des messages utilisateurs

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 :  Notification de rechargement de l'interface backoffice

Conclusion

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” : habillage foodexpress

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.

1)
Profil : designer web, développeur PHP
html_design/skinable_theme.txt · Dernière modification: 2017/01/19 14:54 (modification externe)