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

Les modules de Drupal, ou les modules additionnels, fournissent généralement une présentation par défaut des données qu'ils affichent. Cela comprend les balises HTML et la feuille de style (reportez-vous aux explications de overriding behavior pour le balisage). Étant donné les grandes possibilités d'extension de Drupal, si les concepteurs de thèmes devaient gérer tout ce qui est envoyé au navigateur par l'application, la conception de thème se transformerait en lourd fardeau.

Les valeurs par défaut sont donc là pour être changées à la discrétion du concepteur de thème. De même qu'il est possible de surcharger les fonctions de thèmes et de gabarits, il est possible de surcharger les feuilles de style fournies par le core ou les modules additionnels. Ne les modifiez pas directement. Toute modification doivent êtres faites 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 :

Lors de la surcharge du style d'un module, le fichier CSS « surchargeant » doit être présent dans votre thème et enregistré au bon endroit avec le nom correct. De cette façon, la feuille de style de votre thème remplacera celle du module.

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.
• Les thèmes surchargés doivent avoir les mêmes types de media que ceux du style original.
• Tout élément importé dans le style doit être contrôlé. 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.

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 :

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.

Edit du 18 Juin 2009 : If the file exists inside the sub-theme, then it will be used; omitting the file in the sub-theme will prevent the file from loading from the base theme as well.