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

Modifier la composition (ou la maquette) des pages des squelettes par défaut de SPIP (DIST/1.9) avec quelques interventions minimalistes au niveau CSS.

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

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.

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

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom