Modifier/Overrider facilement le CSS d'une page Drupal

Il arrive qu'on veuille modifier rapidement l'aspect d'une page sans forcément avoir le courage d'aller chercher dans le CSS du thème ou se trouve la partie à modifier, où de créer une nouvelle feuille de style pour écraser la propriété.

Pour cela, il existe CSS Injector, qui permet d'éditer les propriétés CSS dans toutes ou certaines pages.

Une fois le module installé et activé, rien de plus simple : Configuration du site > CSS injector

Ajouter une nouvelle règle

Chaque règle permet de modifier le CSS d'une ou plusieurs pages. Je vous conseille donc de créer soit des règles selon les pages où elles vont être appliquées, par exemple "Toutes les pages", "Page d'accueil", "Noeuds", etc. soit selon l'élément qu'elles vont affecter, par exemple "Suppression des puces", "Mise en forme des commentaires", etc. Ou encore les deux !

De cette manière l'administration de ces règles sera d'autant plus facile.

 

Ecraser une propriété existante

Souvenez vous que CSS Injector n'est qu'un module, il sera donc appelé avant le thème et sera écrasé par celui-ci (voir mon article sur le processus de theming Drupal), pour écraser une propriété d'un thème, il vous faudra donc user de la hiérarchie CSS :

1
2
3
body .block-locale ul li {
    list-style-type: none;
}

pour écraser :

1
2
3
.block-locale ul li {
    list-style-type: none;
}

ou encore d'utiliser le flag !important pour spécifier au navigateur que votre propriété est la plus importante.

 

Le cache

L'option Preprocess CSS (cochée par défaut) permet d'utiliser l'option preprocess de drupal_add_css pour que CSS Injector s'intègre aux CSS aggrégés et respecte le cache Drupal donc si vous ne voyez rien changer sur votre page : pensez à le vider !

 

Condition PHP

Le formulaire d'édition des règles permet d'utiliser un code PHP pour intégrer le code CSS. On peut donc aisément changer de background général selon l'heure de la journée :

Code CSS

1
2
3
body { 
    background: url('sites/all/themes/montheme/img/bg_nuit.png'); 
}

Code PHP

1
2
3
4
<?php
if((int)date('H') < 8 || (int)date('H') > 21)
    return TRUE;
?>

Attention aux erreurs PHP !