Posted by backdropnb on Sat, May 22, 2021 - 5:20am

Is there a module to assign classes to the body for pages? Can't assign class for body in my project.

Comments

klonos's picture

Sat, May 22, 2021 - 7:45am by klonos

Hey  👋

There could be a few ways to go about doing that. Are you after adding CSS classes to the body field of content, or the <body> element in the HTML rendered for pages?

If you want to add CSS classes to the body field (or any field), you could do that either via a template in your custom theme, or by using the Field Wrappers module.

If you want to add CSS classes to the <body> element in the HTML, then you would need to copy the page.tpl.php template on your theme, and add them there. There is a section in that file that looks like this:

<body class="<?php print implode(' ', $classes); ?>"<?php print backdrop_attributes($body_attributes); ?>>

...the easiest way to do it is to change that line to something like this instead:

<body class="MY-CUSTOM-CLASS-GOES-HERE <?php print implode(' ', $classes); ?>"<?php print backdrop_attributes($body_attributes); ?>>

(^^ add your own class before the <?php print implode(' ', $classes) bit - make sure there is a space after it, and remember to clear caches each time you make changes to your theme templates).

If you are using Paragraphs, then you might find the Classy Paragraphs module useful too.

If you are coming from Drupal 7, is there any module that does this? If so, then you could request for it to be ported to Backdrop. You can check if D7 modules have already been ported here, and you can request new ones to be ported by creating a request here (please search to see if someone else has already made a request for the same module though).

I hope that helps, but please let us know if you have further questions.

Sun, May 23, 2021 - 3:06am by amilenkov

CSS classes to the HTML <body> element are often used when developing an individual design or customization of a theme. You can achieve this by editing the page.tpl.php saved in the theme folder as described by @klonos above. This was often done in Drupal, but Drupal lacks the Layout concept.

However, in Backdrop we have Layouts and I prefer to individualize the design by placing my own CSS class not on the HTML body element, but in the outer HTML element of the layout template, for example <div id = "wrapper" class = "some-custom-class"> in layout - custom-layout.tpl.php.

This allows a different design of each layout within the same theme.

In the example above, div id = "wrapper" covers the entire internal content of the body element, but it's CSS class is specific to each layout, used in the website.

 

Sun, May 23, 2021 - 4:10pm by backdropnb

Thanks,

I added page.tpl.php in my thame

İf you use page.tpl.php You must visit this link (https://docs.backdropcms.org/api/backdrop/core%21modules%21system%21temp...) There is example in files

 

I added a new div (<div id="node-<?php print $node->nid; ?>" class = "some-custom-class <?php print implode(' ', $classes); ?>">) but but I can not assign the ids of the page or the class. What am I missing? Is it necessary to activate any module for this?

<html<?php print backdrop_attributes($html_attributes); ?>>
  <head>
    <?php print backdrop_get_html_head(); ?>
    <title><?php print $head_title; ?></title>
    <?php print backdrop_get_css(); ?>
    <?php print backdrop_get_js(); ?>
  </head>
  
  <body class="<?php print implode(' ', $classes); ?>"<?php print backdrop_attributes($body_attributes); ?>>
      <div id="node-<?php print $node->nid; ?>" class = "some-custom-class <?php print implode(' ', $classes); ?>">
    <?php print $page; ?>
    <?php print $page_bottom; ?>
    <?php print backdrop_get_js('footer'); ?>

</div>
  </body>
</html>

 

klonos's picture

Sun, May 23, 2021 - 11:37pm by klonos

Hello again ,

Backdrop already adds the node ID number in the body HTML tag out of the box - you don't need to add it yourself:

If you look at the documentation listing all variables at the top of page.tpl.php, you will see that $node is not included (that template is used for all pages on the site, and not every page is a node), so $node->nid will not work using that template.

If you want to use $node->nid, then you will need to copy and customize node.tpl.php instead, which includes $node as a variable.

I hope that the above helps.