Accueil > Recettes Techniques > SPIP > SPIP : Composer les squelettes par défaut (DIST) avec les CSS

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

dimanche 16 septembre 2007, 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.

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.

[1] Cascading Style Sheet

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

[3] Squelettes 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

[4] Pour 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

Messages

  • A 55 ans, je me lance dans le site WEB. J’ai toujours travailler dans le monde de l’Informatique mais autant le "hard" n’a pas trop de secret pour moi, pour le "soft" c’est comme si je me mettais au chinois avec l’intention d’écrire une nouvelle.
    Je travaille avec (EASYPHP, SPIP1.9.2c, MOZILLA,N|vu,....)

    Quels "outils" (éditeur HTML notamment) péconisez-vous ? (de préférence gratuiciel) et quelle méthodologie pour les faires travailler ensembles ?
    Pour "essayer d’adapter les page SPIP" j’ai N|vu mais à lire les forums ce ne serait pas le meilleur. Il ferait quelques "plaisanteries" qui auraient le don "d’énerver SPIP".

    Je vais essayer de "mettre en musique les arrangements de cet article" si j’arrive à modifier ne serait-ce que l’austérité de la premièere page d’accueil du site j’aurai atteint le nivarna ....(WebSite !).
    Merci de vos conseils et continuez à nous rendre moins ignare par vos analyses documenteés dont j’apprécie la pédagogie.
    Merci- Cordialement

    • Bonjour et merci,

      Je ne suis pas certain que ce soit le meilleur endroit pour poser une question aussi générale et surtout pour avoir des réponses mais je vais tacher d’y répondre.

      Tout d’abord il faut distinguer les langages que je qualifierai de base (HTML, PHP, CSS...) et les outils de gestion de contenus en ligne (SPIP). SPIP est un programme construit avec des langages de base qui permet de gérer des contenus sans connaître les langages de base. Les langages de base ne sont nécessaire que lorsqu’on veut ’personnaliser’ SPIP.

      Ceci étant entendu. Voici en grandes lignes ce qui me semble nécessaire de rappeler sur ces langages :
      – HTML : sert à structurer le contenu. le html est statique
      – CSS : sert à mettre en forme le html pour que ce soit plus joli/lisible/clair etc.
      – Boucles/balise SPIP : sert à insérer dans un html classique des contenus dynamique. Ainsi on crée un seul patron (ou squelette) pour tous les articles et SPIP s’occupe avec ses boucles de remplir avec ce qu’il faut pour que chaque article s’affiche comme il faut avec un contenu propre et une présentation homogène.

      Je laisse de coté la partie remplissage avec du contenu qui est assez bien géré par la partie administration de SPIP et je continue sur la présentation.

      SPIP est livré avec une présentation par défaut (DIST), on dit aussi avec un jeu de squelette par défaut. Sous SPIP tous les affichage passent nécessairement par ces squelettes (qui ne sont jamais que des patrons d’affichage). Tout le travail de personnalisation de la présentation va passer par un travail sur ces fichiers squelettes. La bonne méthode est de recopier les fichier qu’on veut modifier du répertoire DIST vers un répertoire squelettes que l’on créera si nécessaire.

      Pour personnaliser SPIP, vous avez deux possibilités.

      • Si les modification sont légères vous pouvez vous contenter de modifier habillage.css (que vous trouverez aussi dans dist et qu’il faut recopier dans squelettes). C’est de celà que mes articles traitent. Il vous suffit de recopier un bout de code en bas de ce fichier, de le mettre dans squelettes et de faire recalculer la page (ou vider le cache dans la partie admin), pour que votre page soit modifiée.
      • Si vous vous avez besoin de modifications plus sérieuses (notamment concernant l’organisation des contenus) il vous faudra éditer les squelettes (je vous renvois alors sur la documentation officielle). Le problème est que ces squelettes sont un mélange de HTML et de boucles SPIP, donc un éditeur WYSIWYG risque de ne pas bien marcher. Personnellement j’utilise un éditeur ASCII classique (notepad ou gedit selon le système d’exploitation), mais ça demande un peu de connaissance en HTML et en boucles SPIP.

      Pour la question sur les outils, j’utilise exclusivement des gratuiciels depuis que je suis passé intégralement sous Linux, donc je ne saurai vous en conseiller d’autre.
      A mon sens si vous voulez vous lancer dans le web, utilisez toujours les outils les plus basiques possibles, au moins ça vous permettra de voir vraiment ce qu’il y a dans la "bête". Les outils dits ’évolués’ font en faits souvent des tas de choix à votre place dont vous êtes prisonnier par la suite (quand ces choix ne sont pas carrément mauvais). Maintenant si c’est un mal nécessaire et temporaire vous gagnerez à utiliser des outils clefs en main et pourquoi pas pour SPIP à récupérer un des trés bon squelette proposé par la communauté.

      ps : et puis notepad/gedit marchent aussi bien pour le html que pour les css (et plein d’autres choses )

    • salut
      je tiens à saluer ton savoir-faire et te remercier pour ce tuto clair et conçis. j’avoue que je n’en ai pas encore vu un si effaicace depuis que je tripote dans spip
      félicitations
      daniel

    • Merci, ça fait plaisir. Je vais essayer de refaire une série, dès que j’aurais un peu plus de temps.

  • Bonjour, un grand merci pour l’article qui m’aide beaucoup. Pour mettre la banniere je ne sasi pas comment appeler l’image. J’ai placé cette derniere dans squelettes/images elle n’apparaît pas si je mets :

    background-image:url(ma_banniere.png)

    j’ai essayé comme suit, ça ne marche pas non plus :

    background-image:img src="#CHEMINimages/banniere_site.jpg"

    si vous avez la clef, je serais très content d’avoir cette info ! merci d’avance,
    gwen

    • Ah ! la question du chemin vers les ressources ! C’est une question sur laquelle je bute régulièrement : d’un serveur à l’autre, d’un langage de programmation à l’autre, ça change.

      Bon rapidement, je dirais que

      background-image:url(images/banniere_site.jpg) ;

      dans un fichier CSS devrait marcher.
      Après je tenterais :
      background-image:url(squelettes/images/banniere_site.jpg) ;

      Dans ta seconde proposition, il y a plusieurs choses qui font que ça ne peut pas marcher :
      – tu mélange du css et du html
      – tu utilises #CHEMIN qui est une balise SPIP dans une CSS qui n’est pas (par défaut) généré par SPIP, donc ça n’a pas de sens.

    • bon les gars pour comprendre comment fonctionne les url en css sous spip, c’est pas compliquer...
      si vous avez un répertoire "squelettes" dedans un répertoire "design" avec les images de votre design, puis un autre "css" avec la feuille de style habillage.css.

      le répertoire "squelettes" est au même niveau que spip.php qui est le fichier qui appelle tous les autres. Donc si je veux pointer une url image dans une css et que ma css soit fonctionnelle dans le fichier *.html de mon squelette appelé par spip.php, il faut penser au décalage de niveau des différents fichier.

      si #CHEMIN permet à spip de chercher sans se casser de savoir où est le fichier, ça ne marche pas ainsi en css car le code css n’est pas interpréter par du php.

      en clair pour une banniere je ferais :

      #entete background-image:url(../design/banniere.jpg) no-repeat left top ;

      voilà, j’espére avoir été assez clair, et comprehensible...

      et que l’on vous y reprenne plus au sujet des css.... LOL

  • Un très, très grand merci à toi, Julien, pour ce tuto qui m’éclaire enfin sur le dist !!!

    Etant en formation "créateur de sites web", je commençais à désespérer de comprendre le fin du fin de ce squelettes que je dois recopier puis modifier.

    J’indique ton article à tous mes collègues et sois sûr que, grâce à toi, nous avancerons beaucoup moins à l’aveuglette ;’)

    Catherine