La plupart des sites Web modernes utilisent des feuilles de style pour contrôler la présentation des pages. Dans une page HTML statique, un lien vers une feuille de style doit être placé manuellement dans le code HTML (habituellement dans le header de la page).
Voici un exemple de lien vers une feuille de style :
<link rel="stylesheet" type="text/css" href="/mytheme.css" />
Ce code indique simplement au navigateur où trouver une des feuilles de style (mytheme.css) qui contrôle l'apparence de la page.
Pour un navigateur internet, une page d'un site Drupal est identique : les mêmes types de liens vers des feuilles de style externes se trouvent dans le header HTML. La différence clé est que, pour Drupal, ces liens sont ajoutés automatiquement au code HTML lors de la construction de la page. Certaine feuilles de styles peuvent provenir du thème lui-même, d'autres peuvent être fournies par différents modules Drupal (ceux qui fournissent un style par défaut à leurs affichages).
Vous pouvez ajouter des nouvelles feuilles de style à un thème donné, et vous pouvez surcharger une feuille de style par défaut provenant du core Drupal ou d'un module additionnel. Si vous utilisez un sous- thème, vous pouvez surcharger les feuilles de style de son thème parent.
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.
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 :
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 :
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 ».
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.
Traduction de la page http://drupal.org/node/171209
publiée / actualisée le 2 Mars 2011 sur drupal.org
Cette page 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). Personnaliser un thème via des CSS uniquement est faisable avec les informations fournies ici.
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.
Par défaut dans Drupal 6, 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. Dans Drupal 7, le fichier style.css ne sera pas utilisé à moins qu'il ne soit mentionné dans le fichier .info.
Ajouter d'autres feuilles 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êchera l'utilisation du fichier style.css. Si votre thème utilise cette feuille de style-là, vous devrez la déclarer explicitement.
Quelques remarques :
Traduction de la page http://drupal.org/node/778998
publiée / actualisée le 22 Avril 2010 sur drupal.org
La classe clear-block de Drupal 6 est un drupalisme pour une fonctionnalité plus connue sous le nom de clearfix par la Communauté CSS. En outre, utiliser le terme block prêtait à confusion car il ne s'aggissait pas là du système de blocs de Drupal. Dans Drupal 7, la classe clear-block a été renommée en clearfix.
6.x
7.x
Traduction de la page http://drupal.org/node/1030462
publiée le 15 février 2011 sur Drupal.org
Vous pouvez utiliser des feuilles de styles ciblées par navigateur.
Un exemple d'ajout de feuille de style pour Internet Explorer 6 dans un thème pour Drupal 6 (cet exemple est issu du thème Garland, livré avec l'installation du noyau Drupal) :
page.tpl.php :
<?php
...
<?php print $styles ? >
<!--[if lt IE 7]>
<?php print phptemplate_get_ie_styles(); ? >
<![endif]-->
...
?>template.php :
<?php
...
function phptemplate_get_ie_styles() {
global $language;
$iecss = '<link type="text/css" rel="stylesheet" media="all" href="'. base_path() . path_to_theme() .'/fix-ie.css" />';
if ($language->direction == LANGUAGE_RTL) {
$iecss .= '<style type="text/css" media="all">@import "'. base_path() . path_to_theme() .'/fix-ie-rtl.css";</style>';
}
return $iecss;
}
...
?>Avec Drupal 7, vous pouvez préciser une clé "navigateur" lorsque vous appelez la fonction drupal_add_css() :
template.php :
<?php
...
function yourthemename_preprocess_html(&$vars) {
...
drupal_add_css(path_to_theme() . '/fix-ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
}
...
?>Reportez-vous à la doc de l'API pour drupal_pre_render_conditional_comments() pour connaître les détails des clés IE et !IE.
Il est conseillé de toujours utiliser drupal_add_css() pour ajouter des feuilles de style à un thème, ainsi Drupal connaîtra exactement le nombre de feuilles de style ajoutées. Cette donnée peut servir pour s'adapter à la limite d'Internet Explorer qui ne charge que les 31 premières balises LINK/STYLE.
Traduction de la page http://drupal.org/node/225868
publiée / actualisée le 29 Janvier 2011 sur drupal.org
Pour la plupart des thèmes, ajouter des feuilles de style via le fichier .info sera suffisant. Mais comme ce fichier .info est statique, les feuilles de style ne peuvent pas être ajoutées dynamiquement. Selon la façon dont les thèmes gèrent les feuilles de style, cela peut n'avoir aucune incidence. En cas de doute, utilisez le fichier .info.
L'API comporte deux fonctions pour travailler avec les feuilles de style : drupal_add_css et drupal_get_css. Voici une exemple d'ajout dynamique de feuilles de style avec ces fonctions.
Remplacez le préfixe « drop » de la fonction par le nom de votre thème.
<?php
function drop_preprocess_page(&$variables) {
$front_style = path_to_theme() .'/front-page.css';
$path_style = path_to_theme() .'/path-'. arg(0) .'.css';
if (file_exists($front_style) && $variables['is_front']) {
$include_style = $front_style;
}
elseif (file_exists($path_style)) {
$include_style = $path_style;
}
if (isset($include_style)) {
drupal_add_css($include_style, 'theme', 'all', FALSE);
$variables['styles'] = drupal_get_css();
}
}
?>
Dans cet exemple, la feuille de style front-page.css sera utilisée pour la page d'accueil, et d'autres basées sur le chemin interne. Par exemple : http://example.com/admin utilisera une feuille de style nommée path-admin.css.
Quelques remarques :
Ce codee peut être ajouté dans le fichier template.php du dossier de votre thème. Il peut déjà y avoir une fonction nommée phptemplate_preprocess_page. Incorporez-là simplement dans le corps de votre fonction XXX__preprocess_page.
Vous devrez peut-être également modifier variables en vars pour que cela fonctionne.
Référence en anglais sur drupal.org : http://drupal.org/node/744328
16 Mars 2010 - 21h25
Vous pouvez ajouter une feuille de style pour un navigateur donné.
Dans le fichier page.tpl.php de Garland :
<?php
...
<?php print $styles ? >
<!--[if lt IE 7]>
<?php print phptemplate_get_ie_styles(); ? >
<![endif]-->
...
?>Dans le fichier template.php de Garland :
<?php
...
function phptemplate_get_ie_styles() {
global $language;
$iecss = '<link type="text/css" rel="stylesheet" media="all" href="'. base_path() . path_to_theme() .'/fix-ie.css" />';
if ($language->direction == LANGUAGE_RTL) {
$iecss .= '<style type="text/css" media="all">@import "'. base_path() . path_to_theme() .'/fix-ie-rtl.css";</style>';
}
return $iecss;
}
...
?>Drupal 7 apporte la possibilité de spécifier une clé « navigateur » quand vous appelez drupal_add_css() :
Dans le fichier template.php de Garland :
<?php
...
function garland_preprocess_html(&$vars) {
...
drupal_add_css(path_to_theme() . '/fix-ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
}
...
?>Consultez la documentation de l'API pour drupal_pre_render_conditional_comments() au sujet des détails des clés IE et !IE.
Il est conseillé que le thèmes utilisent toujours drupal_add_css() pour ajouter des feuilles de style CSS, le code Drupal connaît ainsi le nombre exact de feuilles de style ajoutées. Une donnée qui peut être nécessaire lorsqu'on approche des limites d'Internet Explorer qui ne peut charger que les 31 premières balises LINK/STYLE.
Traduction de la page http://drupal.org/node/568180
publiée / actualisée le 29 Janvier 2011 sur drupal.org
N'avez-vous jamais eu envie de créer des CSS dynamiquement ? Voici un exemple de comment interpréter un gabarit CSS qui sera renseigné avec des variables. Pour cet exemple, nous voulons générer des CSS pour modifier la taille de la police d'un titre de page.
<?php
$variables = array(
'font_size' => 20,
);
extract($variables, EXTR_SKIP);
ob_start();
include('style.css.php');
$css = ob_get_contents();
ob_end_clean();
// la variable CSS résultante peut être utilisée pour ajouter ou afficher le style de différentes façons :
print '<style type="text/css">'.$css.'</style>';
?>Généreusement emprunté à phptemplate.
Traduction de la page http://drupal.org/node/388372
publiée / actualisée le 29 Janvier 2011 sur drupal.org
incomplet
Pour les éléments standards d'une page, le core de Drupal utilise une approche modulaire des classes CSS . Un certain nombre de classes sont utilisées dans un site Drupal. La liste qui suit se veut un rappel sur ces classes, ce qu'elles font et où on les trouve.
Vous trouverez une liste complète des classes de Drupal 6 dans le starter kit ZEN, elle devrait être fusionnée à cette page.
Notez que les thèmes que vous installez sur votre site peuvent modifier ces classes ou en ajouter d'autres.
Traduction de la page http://drupal.org/node/222782
publiée / actualisée le 29 Janvier 2011 sur drupal.org
Pour prendre en charge les langues qui se lisent de droite à gauche vous devez surcharger les styles latéraux et nommer la nouvelle feuille de style d'après la feuille de style originale. L'inclusion de la feuille de style « RTLisée » se fera automatiquement et dépendra de la langue paramétrée pour le site.
Un exemple sera plus parlant : la feuille de style par défaut du thème Garland est style.css. Elle dispose également d'une feuille de style style-rtl.css pour les langues s'écrivant de droite à gauche, comme l'arabe ou l'hébreu. L'inclusion de ces deux styles commence par la feuille de style principale puis par la feuille de style RTL. Cela permet l'application des règles des deux fichiers « en cascade » sans que vous ayez à vous soucier des sélecteurs spécifiques utilisés dans le style de RTL.
Il existe une norme de codage pour l'organisation des règles. Les règles impliquées dans la position latérale ou les dimensions doivent être commentées avec /* LTR * /, ce qui indique qu'elles sont spécifiques à une mise en page de gauche à droite. Cela concerne les éléments flottants (float), les marges (margins), les rembourrages/épaulettes (padding), etc.
Le texte inline sera automatiquement placé, pour autant que le sens de l'écriture du document soit indiqué dans le gabarit page.tpl.php du thème.
Exemple de style de base :
Style RTL correspondant :
Cet ajout de /* LTR * / en commentaires dans la feuille de style principale vous permet de repérer plus facilement les les endroits du fichier RTL où sont les modification doivent être faites.
Remarque :
Si votre thème surcharge le style d'un module (overrides a module style, traduction française ici), le style RTL associé sera omis à moins que vous n'en ayez créé un dans votre thème.