SPIP : Composer les squelettes par défaut (DIST) avec les CSS

, par Julien Falconnet

La version 1.9 de SPIP a apporté un squelette par défaut (nommé DIST) particulièrement bien construit, permettant de nombreuses personnalisation du site en passant simplement par l’édition de fichiers CSS. Il s’agit dans cet article d’explorer pratiquement quelques unes des possibilités de composition.

Objectif

L’objectif de cet article est de "tordre" la présentation de la DIST pour lui faire exprimer tout ce qu’elle "a dans le ventre" en terme de composition/maquette, et ce en touchant seulement aux fichiers CSS.

Pré-requis

Pour profiter pleinement de cet article le lecteur doit etre familier avec les notions suivantes :
 CSS [1]
 SPIP 1.9 [2]
 DIST [3] (savoir que c’est la présentation par défaut de SPIP)
 La lecture de l’article de présentation générale de la CSS de la DIST est fortement recommandée.
 Il n’est PAS nécessaire de savoir faire ses propres squelettes.

De plus, on rappelle que toutes les modifications dont il sera fait état ici, doivent être réalisées dans un répertoire /squelettes et non pas dans /dist au risque de perdre tout son travail à la prochaine mise à jour. Pour les vrais nouveaux je rappelle qu’il suffit de créer un répertoire /squelettes dans /spip et d’y copier les fichiers qu’on veut modifier (ici les .css). Après une mise à jours du cache ce seront automatiquement ces fichiers qui seront utilisés.

Méthode générale

Pour chaque type de modification proposée on fonctionnera de la même façon :
 Analyse du fonctionnement par défaut.
 Proposition de portions de code à personnaliser et à insérer. Ces insertions se font facilement en fin du fichier habillage.css. Comme c’est le dernier fichier css appelé, les déclarations finales auront la priorité sur toutes les précédentes, hormis les règles de priorité classiques qui obligeront parfois certaine déclarations à être particulièrement précises. A terme, il peut être discutable de laisser des ajout ’scotchés’ en fin de fichier, mais dans un premier temps cela permet de faire rapidement des modifications puissantes.

Masquer une zone (ou la révéler)

Pour certaines compositions, il est parfois nécessaire de masquer certaines informations. Par exemple, il peut être nécessaire de masquer le titre du site lorsqu’on préfère le remplacer par une bannière en image. Par ailleurs dans DIST plusieurs informations sont masquées par défaut grâce à la classe .invisible. La définition de cette classe est :

/* Non visible a l'ecran */
.invisible { 
    position: absolute; top: -3000em; height: 1%; }

On voit que plutôt qu’un display:none ; les auteurs ont préféré déplacer hors de la page les informations. Comme ce sont souvent des informations utiles (comme des titres) on peut penser qu’elle sont laissées pour aider au référencement. Si on choisi de masquer des portions du squelette par défaut, ce sera sans doute dans le même esprit, donc on choisi de conserver cette manière de masquer :

position: absolute; top: -3000em; height: 1%; 

Ensuite, il suffit d’ajouter ce code aux déclarations qui nous intéressent pour les voir disparaitre.

Par exemple pour masquer le titre du site :

#nom_site_spip{
    position: absolute; top: -3000em; height: 1%; }

A l’inverse, il peut être intéressant de révéler certains éléments masqués de la structure par défaut. Par exemple pour révéler tous les éléments invisibles :

.invisible{
     position: relative; top: 0em; 
}

PS : attention cette méthode ne fait pas disparaitre le contenu, les petits malins pourront toujours le trouver. Donc pour les informations que vous voulez vraiment rendre inaccessibles il faudra le faire au niveau du squelette ou de l’interface d’administration.

Jouer avec les "float", de gauche à droite et vice versa

La composition des pages de la DIST utilise massivement les float:left et float:right, pour mettre en place une construction en colonnes. Par exemple la mise dans une colonne droite du cadre (noisette) Rubrique et dans la colonne gauche le reste du contenu est composé grâce à ce système.

#conteneur #contenu {float: left;}
#conteneur #navigation {float: right;}

C’est le même fonctionnement pour la composition de l’entête avec le titre à gauche et le formulaire de recherche à droite.

#entete #nom_site_spip, #entete a .spip_logos {float: left;}
#entete .formulaire_recherche { float: right; }

On retrouve encore cette idée pour composition du bas de la page sommaire (accueil) ou la colonne principale (#contenu) se divise entre les articles plus anciens et les commentaires/fluxRss.

#contenu .contre-encart {float: left;}
#contenu .encart {float: right;}

Dés lors, la modification est triviale, il suffit d’échanger left et right pour voir s’inverser la composition.

#conteneur #contenu {float: right;}
#conteneur #navigation {float: left;}
#contenu .contre-encart {float: right;}
#contenu .encart {float: left;}
#entete #nom_site_spip, #entete a .spip_logos {float: right;}
#entete .formulaire_recherche { float: left; }

Ce n’est pas forcément joli (surtout dans l’entête) mais c’est simple et diablement efficace. Enfin à fin documentaire, voici toutes les lignes qui utilisent la directive float. Comme on le voit les autres utilisation sont plus classiques et consistent à laisser glisser à droite du texte des documents liés (images, documents joints...)

/*spip_style*/
.spip_documents_left { float: left; }
.spip_documents_right { float: right;}
.spip_modele { float: right;}
/*habillage*/
#conteneur #contenu {float: left;}
#conteneur #navigation {float: right;}
#contenu .contre-encart {float: left;}
#contenu .encart {float: right;}
#entete #nom_site_spip, #entete a .spip_logos {float: left;}
#entete .formulaire_recherche { float: right; }
.cartouche .spip_logos {float: right;}
.liste-articles li .spip_logos {float: right;}
.liste-articles li .enclosures {float: right;}
.spip_bouton input { float: right; }
.formulaire_login_forum .spip_logos { float: right;}
ul.choix_mots { float: left; } 

Ajouter une bannière

ATTENTION : Il existe une manière de faire cela sans toucher à la CSS. Je laisse cette section pour mémoire [4].

La bannière est souvent devenue incontournable (qui a dit malheureusement ? ) pour la plupart des sites. Elles sont souvent très travaillées, servant de base à l’ambiance du site, à son identité visuelle. Pourtant SPIP semble les avoir complètement oublié dans sa composition par défaut. Vraiment ? Pas tout à fait ! En fait il est très facile d’ajouter une bannière avec peu de travail. Voici une méthode parmi d’autres.

Pour ajouter la bannière, il va falloir résoudre trois problèmes :
 placer la bannière quelque part.
 lui faire de la place.
 supprimer ce qui pourrait le masquer.
Et puis il faut l’image du bannière, mais ça c’est votre problème ;).

Pour placer la bannière, on va choisir l’entête qui se trouve à peu près là ou se trouve où on attend ce type d’image.

#entete{
    background-image:url(ma_banniere.png);
    background-repeat:no-repeat;
 }

Il va maintenant falloir agrandir un peu l’entête, pour faire de la place à la bannière.

#entete{
    padding-top:90px; /* Penser à mettre la taille de la bannière plus quelques px*/
}

Enfin, nous allons cacher ce qui défigure notre jolie présentation

#entete{
    border:0px; /* pour retirer le trait qui souligne le titre*/
}
#nom_site_spip{
     position: absolute; top: -3000em; height: 1%; 
}

Après c’est à vous d’ajuster. En condensé cela donne :

#entete{
    background-image:url(ma_banniere.png);
    background-repeat:no-repeat;
    padding-top:90px; 
    border:0px;
}
#nom_site_spip{
     position: absolute; top: -3000em; height: 1%; 
}

Bien sur il pourrait être plus propre de faire une vraie image (<img src..) avec des alt et tout, mais pour cela il faudrait toucher au squelettes eux même.

Faire ressortir la "page"

Il existe une division qui passe complètement inaperçue dans la composition par défaut, mais qu’il peut être intéressante de personnaliser pour donner un effet de mise en relief. Cette division a l’id #page. Elle englobe tous les éléments de la page sauf ceux réservés à l’administration. Telle qu’elle, elle est transparente et ne sert qu’à fixer la largeur fixe de la composition générale et à la centrer. Voici sa déclaration.

#page {
	width: 48em;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

Le principal défaut de cette division invisible dans cette déclaration est que ce bloc adhère au contenu (padding nul), donc un changement de couleur seul donne un rendu laid. Il faut corriger alors grâce à un padding plus important. Chacun trouvera les réglages adaptés à son site et à sa charte graphique mais voici, une proposition pour passer simplement la DIST sur un arrière plan bleu foncé.

body{
	background:#003;
}
#page {
	background:#FFF;
	padding:10px;
}

Modifier la largeur par défaut de la page

L’autre intérêt de #page est qu’il fixe la largeur d’affichage du bloc général. En modifiant sa déclaration on peut donc jouer sur la largeur des informations à afficher. Mais les sous-divisions, ont aussi leurs largeurs propres. Il faut donc les modifier également.

Voici un exemple d’élargissement :

#page {	width: 60em;}
#conteneur #contenu {width: 43em;}
#conteneur #navigation{width: 15em;}
#contenu .encart {width: 20em;}
#contenu .contre-encart {width: 20em;}

Et un exemple de rétrécissement :

#page {	width: 30em;}
#conteneur #contenu {width: 20em;}
#conteneur #navigation{width: 9em;}
#contenu .encart {width: 7em;}
#contenu .contre-encart {width: 11em;}

Divers trucs

Pas de quoi faire un article à proprement parler mais c’est intéressant quand même.
 Ajuster le texte des articles (pour que ce soit bien droit à droite) :
.texte , .chapo{text-align:justify;}
 Des lettrines pour les titres. Si vous avez une petite icones dont vous voulez qu’elle décore joliment vos titres, vous pouvez jouer avec le code suivant (pour une image de 30px de coté) :

.titre, H3.spip{
	line-height : 30px; 
        padding-left : 30px;
	vertical-align: middle;
	background : url('h1.png') no-repeat 0 0;
}


 Bouger les blocs à la main. Nettement plus discutable et dangereuse, cette méthode peut demander beaucoup de temps pour ajuster le positionnement surtout si vous voulez être compatible avec de nombreux navigateurs. Il s’agit ici de positionner certains blocs "à la main" (position : absolute) pour réussir une composition complètement originale. Attention pourtant on rencontrera rapidement des limites liées à la composition des squelettes, en particulier du fait de l’imbriquement des blocs.

P.-S.

Il est possible de faire beaucoup de chose avec les CSS, mais attention, au bout d’un moment il devient tout de même plus efficace de modifier les squelettes.

Notes

[1Cascading Style Sheet

[2Système de Publication pour l’Internet Version 1.9

[3Squelettes par défaut de SPIP, appelé suivant le nom du répertoire où sont contenus tous les fichier : /dist/ sans doute pour squelettes de DISTribution

[4Pour mettre une bannière avec la DIST, il suffit d’aller dans Configuration et de mettre un logo pour le site. Ce logo prendra naturellement place là où se trouve le titre habituellement, en faisant disparaître le titre