Éducation, société et technologie
SPIP, squelettes et CSS

Modifier les styles CSS et les squelettes de SPIP

samedi 3 décembre 2005 par André Vincent , Étienne Lafrenière-Lemieux

Diverses méthodes de modification de l’apparence des squelettes de bases de SPIP.

Mise à jour de cet article effectuée le samedi 3 décembre 2005.

ATTENTION : les méthodes exposées ici remplacent celles décrites précédemment dans ce même article. Ces méthodes, beaucoup plus simples à mettre en oeuvre tiennent compte des modifications apportées dans la gestion des squelettes de SPIP à partir de la version 1.8.2. Il faudra donc veiller à mettre votre version SPIP à jour avant d’utiliser les méthodes décrites ici.

 Préalable

  1. Dupliquer le dossier /dist/ installé à la racine de SPIP (ce dossier contient les squelettes et les feuilles de styles propres à ce jeu de squelettes distribué par défaut avec SPIP).
  2. Renommer ce dossier /squelettes/. En présence d’un dossier portant exactement ce nom, SPIP utilise les squelettes qu’il contient en lieu et place de ceux contenus dans le dossier /dist/. Lors d’une éventuelle mise à jour de SPIP, le contenu de ce dossier restera intact, contrairement aux modifications que l’on aurait apporté directement dans le dossier /dist/, qui seront écrasées lors d’une mise à jour.
  3. Pour la suite des choses, toutes les modifications que nous apporterons aux squelettes et aux feuilles de styles de SPIP s’effectueront dans ce nouveau dossier /squelettes/.
  4. En cas de malheur, il y aura ainsi toujours possibilité de retourner aux originaux intacts dans le dossier /dist/.

 1. Modification des styles

Ici, nous n’interviendrons pas directement sur les squelettes. Nous allons plutôt modifier les feuilles de styles existantes : typographie.css et habillages.css.

1. Placer un bandeau en entête de toutes les pages du site
Exemple : Coalition pour les CÉGEPS

  • Nous devons d’abord dégager de l’espace dans le haut de toutes les pages pour y placer notre image. Une brève analyse de la strucutre HTML des diverses pages (à l’aide de l’excellente extension Web Developper pour Firefox), nous permet de dégager les constats suivants :
    • la structure de base de tous les squelettes place la navigation et tout le contenu dans 2 divisions : <div id="navigation"> et <div id="principal">
    • sauf la page contenant tout le Plan du site qui ne possède qu’une seule division : <div id="plan">
    • les propriétés de ces trois divisions se trouvent dans la feuille de style /squelettes/habillage.css.
  • Nous allons donc ajouter à la fin de la feuille de styles /squelettes/habillage.css la règle pour modifier la marge du haut des trois divisions, sachant que l’image de notre bandeau a 100px de haut et que nous désirons conserver un espace de 30px entre le bandeau et du contenu de nos pages.
    Remarque : Nous pourrions modifier directement chacune des divisions, mais en l’ajoutant à la fin, nous gardons intact notre original et nous n’avons qu’une seule règle à modifier si nous augmentons la hauteur du bandeau.
  • Créer dans le dossier /squelettes/ un dossier pour contenir les images, dans notre exemple, le dossier /img/ et y télécharger l’image du bandeau.
  • Toujour à la fin de notre feuille de style /squelettes/habillage.css, nous allons maintenant établir notre règle pour placer l’image du bandeau :
  • Nous allons aussi cacher le petit logo de SPIP sous le menu de gauche (nous reprendrons plus loin dans cet article le lien vers SPIP dans un pied de page) :

2. Placer une image sous le menu de gauche
Exemple : Coalition pour les CÉGEPS

  • Pour obtenir le résultat désiré, nous allons fixer un padding-bottom d’une dimension légèrement plus élevé que la hauteur de l’image à placer en arrière fond ; l’image est positionnée au centre, au bas de la division #navigation :

3. Modifier la typographie
Exemple : Coalition pour les CÉGEPS

  • Pour changer les attributs typographiques, il suffit de modifier la feuille de styles /squelettes/typographie.css. Nous procéderons de la même façon que précédemment, en ajoutant nos modifications à la fin.

 2. Modification des squelettes

1. Ajout d’un pied de page dans tous les squelettes.

Nous voulons ajouter des informations en pied de page sur toutes les pages. Voici le code que nous aimerions ajouter :

Voir le résultat dans le bas de la page sur Coalition pour les CÉGEPS.

Quelques explications

  • div id="pied"
    un nouveau sélecteur de division dont nous devrons définir les propriétés à la fin de notre feuille de styles /squelettes/habillage.css
  • a class="spip_out"
    sélecteur d’ancre (hyperlien) dont les propriétés sont déjà définis dans la feuille de style /squelettes/typographie.css
  • href="#URL_SITE_SPIP
    balise SPIP qui n’exige pas de mise en boucle et qui rendra l’adresse absolue du site ; dans notre exemple, cette balise produira : http://coalition-cegeps.qc.ca.edu.
  • <:accueil_site:>, <:plan_site:>, <:info_contact:>, etc.
    sont des chaînes de caractères multilingues prédéfinies dans dans les fichiers de langues de SPIP et qui seront rendu dans le contexte de langue choisie par l’administrteur du site ou le rédacteur de l’article ou encore du visiteur sur un site multilingue. Ainsi, <:accueil_site:> affichera « Accueil du site » dans des pages en français et « Home Page » dans des pages en anglais.
  • <BOUCLE_contact(AUTEURS)
    est une BOUCLE de SPIP qui va extraire de la base de données le nom de l’auteur numéro 1 (généralement l’administrateur ou le webmestre du site) et construira un lien vers une page de cet auteur avec un formulaire pour lui adresser un message.

L’inclusion du formulaire dans toutes les pages

Nous pourrions évidemment copier et coller le code dans tous les squelettes sommaire.html, article.html,rubrique.html, etc. Mais advenant la nécessité de modifier ce bout de code, il faudra aller systématiquement modifer ce code dans tous les squelettes. Il existe un raccourci SPIP qui va grandement nous simplifier la vie. C’est l’inclusion d’un fichier dans les squelettes. Voici comment procéder :

  1. Créer dans le fichier /squelettes/inc-pied.html ou sous tout autre nom que vous désirez.
  2. Dans le bas de chacun des squelettes, juste avant la fermeture de la balise </body>, copier et coller la ligne suivante :

Ainsi, on n’a qu’un seul fichier à maintenir (inc-pied.html) et dont le contenu sera inclus dans chacun de nos squelettes à l’indroit désiré. Cette technique est désignée sous le terme générique de « Construction modulaire » de gabarits par inclusion.


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 34656 / 1820693

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web dynamiques  Suivre la vie du site SPIP  Suivre la vie du site Trucs et astuces SPIP   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 4