6

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?

6

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.

  • Is different from the copy and past the html.html.twig file? – Mojtaba Reyhani Aug 26 '16 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 '16 at 20:50
23

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

  • 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 '16 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 '16 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 '16 at 8:36
  • 1
    @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 '16 at 9:42
  • 1
    This is, to me, the preferred approach. – Kevin Aug 26 '16 at 13:23
1

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.

  • 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 '19 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 '19 at 7:51
  • @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 '19 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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