Ajouter des feuilles de style

Soumis par kolossaldrupal le mer, 15/04/2009 - 06:00
in
Date du document original en anglais : 24 Août 2009 – 23h08 http://drupal.org/node/171209 

Cette partie explique comment ajouter une feuille de style via le fichier .info du thème. Pour ajouter une feuille de style par programmation, reportez-vous à la page sur les fonctions API (API functions). Avec les explications fournies ici, vous apprendrez à modifier les styles d'un thème.

Remarques :

  • Quand vous travaillez avec des feuilles de style, assurez-vous d'avoir désactivé l'optimisation CSS (menu Administrer » Configuration du site » Performance » Optimise les fichiers CSS). Si elle est activée, aucune modification ne sera répercutée sur votre site à moins que les styles ajoutés ne soient purgés.

Vous pouvez réactiver l'optimisation à la fin de votre travail.

  • Le fichier .info est mis en cache. L'ajout ou la suppression de styles ne sera pas détectée tant que le cache n'aura pas été vidé.(ne confondez pas ce cache avec le theme registry). Pour vider le cache, faites l'une des opérations suivantes :
    1. cliquez sur le bouton « Supprimer les données du cache » située dans Administrer » Configuration du site » Performance
    2. Si le bloc Devel est actif (livré avec le module Devel), cliquez sur le lien « Vider le cache » (« Empty cache »)
    3. Ou affichez simplement la page de sélection des thèmes dans Administrer » Construction du site » Thèmes.

Ajouter des feuilles de style

Par défaut, si aucune autre feuille de style n'a été définie dans le fichier .info, c'est un fichier nommé style.css qui sera utilisé par votre thème.

Ajouter une feuille de style est aussi simple que définir une clé stylesheets avec sa media property comme indice entre crochets , et le nom de la feuille de style comme valeur.

N'oubliez pas que la déclaration de styles personnalisés empêche l'utilisation du fichier style.css. Si votre thème utilise cette feuille de style-là, vous devrez la déclarer explicitement.

; Ajouter une feuille de style pour tous les médias
stylesheets[all][] = theStyle.css

; Ajouter une feuille de style pour l'écran et le projecteur
stylesheets[screen, projector][] = theScreenProjectorStyle.css

; Ajouter une feuille de style pour l'imprimante
stylesheets[print][] = thePrintStyle.css

Quelques remarques :

  • Notez la paire de crochets vides entre [media] et = stylename.css.
  • Les styles apparaissent dans le header de la page dans le même ordre que leur déclaration dans le fichier .info.
  • Les feuilles de style peuvent être placées dans des sous-dossiers, par exemple stylesheets[all][] = stylesheets/styleName.css. C'est drôlement pratique d'un point de vue organisation, non ?