I'm trying to add a class to body (cms-page-aboutus) via layout XML update inside Magento 2 admin panel.
I know that CMS pages already add a body I could use to target my page, but I need to target multiple CMS pages for several languages at once (cms-about-us, cms-acerca-de, cms-a-propos).
I don't want to duplicate CSS, therefore a common class would be best.
I have tried the following:
<body>
<attribute name="class" value="body-class" />
</body>
But it fails to save in admin panel:
Please correct the XML data and try again. Element 'body': This element is not expected. Expected is one of ( referenceContainer, container, update, move ). Line: 2
Since it seems that only "update" keyword is allowed, I tried using it to add a new handle:
<update handle="cms_page_aboutus"/>
and then created the file:
app/design/<>/<>/Magento_Cms/layout/cms_page_aboutus.xml
with the body update within, but it does not work.
Any idea?
-
Why you need to add specific class in body, in CMS page you can find already one specific class. i.e: cms-aboutusHitesh Koshti– Hitesh Koshti2018年05月01日 11:33:04 +00:00Commented May 1, 2018 at 11:33
2 Answers 2
Add these lines to layout in Design> Layout Update XML of cms page:
<body>
<attribute name="class" value="body-class-aaa" />
</body>
I don't think you can target body in any layout xml and thus not in admin too as body is above the root element.
It seems to be set in this file app/code/Magento/Theme/view/base/templates/root.phtml:
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<!doctype html>
<html <?php /* @escapeNotVerified */ echo $htmlAttributes ?>>
<head <?php /* @escapeNotVerified */ echo $headAttributes ?>>
<?php /* @escapeNotVerified */ echo $requireJs ?>
<?php /* @escapeNotVerified */ echo $headContent ?>
<?php /* @escapeNotVerified */ echo $headAdditional ?>
</head>
<body class="preload" data-container="body" data-mage-init='{"loaderAjax": {}, "loader": { "icon": "<?php /* @escapeNotVerified */ echo $loaderIcon; ?>"}}' <?php /* @escapeNotVerified */ echo $bodyAttributes ?>>
<?php /* @escapeNotVerified */ echo $layoutContent ?>
</body>
</html>
If you overwrite that in your theme you can set a class as shown above.
As you can see there are $bodyAttributes too that might enable you to set a class. But I couldn't figure out yet if and how we could set those attributes.