Outils pour utilisateurs

Outils du site


Panneau latéral

html_design:convert_wp:get_style_css

Récupérer les styles CSS

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>

Récupération des ressources du thèmes

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.

Quelques corrections de styles et de structure

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

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

Le moteur de recherche

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>

Le fil d'Ariane

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

Divers

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

Prise en compte des modifications

IMPORTANT : Lorsque l'on modifie le fichier 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.

Screenshots

Nous arrivons à afficher une page semblable à celle ci-dessous :

Spécialisation des styles pour le backoffice

html_design/convert_wp/get_style_css.txt · Dernière modification: 2017/01/19 14:54 (modification externe)