Theming

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 !

Structure du theming sous Drupal 6

Fichier attachéTaille
Icône PDF Drupal_theme_flow_6.pdf74.86 Ko

Je me suis remis depuis peu au theming sous Drupal pour un projet, et le moins que l'on puisse dire, c'est qu'on peut facilement s'y perdre sad. Entre les preprocess, template, hooks, et autres mots barbares, on ne sait plus trop qui fait quoi.

Alors bien sûr comme toujours la documentation explique très bien le processus, mais comme je n'avais pas trop le temps de relire toutes les pages concernant le theming, j'ai trouvé un PDF qui résume le tout.

Le voici en image : 

Un peu plus clair maintenant, non ? smiley

Source

S'abonner à RSS - Theming