Personnaliser les feuilles de styles

Le squelette de base est livré avec trois feuilles de styles par défaut, situés dans le dossier ../ahuntsic/styles/ :

• base.css - pour l’affichage à l’écran,
• alter.css - uniquement pour l’affichage des images de fond (tel le bandeau) et certains blocs pour compatibilité multilingue,
• print.css - pour l’impression.

La cascade des styles

• Les feuilles de styles sont appelées dans le fichier ../ahuntsic/styles.html qui est inclus dans tous les squelettes (article.html, breve.html, rubrique.html, etc…) par le code suivant :
  
  <INCLURE{fond=styles}{lang}>

• Le fichier styles.html appelle les feuilles de styles sous la forme suivante :
  1. <link rel="stylesheet"
  2.     href="#URL_SITE_SPIP/(#CHEMIN{styles/base.css}|direction_css)"
  3.     type="text/css"
  4.     media="projection, screen, tv" />

  Télécharger

• Les feuilles de styles appelées dans styles.html sont les suivantes
  • spip_style.css - la feuille de styles par défaut livré avec SPIP qui se trouve dans /dist/,
  • base.css - la feuille de styles de base du squelette AHUNTSIC qui se trouve dans ../ahuntsic/styles/ ; styles susceptibles de changer selon le sens d’écriture de la langue du contexte,
  • alter.css - la feuille de styles de base du squelette AHUNTSIC qui se trouve dans ../ahuntsic/styles/ ; styles applicables à toutes les langues, le sens d’écriture reste invariable ; cette feuille de style est notamment utilisée pour toutes les images de fond placée par règles de styles,
  • print.css - les styles pour impression du squelette AHUNTSIC qui se trouve dans ..ahuntsic/styles/,
• Le fichier styles.html appelle aussi deux autres de feuilles de styles de personnalisation qui ne sont pas livrées dans le jeu de squelettes de base, mais qui sont utilisées par des thèmes de personnalisation ou de configuration :
  • perso.css
  • habillages.css
• Si vous créez une de ces feuilles de styles directement dans le dossier /squelettes/styles/ (créé directement à la racine de SPIP), cette feuille de styles sera reconnue et prise en compte par le squelette AHUNTSIC, en priorité sur toute autre du même nom située dans le dossier /plugins/.
• En pratique, pour un site qui n’utilise pas de langues dont l’écriture se déroule de droite à gauche (arabe, hébreux, etc…), vous n’aurez sans doute besoin de créer que la feuille de styles /squelettes/styles/perso.css .
• Pour les sites qui utilisent une écriture de droite à gauche, vous devrez inscrire toutes les règles qui comportent une propriété ou une valeur left ou right dans une feuille de style personnalisée habillages.css , si vous désirez que l’écriture ou la position soit inversée selon la langue du contexte.

CONSEIL
Ne recopiez PAS toutes les règles de la feuille base.css dans votre feuille de styles personnalisée ; ne recopiez dans /squelettes/styles/perso.css que les règles et les propriétés que vous désirez modifier. Cela facilitera grandement la maintenance de vos styles et ça vous évitera beaucoup de casse-tête lors de la mise à jour de vos squelettes.

ATTENTION : si vous migrez d’une version antérieure à la version 1.9.1 du jeu de squelettes d’Alternatives, vous devrez sans doute ajuster les règles de styles de votre fichier perso.css. puisque nous avons maintenant combiné dans base.css les règles de styles de la feuille de styles alt-4.css des versions précédente.

FORUM des utilisateurs