Surcharger les feuilles de style des modules et des thèmes parents

Traduction de la page http://drupal.org/node/263967
publiée / actualisée le 11 Mars 2011 sur drupal.org;

Vous pouvez surcharger la feuille de style fournie par le noyau Drupal ou par des modules tiers.

La plupart des modules disposent d'une présentation par défaut pour l'affichage de leurs données. Cela comprend les balises HTML et la feuille de style associée (reportez-vous aux explications de overriding behavior pour le balisage). Ces styles par défaut peuvent être surchargés en réalisant des modifications dans votre thème.

Surcharger les feuilles de style du core et des modules additionnels

Pour surcharger ces feuilles de styles, vous devez les redéfinir dans le fichier .info du thème.

Prenons system-menus.css comme exemple. Il est situé dans modules/system/system-menus.css. Avec l'entrée suivante dans le fichier .info, la feuille de style originale sera ignorée et la vôtre sera chargée :

stylesheets[all][] = system-menus.css

Surcharger avec une feuille de style absente de votre thème fera que celle du core ou du module additionnel sera ignorée. Ce comportement, délibéré, a été corrigé au passage de la version 6.0 à 6.3.

Quelques remarques :

  • Surcharger les feuilles de style du core empêche le chargement de la feuille de style par défaut style.css. Rappelez-vous que vous devez explicitement déclarer les valeurs par défaut lorsque vous en avez besoin. Dans Drupal 7, style.css n'est pas chargée, sauf si elle est spécifiée dans le fichier .info
  • Les thèmes surchargés doivent avoir les mêmes types de media que ceux du style original.
  • Les URL mentionnées dans la feuille de style devront peut-être être corrigées. Vérifiez toutes les propriétés url() ou les règles @import dans la feuille de style, pour vous assurer qu'elles pointent réellement vers la bonne ressource. L'ordre des feuilles de style énumérées dans le header de la page sera modifié. Cela peut modifier l'héritage de certaines règles. The order the style sheets listed in the head of the page will change. In effect, this may cause some cascading rules to change with it.
  • Certaines feuilles de style du core ou des modules ne sont chargées que dans certaines conditions. Les surcharger dans le fichier .info fera qu'elles seront toujours utilisées (et non plus chargées sous condition).
  • Si les modifications du thème sont minimes, il vaut mieux utiliser les sélecteurs pour surcharger les styles plutôt que de remplacer toute la feuille de style.
  • Dans Drupal 7, si vous voulez surcharger quelques fichiers css, utilisez hook_css_alter dans le fichier template.php (regardez l'exemple du thème Seven)

Rappelez-vous que vous devez vider le cache après les modifications. Allez pour cela dans Administrer » Configuration du site » Performance, déroulez jusqu'en bas de la page et cliquez sur« Supprimer les données du cache ».

Surcharger la feuille de style d'un thème parent

Ce qui suit s'applique aux sous-thèmes (sub-themes).

Pour éviter qu'une feuille de style d'un thème parent ne soit reprise dans un sous-thème, vous pouvez la redéfinir dans le fichier .info. Cela se fait de la même façon que pour la surcharge d'une feuille de style d'un module ou du core.

Le thème parent et le sous-thème doivent avoir la même entrée :

stylesheets[all][] = masterStyle.css

Si le fichier existe dans le sous-thème, il sera utilisé, alors qu'omettre le fichier empêchera son chargement. If the file exists inside the sub-theme, then it will be used while omitting the file will prevent it from loading.