14

I'm trying to add a custom CSS class to the <body> tag, How can I modify or pre-process the <body> tag to add the class body, Is it right to style the <body> tag with css file?

Improve this question

5 Answers 5

Reset to default
9

If html.html.twig does not exist in your current theme's template folder, go to /core/modules/system/templates folder.

Open html.html.twig file. Highlight and copy all code (CTRL + A then CTRL + C)

Go to your theme's template folder /themes/[yourtheme]/templates and create a new file called html.html.twig, open and paste (CTRL + V) the code you copied.

Change <body{{ attributes }}> to <body{{ attributes.addClass('my-class') }}>

Clear/Flush the cache to see changes.

Improve this answer
2
  • Is different from the copy and past the html.html.twig file?
    – Mojtaba Reyhani
    Aug 26, 2016 at 14:52
  • @MojtabaReyhani if it already exists, it may be different as some modification could've been made. All it means is that you just skip the copy paste part and just edit the html.html.twig and change to attributes part, if you already have a html.html.twig file in your theme's template folder.
    – No Sssweat
    Aug 26, 2016 at 20:50
32

Alternatively, you could implement template_preprocess_html in your [themename].theme file.

function themename_preprocess_html(&$variables) {
  $variables['attributes']['class'][] = 'class-name';
}

See the documentation: https://api.drupal.org/api/drupal/core%21includes%21theme.inc/function/template_preprocess_html/8.2.x

Improve this answer
7
  • 1
    Just for understanding, could you please describe where shall I put the 'body' and 'myclassname'. will it be like $variables['attributes']['body'][] = 'myClassNameForBody'
    – CodeNext
    Aug 4, 2016 at 7:01
  • @CodeNext if you open html.html.twig you will see that the {{ attributes }} variable gets printed inside the body tag, as you can also see in the snipped of my answer. Therefore, you already know this affects the body.
    – No Sssweat
    Aug 5, 2016 at 23:59
  • @NoSssweat, Thx for input. I got your answer, which is straight forward to understand. I would like to understand this way of doing. Suppose I want my <body> class class-name, Do I have to add @Josh's answer as it is provided or I have to modify something? If I do not have to modify then how it will address specifically to <body>? Again Thx.
    – CodeNext
    Aug 6, 2016 at 8:36
  • 2
    @NoSssweat, Ok, I understand..Thanks you...So ultimately it is function themename_preprocess_html(&$variables) which does this job of placing the class-name in the body and that class name is saved in attributes array. Thx.
    – CodeNext
    Aug 6, 2016 at 9:42
  • 3
    This is, to me, the preferred approach.
    – Kevin
    Aug 26, 2016 at 13:23
4 
/**
 * Add a "nodeType-detail-page" class to the body on a offer detail page
 */
function mymodule_preprocess_html(&$variables) {
  $node = \Drupal::routeMatch()->getParameter('node');
  if($node) {
    $variables['attributes']['class'][] = 'node-'. $node->bundle();
  }
}
Improve this answer
3

You can check the Page Specific Class module to add class to body tag of any page. From the module page:

It is a simple module for Drupal 8 users to add custom CSS class to the tag of the any specific page

Features

  • We can add class to body tag of any page
  • Support all Pages which can be created via Node, Views or Custom Route
  • We can add class for Home page also
  • We can add class for All pages also

Disclaimer, I am the author of the module.

Improve this answer
3
  • 1
    Disclaimer: You are the author of this module. Problem: It doesn't have any release out at the moment. Not even a dev.
    – leymannx
    Dec 23, 2019 at 7:31
  • Thanks leymannx , i was planning to release today only release for this module . It is up now please check now
    – Hardik Patel
    Dec 23, 2019 at 7:51
  • 1
    @HardikPatel Your original post was essentially a link only answer. For module recommendations, we typically ask that people include a short snippet about the module (the module description can be good) except for ones that are very common, and a little about how the module can solve the problem. We also ask that people disclose their connections to modules, blog posts, etc. Self-promotion (within reason) is OK, just let everyone know. I edited the post for a head start for you, but add any more details that you feel would help.
    – mpdonadio ♦
    Dec 23, 2019 at 14:51
3

This is a simple way to add a class based on the URL, in Drupal 9. It doesn't require any module.

/**
 * Implements hook_preprocess_html().
 */
function THEMENAME_preprocess_html(&$vars) {
  // Get the current path
  $current_path = \Drupal::service('path.current')->getPath();
  $internal = \Drupal::service('path_alias.manager')->getAliasByPath($current_path);

  // Assign it to body class 
  $vars['attributes']['class'][] = str_replace("/", "", $internal);
}
Improve this answer
1
  • template_preprocess_html has been posted already. And there's \Drupal\Component\Utility\Html::cleanCssIdentifier($internal) to get a proper CSS class.
    – leymannx
    Mar 24, 2022 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.