SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 184 visiteurs en ce moment

Accueil > Squelettes > Squelettes par défaut > Variations sur la dist 1.9 > Composer les squelettes par défaut (DIST) avec les CSS

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

23 septembre 2007 – par Julien Falconnet – commentaire

2 votes

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 :

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

Télécharger

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 :

  1. 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 :

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

Télécharger

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 :

  1. .invisible{
  2. position: relative; top: 0em;
  3. }

Télécharger

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.

  1. #conteneur #contenu {float: left;}
  2. #conteneur #navigation {float: right;}

Télécharger

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

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

Télécharger

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.

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

Télécharger

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

  1. #conteneur #contenu {float: right;}
  2. #conteneur #navigation {float: left;}
  3. #contenu .contre-encart {float: right;}
  4. #contenu .encart {float: left;}
  5. #entete #nom_site_spip, #entete a .spip_logos {float: right;}
  6. #entete .formulaire_recherche { float: left; }

Télécharger

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...)

  1. /*spip_style*/
  2. .spip_documents_left { float: left; }
  3. .spip_documents_right { float: right;}
  4. .spip_modele { float: right;}
  5. /*habillage*/
  6. #conteneur #contenu {float: left;}
  7. #conteneur #navigation {float: right;}
  8. #contenu .contre-encart {float: left;}
  9. #contenu .encart {float: right;}
  10. #entete #nom_site_spip, #entete a .spip_logos {float: left;}
  11. #entete .formulaire_recherche { float: right; }
  12. .cartouche .spip_logos {float: right;}
  13. .liste-articles li .spip_logos {float: right;}
  14. .liste-articles li .enclosures {float: right;}
  15. .spip_bouton input { float: right; }
  16. .formulaire_login_forum .spip_logos { float: right;}
  17. ul.choix_mots { float: left; }

Télécharger

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.

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

Télécharger

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

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

Télécharger

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

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

Télécharger

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

  1. #entete{
  2. background-image:url(ma_banniere.png);
  3. background-repeat:no-repeat;
  4. padding-top:90px;
  5. border:0px;
  6. }
  7. #nom_site_spip{
  8. position: absolute; top: -3000em; height: 1%;
  9. }

Télécharger

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.

  1. #page {
  2. width: 48em;
  3. text-align: left;
  4. margin-left: auto;
  5. margin-right: auto;
  6. }

Télécharger

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é.

  1. body{
  2. background:#003;
  3. }
  4. #page {
  5. background:#FFF;
  6. padding:10px;
  7. }

Télécharger

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

  1. #page { width: 60em;}
  2. #conteneur #contenu {width: 43em;}
  3. #conteneur #navigation{width: 15em;}
  4. #contenu .encart {width: 20em;}
  5. #contenu .contre-encart {width: 20em;}

Télécharger

Et un exemple de rétrécissement

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

Télécharger

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é) :

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

Télécharger

-  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.

Voir en ligne : L’article original sur le site de Julien Falconnet

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

Dernière modification de cette page le 23 septembre 2007

Retour en haut de la page

Vos commentaires

  • Le 6 mai 2009 à 19:22, par seve En réponse à : Composer les squelettes par défaut (DIST) avec les CSS

    Trop bien, je trouve dans tes tuto toutes les explications claires nettes et précises que je cherche depuis le début ! c’est vraiment cool ! ça va me faire gagner un temps fou ! je ne voulais justement intervenir que sur la page CSS de base sans avoir à tout recréer ! Tes explications tombent à pic : MERCI pour le temps que tu as du passes à rédiger ces tuto ! Je vais de ce pas consulter ton site

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • ScolaSPIP 4

    19 janvier 2016 – 163 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Vérifier ses plugins avant un changement de version de SPIP

    28 mars – commentaire

    Lister la compatibilité des plugins avec une autre version de SPIP Ce plugin est le successeur du plugin Vérifier ses plugins pour le passage à SPIP 3.1. Il permet de vérifier si ces plugins sont compatibles avec des versions plus récentes de (...)

  • bigfoot

    16 juin 2015 – 58 commentaires

    Un plugin qui facilite l’utilisation des notes de bas de page en les affichant dans des infobulles à l’aide d’un peu de javascript. Le constat de l’auteur du script : Les notes de bas de page sur le web sont une plaie. Tu dois d’abord essayer de (...)

  • Mailshot

    16 janvier 2013 – 254 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)

  • SkelEditor 2.0

    1er mars 2010 – 74 commentaires

    La version remaniée et enrichie du plugin, pour SPIP 2.1, qui vous permet d’éditer votre squelette directement en ligne sans passer dans le FTP Ce plugin vous permet d’éditer les fichiers du squelette courant depuis l’interface privé. Cela peut (...)