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:
(^^ 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 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.
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.
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?
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.
"Illegal value" can mean a hundred things. If you want help with it, please provide additional info about the error. You can check the error log to see how that came to be. But as I said, you...
Posted1 hour 28 min ago by Alejandro Cremaschi (argiepiano) on:
I did try porting it as I mentioned, I got the "other" option to show up in my select lists, but when I tried to do the other entry, I'd get an error that said "Illegal value" and I wasn't sure...
An alternative is to port the other module - porting takes a bit of knowledge of "under the hood" stuff, so I suggest you start with that, and post questions in the Backdrop Zulip channel whn...
Posted1 hour 45 min ago by Alejandro Cremaschi (argiepiano) on:
Comments
Hey @backdropnb 👋
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 thepage.tpl.phptemplate 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.
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.
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>
Hello again @backdropnb,
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$nodeis not included (that template is used for all pages on the site, and not every page is a node), so$node->nidwill not work using that template.If you want to use
$node->nid, then you will need to copy and customizenode.tpl.phpinstead, which includes$nodeas a variable.I hope that the above helps.