2

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?

Improve this question
1
  • Why you need to add specific class in body, in CMS page you can find already one specific class. i.e: cms-aboutus
    – Hitesh Koshti
    May 1, 2018 at 11:33

2 Answers 2

Reset to default
2

Add these lines to layout in Design > Layout Update XML of cms page:

<body>
    <attribute name="class" value="body-class-aaa" />
</body>
Improve this answer
0

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.

Improve this answer

Your Answer

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

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