"Sofresh : analyse générale de la mise en pages"

Objectif final de l'article : être capable de créer ses propres gabarits de mise en page pour Plume CMS 1.0.2 (css + xhtml 1.0 strict + php)

chapitre 1 : installer un nouveau gabarit "prêt à l'emploi" pour Plume CMS. Choix du gabarits "sofresh" comme base de départ.

2. installation du gabarit "sofresh" :

Télécharger le gabarit "sofresh" ici et l'installer via votre client ftp.
Comment faire ?
Après avoir décompressé l'archive .ZIP, deux dossiers s'offrent à vous :
/templates/ : contient tous les gabarits à proprement parler du thème (les fichiers .php)
/theme/ : contient les feuilles de style (.css) et les images du thème (dossier img)
Ensuite :
- Copiez tous les fichiers contenus dans le répertoire /templates/, dans le répertoire de gabarits de votre site (par défaut, il s'agit du répertoire /manager/templates/default/).
- Copiez le dosssier "theme" dans le répertoire /xmedia/theme/ ; et renommez ensuite ce dernier avec le nom du thème (= sofresh).on a au final l'arborescence suivante : /xmedia/theme/sofresh/

Attention !!
Avant de copier les fichiers php du dossier "templates" de sofresh, prenez soin de ne pas supprimer votre dossier "default" (les gabarits par défaut de plume ); il suffit de renommez ce fichier avec votre client ftp (exemple : "default_origine") et de créer un autre dossier nommé "default" dans le quel vous mettrez les 6 fichiers php issu de sofresh ainsi que le fichier rss.rdf à récupérer dans le dossier "default_origine"
De même, laissez présents les documents suivants dans le dossier .../xmedia/theme : plume-cms-powered.png (logo plume dans le #footer), rss.css (feuille de style liée au fichier rss.php =>fil de description rss), style.css ( feuille de style du thème par défaut de plume => si jamais vous avez envie de revenir au thème par défaut plus tard :-))

Attention !!
Il faut vider le cache de plume pour pouvoir tester et visualiser votre nouveau gabarit (chaque fois que vous faites une transformation dans les fichiers du template d'ailleurs !!), de même que celui de votre navigateur (actualiser la page). Sinon votre site apparaîtra comme avant, sans changement apparant !
Pour vider le cache : dans le manager allez dans Outils / Informations sur PLUME CMS
en dessous des tables, cliquez sur "nettoyer" .
Notez qu'un plugin "Nettoyage du cache express" est disponible sur le wiki.

Remarque :
L'installation de nouveaux gabarits pour Plume n'est pas vraiment intuitive : il se peut que votre nouveau site ne tienne pas compte de la feuille de style (layout.css et style.css). Vérifiez bien (en fonction de l'endroit où vous avez installé Plume), le lien vers la css dans chacun des fichiers .php du dossier template/default :
<link rel="stylesheet" type="text/css" href="<?php pxInfo('filesurl'); ?>theme/sofresh/style.css" media="screen" />

3. Pourquoi choisir le thème "sofresh" comme base de départ ?

1. C'est un thème (= ensemble de gabarits !) à la "française", proposé par Maurice Svay pour le weblog (script php/mysql) : Dotclear
   A quoi ressemble le gabarit "sofresh" ? Eh bien, à ceci ! Avec l'avis des internautes sur le blog de M.Svay.
2. L'imbrication des blocs de base est simplifiée (balises <div>) par rapport au Plume d'origine
3. Le code php est très claire (idem que pour le thème par défaut )
4. La feuille de style est divisée en deux pour plus de compréhension avec des règles "plus simples" que sur la feuille de style d'origine
5. Si vous n'arrivez pas à créer vos propres gabarits, celui-ci est beaucoup mieux que le thème par défaut ;-)

Suite à cette analyse du thème Sofresh, j'ai apporté quelques modifications aux fichiers de M.Svay : traduction en français, validité xhtml 1.0 strict, validité css 2.0, correctrion et allègement du code.
Vous pouvez télécharger et installer cette deuxième version du thème sofresh : sofresh2.zip (page de téléchargement sur le wiki : Exemples de gabarits), mais l'analyse qui suit est de toute façon indispensable pour qui veut comprendre la construction des templates de Plume.

4. Analyse de la mise en page générale : l'imbrication des blocs de base et leur positionnement css avec layout.css

intro :
Un "gabarit Plume" est constitué de 7 fichiers se trouvant dans .../manager/templates/default (404.php, category_category.php, category_homepage.php, resource_article.php, resource_news.php, search.php, rss.rdf) associés à un thème (feuilles de style + dossier image) se trouvant dans .../xmedia/theme/nomdevotretheme

A quoi correspondent ces fichiers ? :

category_homepage.php : gabarit chargé par défault lorsque l'on se connecte à votre site, c'est votre page d'acueil. Il est chargé chaque fois que l'on clique sur le nom de votre site ou sur le lien "retour à l'accueil".
category_category.php : gabarit qui est chargé lorsque l'on clique sur une des catégories crées (présentation de la catégorie dans le menu droit + nombres de ressources...)
resource_article.php : chargé lorsque l'on clique sur un article (gabarit pour l'affichage des articles)
resource_news.php : chargé lorsqu'on clique sur une news (gabarit pour l'affichage des news)
404.php : chargé pour afficher les erreurs d'ouvertures de page (pages non trouvées) et tous autres types d'erreurs php
search.php : chargé pour afficher le résultat d'une recherche.

rss.rdf : attention !ce fichier très important (qui sert à la création du fil de description rss) n'est pas présent dans le dossier templates du thème sofresh : il faudra le récupérer dans le dossier ...../manager/templates/default

Remarque pour les débutants : le code PHP de ces gabarits n'est là que pour gérer les contenus à afficher (dynamiquement) via la base de donnée. La mise en page générale est assurée par les éléments html (avec ici un doctype en xhtml 1.0 strict) associés à une ou plusieurs feuilles de style.

Le thème sofresh en question :
Ainsi, vous l'aviez peut-être remarqué, TOUS ces fichiers .php ont la même imbrication des blocs de base (gabarit de mise en pages), a savoir :

<div id="page">
	<div id="top"> </div>
	<p id="prelude"> </p>
	<div id="main">
		<div id="content"> </div>
	</div>
	<div id="sidebar"> </div>
	<p id="footer"> </p>
</div>

La feuille de style qui positionne ces éléments (css-p = positionnement css) est layout.css (elle est prise en compte par le @import "layout.css"; présent en haut de style.css).
Voici les règles qui nous intéressent :

html, body{
 margin: 0;      /* pour annuler les marges par défaut de IE, et mettre les autres d'accord ! */
 padding: 0;
}


body{
 text-align: center;  /* pour centrer le blog dans IE5 */
}

#page{
 width: 800px;       /* largeur fixe en pixel : mise en page de type FIXE ! */
 margin: 2em auto;   /* le bloc est centré automatiquement avec des marges extérieures en haut et en bas */
 text-align: left;   /* alignement du texte à gauche */
 background: #FFF;   /* couleur de fond pour le bloc page (blanc) */
 color: #000;        /* couleur de texte(noire) */
}

#top{
 margin: 0;          /* aucunes marges extérieures */
 height: 100px;      /* on définit une hauteur fixe, image mise en bacground : cf plus bas */
}

#prelude{
 position: relative; /* positionnement en dehors du flux de la page */
 top: -85px;         /* placement par rapport au haut de l'élément conteneur (= #page) */
 margin: 0;          /* aucunes marges extérieures */
}

#main{
 width: 548px;   /* largeur fixe en pixel */ 
 float: left;    /* positionnement flottant à gauche */
}

#content{
 margin: 15px;       /* marges extérieures de 15px */
 margin-left: 25px;  /* marge extérieure gauche plus grande : 25px */
}

#sidebar{
 width: 250px;  /* largeur fixe de 250 px (800 - 548 = 252px restant) */
 float: right;  /* positionnement flottant à droite */
}


#sidebar div{              /* positionnement des éléments DIV présents dans le bloc #sidebar */
 padding: 0 10px;          /* marges internes de 10px à droite et à gauche */
 margin: 2em 15px 0 15px;  /* marges externes */
}

#footer{
 clear: both;   /* permet au footer de se placé en dessous des deux blocs flottants #main et #sidebar */
 margin: 0;     /* pas de marges externes */
 height: 35px;  /* hauteur fixe pour le footer => correspond à la hauteur de footer.jpg claquée en background */
}

Il y a des règles css dans style.css qui nous intéressent, j'ai juste sélectionné celles qui utilisent la propriété "background", pour comprendre comment les images de fond sont utilisées. Il est aussi important de visualiser les règles s'appliquant à l'élément body.
Voici donc :

body{
 background: #EEE;                            /* couleur de fond (gris) */
 color: #000;                                 /* couleur de texte (noir) */
 font-size: 76%;                              /* taille de police pour tout le site => un peu plus petite que l'affichage par défaut des navigateurs */
 font-family: Arial, Helvetica, sans-serif;   /* on définit un groupe de polices pour tout le site */
 border-top: 10px solid #DDD;                 /* une bordure en haut de 10px d'épaisseur, de forme solide, couleur grise (??) */
}


#page{
 background: #FFF url(img/page.png) repeat-y;  /* couleur de fond (blanc) + image de fond se répétant verticalement */
}


#top{
 color: #09F;                                    /* couleur de texte (bleu)  */
 background: #FFF url(img/top.jpg) no-repeat;    /* top.jpg plaquée en background, sa hauteur est de 120px , le #top a une hauteur définit à 100px */
}


#footer{
 background: #FFF url(img/footer.jpg) no-repeat;  /* couleur de fond (blanc) + image de 35px de hauteur claquée en fond */
 color: #999;                                     /* couleur de police (gris foncé) */
 text-align: center;                              /* centrage du texte dans le bloc */
}

Conclusion sur la mise en page :

La mise en page du gabarit "sofresh" est de type fixe (largeur de 800 px pour le bloc #page accueillant les autres). On a deux blocs flottants (#sidebar et #main) qui coexistent l'un à côté de l'autre. C'est une des innombrables possibilités de mise en pages avec les CSS (chacun ses goûts)

Voici une capture d'écran présentant la mise en page générale du thème "sofresh" (avec un peu de couleur et sans l'utilisation des images du thème en "background").

5. annexe : les images fournies avec le thème sofresh :

Le dossier image se trouve dans .../xmedia/theme/sofresh/img. La plupart de ces images sont utilisées avec la propriété "background" dans les règles ci-desssus.

en détails : les images qui "stylent" le gabarit (plaquées en fond):

les propriétés de ces images :

6. annexe 2 : supprimer les règles css inutiles :

Les règles suivantes (dans style.css) sont inutiles car issues de Dotclear , l'auteur du thème Sofresh ne les a pas supprimées.
Vous pouvez les supprimer en toute confiance:

/* 
Classes spéciales pour insérer des images par exemple 
Les éléments rendus "flottants" avec ces classes ne
dépassent pas du billet grâce à la classe .resource-info-co
*/
.right{
	float: right;
	margin-left: 1em;
}

.left{
	float: left;
	margin-right: 1em;
}

.resource-info-co{
	clear: both;
	text-align: right;
}

.resource-info-co span{
	display: none;
}

.resource-info-co a, .resource-info-co a:visited{
	text-decoration: none;
	color: #666;
	padding-left: 12px;
	background: transparent url(img/bulle.png) no-repeat left center;
}

.resource-info-co a:hover{
	color: #333;
	padding-left: 12px;
	background: transparent url(img/bulle.png) no-repeat left center;
}

.comment-info{
	margin-bottom: 0;
}

#comments blockquote, #trackbacks blockquote{
	margin: 0;
	padding: 0 1em;
	text-align: justify;
	border: 1px dotted #CCC;
}

.field label{
	display: block;
}

Les règles qui me semblent inutiles (??) :

#selection h2{
	color: #333;
}
.field label{
	display: block;
}
.resource-info span{
	display: none;
}