SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 288 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

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là