Comment ajouter une classe à la balise HTML «body» par programmation?

13

Je voudrais ajouter une classe CSS personnalisée à la <body>balise. J'utilise Drupal 7 / Corolla.

Comment puis-je le faire par programme à partir de mon module personnalisé?

7 theming giorgio79
la source

Réponses:

13

Les fonctions de prétraitement peuvent être implémentées à partir de modules et de thèmes.

La fonction de prétraitement dont vous avez besoin est hook_preprocess_html()et la variable à définir est $variables['classes_array'], qui est un tableau contenant toutes les classes définies pour l' <body>élément. Le contenu du fichier html.tpl.php utilisé par défaut par Drupal (si le thème n'utilise pas de fichier de modèle différent) est le suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>

<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

Dans votre module, vous implémentez simplement la fonction de prétraitement comme suit:

function mymodule_preprocess_html(&$variables) {
  $variables['classes_array'][] = "new-class";
}

template_process () utilise ensuite $variables['classes_array']pour remplir $variables['classes']avec le code suivant:

$variables['classes'] = implode(' ', $variables['classes_array']);

 

L'utilisation d'une fonction de prétraitement dans un module est préférable si votre site utilise plus d'un thème, ou si l'ensemble de thèmes pour votre site n'est pas celui que vous avez créé. Dans ce cas, vous pouvez définir vos classes CSS personnalisées et ne pas les perdre lors de la mise à jour du thème, ou simplement changer le thème par défaut utilisé par votre site. Si votre site utilise uniquement un thème et que ce thème est un thème personnalisé que vous avez créé, vous pouvez implémenter la fonction de prétraitement dans votre thème personnalisé. Lorsque vous gérez le thème, les classes CSS ne sont pas perdues lors de la mise à jour de votre thème.

kiamlaluno
la source
Oui, je cloue généralement sur le nom du module via preprocess_html dans chaque module afin que le thème JS puisse inclure la détection si vous le souhaitez.
mpdonadio
9

ajouter à MODULENAME.module et vider le cache

function MODULENAME_preprocess_html(&$vars) {
  $vars['classes_array'][] = 'custom-class';
}
xandeadx
la source
4

Bien que vous puissiez le faire via hook_preprocess_html, vous serez souvent dans une partie complètement différente de votre base de code lorsque vous en aurez besoin. Si tel est le cas, je vous suggère d'utiliser à la ctools_class_addplace:

ctools_class_add(array('class1', 'class2', 'class3'));

Vous pouvez l'appeler de n'importe où tant que hook_preprocess_html n'a pas encore été exécuté et que les classes seront ajoutées.

Angry Dan
la source
1

En supposant que vous utilisez le module pathauto pour créer automatiquement des chemins sémantiques pour vos pages de contenu en fonction du chemin de menu, vous pouvez utiliser le chemin de la page pour créer les classes que vous recherchez:

function THEMENAME_preprocess_html(&$vars) {
  $path = drupal_get_path_alias();
  $aliases = explode('/', $path);

  foreach($aliases as $alias) {
    $vars['classes_array'][] = drupal_clean_css_identifier($alias);
  } 
}
Iqbal
la source
1

Vous pouvez le faire via template_preprocess_html(). Vous pouvez le mettre dans votre template.php, là où votre thème / thème de base le juge le plus approprié (par exemple, dossier de prétraitement Omega ), ou dans un module personnalisé, selon ce qui est le plus approprié.

function mytheme_preprocess_html(&$variables) {
  $variables['classes_array'][] = "class1";
  $variables['classes_array'][] = "class2";
  $variables['classes_array'][] = "class3";
}

Malgré les noms dans la référence API, les fonctions theme_preprocesset theme_processpeuvent être appelées à partir de modules, et pas seulement de thèmes. Il vous suffit de nommer le crochet correspondant à votre module, par exemple mymodule_preprocess_html().

mpdonadio
la source