Nous faisons le choix d'inclure les CSS du projet (les CSS du thème complèteront les CSS fournies par RBSChange) ; cela se manifeste par l'attribut useProjectCSS
dans le fichier install.xml
du thème et par sa valeur qui est mise à true
:
<?xml version="1.0" encoding="UTF-8"?> <script> <binding fileName="modules/theme/persistentdocument/import/theme_binding.xml"/> <rootfolder module="theme"> <theme id="foodexpress" byCodename="foodexpress" label="Foodexpress" description="Theme converted from WP"> <pagetemplate byCodename="foodexpress/threeCols" doctype="XHTML-1.0-Transitional" useprojectcss="true" /> </theme> </rootfolder> </script>
Pour que notre thème soit opérationnel, nous allons récupérer son fichier CSS et ses images. On copie donc styles.css
dans le dossier styles
de notre thème et on copie les images dans le dossier image
.
cp food-express/style.css themes/foodexpress/style/ cp food-express/images/*.png themes/foodexpress/image/
Nous allons maintenant modifier la CSS de sorte à redéfinir les URL des images pour qu'elles correspondent à la structure de RBSChange, ce qui se traduit par le remplacement de toutes les occurrences de images/
par /media/themes/foodexpress/
:
sed -i "s|images/|/media/themes/foodexpress/|g" themes/foodexpress/style/style.css
Nous allons déclarer la CSS style.css
comme étant celle à employer pour notre template définit précédemment threeCols.xml
, cela se passe dans le fichier install.xml
ou nous déclarons l'attribut cssscreen
de la manière suivante :
<?xml version="1.0" encoding="UTF-8"?> <script> <binding fileName="modules/theme/persistentdocument/import/theme_binding.xml"/> <rootfolder module="theme"> <theme id="foodexpress" byCodename="foodexpress" label="FoodExpress" description="Thème FoodExpress d'exemple"> <pagetemplate cssscreen="themes.foodexpress.style" useprojectcss="true" byCodename="foodexpress/threeCols" doctype="XHTML-1.0-Transitional" /> </theme> </rootfolder> </script>
On remarque que la valeur de l'attribut permet de retrouver le chemin de la CSS dans le système de fichiers en remplaçant le “.” par “/” et en rajoutant style
avant le nom de la CSS.
Tel quel, tout ne fonctionne pas comme dans la version d'origine du thème, ce qui est dû au code généré par la page qui n'est pas celui souhaité par l'auteur du thème. Qu'à cela ne tienne, nous allons adapter les rendus de bloc de sorte à avoir le même rendu.
Le menu principal alignait les éléments sans séparateur, ce qui en soit n'est pas une bonne pratique si l'on se préoccupe de l'accessibilité d'un site. Nous allons donc modifier la structure du menu pour prendre en compte tout cela.
Les menus générés par RBS Change présentent des éléments de type <ul>
et <li>
afin de garantir une isolation de chaque élément du menu, nous modifions donc notre CSS en ajoutant :
/* BEGIN navigation menu */ ul.tagged-menu-horizontal li a.link,ul.tagged-menu-horizontal li strong { padding: 0; } #navigationleft li { width: 119px; height: 34px; text-align: center; background: url(/media/themes/foodexpress/hover.png); display: block; float: left; } #navigationleft li a,#navigationleft a:link,#navigationleft a:visited,#navigationleft strong { color: #ffffff; text-decoration: none; } #navigationleft a:hover { color: #84aa70; } #header #navigation #navigationleft div.modules-website-ConfigurableMenu span.separator { visibility: hidden; } ul.thread li { display: inline; } #footer div.modules-website-ConfigurableMenu li { display:inline; } #footer div.modules-website-ConfigurableMenu li a { color:#ffffff; } #footer div.modules-website-ConfigurableMenu li a:hover { color:#84aa70; } /* END navigation menu */
Là encore le code généré par RBSChange diffère de celui de l'auteur du thème, nous allons donc modifier notre fichier CSS pour prendre en compte cette modification en ajoutant :
/* BEGIN search engine */ div.modules-solrsearch-form { padding: 0; } fieldset.solrsearch-fieldset { border-style: none; padding: 0px; } #navigationright .textfield { width: 220px; height: 13px; font-size: 12px; background: #ffffff; border: none; padding: 5px; color: #5d784f; line-height: 18px; text-align: right; margin-top: 5px; margin-right: 5px; } #navigationright .button { vertical-align: bottom; margin-bottom: 5px; } /* END search engine */
Afin de ne pas avoir à ré-écrire toutes les CSS pour le moteur de recherche, nous allons demander au thème d'intégrer également les CSS par défaut du module solrsearch
. Nous modifions donc le fichier install.xml
de la manière suivante :
<?xml version="1.0" encoding="UTF-8"?> <script> <binding fileName="modules/theme/persistentdocument/import/theme_binding.xml"/> <rootfolder module="theme"> <theme id="foodexpress" byCodename="foodexpress" label="FoodExpress" description="Thème FoodExpress d'exemple"> <pagetemplate byCodename="foodexpress/threeCols" doctype="XHTML-1.0-Transitional" useprojectcss="true" cssscreen="themes.foodexpress.style,modules.solrsearch.frontoffice" /> </theme> </rootfolder> </script>
Ici encore les CSS ne correspondent pas tout à fait ce que l'on souhaite, on ajoute donc les définitions CSS suivantes :
/* BEGIN breadcrumb */ div.modules-website-thread { padding-top: 10px; padding-left: 10px; margin-bottom: 20px; width: 100%; font-size: 12px; } ul.thread li a.link,ul.thread li span { color: #5D784F; } ul.thread li span { color: #000; } /* END breadcrumb */
D'autres classes CSS fournies par le thèmes sont modifiées afin de permettre un affichage plus agréable. A la fin, le fichier CSS doit être semblable au code CSS ci-dessous.
Cliquez ici pour voir le contenu du fichier CSS style
du thème foodexpress
convertit
Cliquez ici pour voir le contenu du fichier CSS style
du thème foodexpress
convertit
Cliquez ici pour voir le contenu du fichier CSS style
du thème foodexpress
convertit
/* 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 */ /* Begin Typography & Colors */ body { font-family: Arial, "Trebuchet MS", Verdana, Tahoma; background: #eaeaea; color: #000000; } * { margin: 0px; padding: 0px; } form { margin: 0px; padding: 0px; } /* Modification faite pour RBSChange */ /* ul li { */ /* list-style-type: square; */ /* } */ a:link { color: #5d784f; text-decoration: none; } a:visited { color: #5d784f; text-decoration: none; } #wp-calendar #prev a,#wp-calendar #next a { font-size: 9pt; } #wp-calendar a { text-decoration: underline; } #wp-calendar caption { font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif; text-align: center; } #wp-calendar th { font-style: normal; text-transform: capitalize; } #wp-calendar caption,cite { text-decoration: none; } #wp-calendar { empty-cells: show; margin: 10px auto 0; width: 155px; } #wp-calendar #next a { padding-right: 10px; text-align: right; } #wp-calendar #prev a { padding-left: 10px; text-align: left; } #wp-calendar a { display: block; } #wp-calendar caption { text-align: center; width: 100%; } #wp-calendar td { padding: 3px 0; text-align: center; } #wp-calendar td.pad:hover { /* Doesn't work in IE */ background-color: #fff; } #container { width: 1000px; height: 100%; margin-left: auto; margin-right: auto; margin-bottom: 10px; background: #ffffff; } .clear { clear: both; } #header { width: 1000px; height: 250px; background: url(/media/themes/foodexpress/header.png); margin-left: auto; margin-right: auto; } #headertitle { margin-top: 67px; margin-left: 30px; font-size: 40px; color: #ffffff; float: left; } #headertitle a:link { color: #ffffff; text-decoration: none; } #headertitle a:visited { color: #ffffff; text-decoration: none; } #headerdescription { margin-top: 76px; margin-right: 30px; font-size: 20px; color: #ffffff; float: right; } #navigation { height: 36px; line-height: 36px; background: url(/media/themes/foodexpress/nav.png); } #navigationleft { color: #ffffff; font-size: 18px; display: inline-block; float: left; } #navigationleft a:link { width: 119px; height: 34px; line-height: 34px; color: #ffffff; text-decoration: none; text-align: center; background: url(/media/themes/foodexpress/hover.png); display: block; float: left; } #navigationleft a:visited { width: 119px; height: 34px; line-height: 34px; color: #ffffff; text-decoration: none; text-align: center; background: url(/media/themes/foodexpress/hover.png); display: block; float: left; } #navigationleft a:hover { width: 119px; height: 34px; line-height: 34px; color: #84aa70; text-decoration: none; text-align: center; background: url(/media/themes/foodexpress/hover.png); display: block; float: left; } #navigationright { float: right; } .search { width: 220px; height: 13px; font-size: 12px; background: #ffffff; border: none; padding: 5px; color: #5d784f; line-height: 18px; text-align: center; margin-top: 5px; margin-right: 5px; } .searchtwo { width: 250px; height: 13px; font-size: 12px; background: #ffffff; border: 1px #d8d8d7 solid; padding: 5px; color: #5d784f; line-height: 18px; text-align: center; margin-top: 4px; margin-left: 6px; } #left { width: 170px; margin-left: 10px; float: left; } #middle { /* Modification faite pour RBSChange width:170->640px */ width: 640px; margin-right: 10px; float: left; } #right { /* Modification faite pour RBSChange width:640->170px */ width: 170px; float: left; } .sidebar { width: 160px; margin-bottom: 10px; } .sidebox { padding-bottom: 10px; color: #5d784f; } .sidebox a:link { color: #5d784f; text-decoration: none; } .sidebox a:visited { color: #5d784f; text-decoration: none; } .sideboxheader { font-size: 18px; color: #ffffff; height: 26px; line-height: 26px; background: url(/media/themes/foodexpress/nav.png); padding: 5px; margin-top: 10px; } .sidebox ul { } .sidebox ul li { line-height: 25px; font-size: 12px; color: #000000; list-style-type: none; } .sidebox ul li a:link { color: #5d784f; text-decoration: none; } .sidebox ul li a:visited { color: #5d784f; text-decoration: none; } .sidebox ul li ul { margin-top: 10px; margin-left: 15px; } .ad125 img { width: 125px; height: 125px; margin-left: 8px; margin-top: 8px; border: none; float: left; } .entries { width: 630px; height: 20px; line-height: 20px; font-size: 10px; color: #5d784f; margin-top: 10px; margin-right: 15px; padding: 5px; } .entriesleft { float: left; } .entriesleft a:link { color: #5d784f; text-decoration: none; } .entriesleft a:visited { color: #5d784f; text-decoration: none; } .entriesright { float: right; } .entriesright a:link { color: #5d784f; text-decoration: none; } .entriesright a:visited { color: #5d784f; text-decoration: none; } .pagetitle { width: 630px; font-size: 25px; color: #5d784f; padding: 5px; margin-top: 10px; margin-right: 15px; } .post { width: 630px; height: 100%; margin-bottom: 10px; padding: 5px; } .postheader { height: 46px; line-height: 46px; font-size: 25px; color: #5d784f; } .postheader a:link { color: #5d784f; text-decoration: none; } .postheader a:visited { color: #5d784f; text-decoration: none; } .postimage img { width: 300px; height: 175px; border: none; margin-right: 5px; float: left; } .postcontent { font-size: 14px; } .postinfo { height: 25px; font-size: 12px; } #comment { width: 625px; height: 200px; background: #f6f6f6; border: 1px #d8d8d7 solid; color: #5d784f; font-size: 12px; margin-top: 5px; margin-bottom: 5px; } #author { width: 625px; height: 15px; background: #f6f6f6; border: 1px #d8d8d7 solid; color: #5d784f; font-size: 12px; margin-top: 5px; margin-bottom: 5px; } #email { width: 625px; height: 15px; background: #f6f6f6; border: 1px #d8d8d7 solid; color: #5d784f; font-size: 12px; margin-top: 5px; margin-bottom: 5px; } #url { width: 625px; height: 15px; background: #f6f6f6; border: 1px #d8d8d7 solid; color: #5d784f; font-size: 12px; margin-top: 5px; margin-bottom: 5px; } #submit { font-size: 12px; color: #ffffff; height: 26px; line-height: 26px; background: url(/media/themes/foodexpress/nav.png); padding: 5px; text-align: center; border: none; margin-bottom: 5px; float: right; clear: both; } #commentform { width: 630px; padding: 5px; } .comment { width: 630px; height: 100%; margin-top: 10px; padding: 5px; } .commentlist li { list-style: none; } .commenttitle { height: 25px; line-height: 25px; font-size: 14px; color: #5d784f; padding-left: 5px; } .commenttitle a:link { color: #5d784f; text-decoration: none; } .commenttitle a:visited { color: #5d784f; text-decoration: none; } .commentimage img { width: 40px; height: 40px; background: #FFFFFF; border: 1px #d8d6d6 solid; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; padding: 3px; float: left; } .commentcontent { font-size: 12px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; } .commentcontent a:link { color: #5d784f; text-decoration: none; } .commentcontent a:visited { color: #5d784f; text-decoration: none; } .commentinfo { height: 25px; line-height: 25px; } .commentinfo a:link { color: #5d784f; text-decoration: none; } .commentinfo a:visited { color: #5d784f; text-decoration: none; } .commentinfoleft { font-size: 10px; color: #5d784f; margin-left: 5px; float: left; } .commentinfoleft a:link { color: #5d784f; text-decoration: none; } .commentinfoleft a:visited { color: #5d784f; text-decoration: none; } .commentinforight { font-size: 10px; color: #5d784f; margin-right: 5px; float: right; } .commentinforight a:link { color: #5d784f; text-decoration: none; } .commentinforight a:visited { color: #5d784f; text-decoration: none; } ul.children li.bypostauthor { width: 90%; margin-left: 25px; margin-bottom: 10px; } ul.children li.byuser { width: 90%; margin-left: 25px; margin-bottom: 10px; } #footer { height: 26px; line-height: 26px; background: url(/media/themes/foodexpress/nav.png); padding: 5px; /* Modification faite pour RBSChange */ text-align: center; } #footerleft { color: #ffffff; font-size: 12px; float: left; } #footerleft a:link { color: #ffffff; text-decoration: none; } #footerleft a:visited { color: #ffffff; text-decoration: none; } #footerleft a:hover { color: #84aa70; text-decoration: none; } #footerright { color: #ffffff; font-size: 12px; float: right; } #footerright a:link { color: #ffffff; text-decoration: none; } #footerright a:visited { color: #ffffff; text-decoration: none; } #footerright a:hover { color: #84aa70; text-decoration: none; } /* BEGIN navigation menu */ ul.tagged-menu-horizontal li a.link,ul.tagged-menu-horizontal li strong { padding: 0; } #navigationleft li { width: 119px; height: 34px; text-align: center; background: url(/media/themes/foodexpress/hover.png); display: block; float: left; } #navigationleft li a,#navigationleft a:link,#navigationleft a:visited,#navigationleft strong { color: #ffffff; text-decoration: none; } #navigationleft a:hover { color: #84aa70; } #header #navigation #navigationleft div.modules-website-ConfigurableMenu span.separator { visibility: hidden; } ul.thread li { display: inline; } #footer div.modules-website-ConfigurableMenu li { display:inline; } #footer div.modules-website-ConfigurableMenu li a { color:#ffffff; } #footer div.modules-website-ConfigurableMenu li a:hover { color:#84aa70; } /* END navigation menu */ /* BEGIN search engine */ div.modules-solrsearch-form { padding: 0; } fieldset.solrsearch-fieldset { border-style: none; padding: 0px; } #navigationright .textfield { width: 220px; height: 13px; font-size: 12px; background: #ffffff; border: none; padding: 5px; color: #5d784f; line-height: 18px; text-align: right; margin-top: 5px; margin-right: 5px; } #navigationright .button { vertical-align: bottom; margin-bottom: 5px; } /* END search engine */ /* BEGIN breadcrumb */ div.modules-website-thread { padding-top: 10px; padding-left: 10px; margin-bottom: 20px; width: 100%; font-size: 12px; } ul.thread li a.link,ul.thread li span { color: #5D784F; } ul.thread li span { color: #000; } /* END breadcrumb */
install.xml
il faut réinstaller le thème pour que les modifications soient prises en compte.
Comme nous avons modifier notre fichier install.xml
, nous réinstallons le thème afin qu'il soit bien pris en compte :
$ php framework/bin/change.php theme.install foodexpress == Install == Theme foodexpress installed successfully == Clear webapp cache == Webapp cache directory cleared => Exiting...
Une fois le thème réinstallé, il ne faut pas oublier d'ajouter les templates du thème au niveau du site, puis d'affecter le template à une page afin de pouvoir le visualiser.