1

I would like to add "nav-before-open nav-open" in html tag by default in Magento2. if any one have idea ?

I am trying to add a css class on html tag but not able to find any file, from where the html tag is rendered.

I have added class in body tag using below code

<body>
    <attribute name="class" value="demo"/>
</body>
  • your code will add class to body tag – Piyush Nov 13 '17 at 11:45
  • Yes, I know but I want to add class in html tag – hweb87 Nov 13 '17 at 11:53
1

Magento adding that class for body using below class Magento\Framework\View\Result\Page.php

  protected function render(HttpResponseInterface $response)
    {
..............
........
 'htmlAttributes' => $this->pageConfigRenderer->renderElementAttributes($config::ELEMENT_TYPE_HTML),
................

It is work same like you are adding for body

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<html>
        <attribute name="class" value="page-with-filter"/> 
    </html>
</page>

Output: http://easycaptures.com/3327274226

1

The template for the html tag is here:

vendor/magento/module-theme/view/base/templates/root.phtml

So you can copy that into your theme and hardcode the class, but I'm currently trying to see how this can be added via XML. It looks like there is a way due to $htmlAttributes being mentioned:

<html <?= /* @escapeNotVerified */ $htmlAttributes ?>>

I will update this comment if I find a way, may need someone with better PHP knowledge than me to figure it out though. Teamwork anyone?

  • 1
    we stuck at same point :) – Piyush Nov 13 '17 at 12:02
  • 2
    I tried for 30 minutes but can't find any examples on how to use $htmlAttributes :( – Ben Crook Nov 13 '17 at 13:39
  • I am too still clueless, it only works for head and body nodes – Piyush Nov 13 '17 at 14:00
  • I have asked the question specific to that as this question isn't specific to $htmlAttributes- magento.stackexchange.com/questions/201254/… – Ben Crook Nov 13 '17 at 14:12
0

I found solution and it's working for me :)

vendor/magento/module-theme/view/base/templates/root.phtml

Use below code

<html <?php /* @escapeNotVerified */ echo $htmlAttributes ?> class="nav-before-open nav-open">.
  • You shouldn't be editing core files (files inside vendor) as you will likely lose your work in the future, please see my answer as it mentions copying it into your own theme. – Ben Crook Nov 13 '17 at 13:22
  • 1
    @BenCrook will override this file in my theme is that fine?? – hweb87 Nov 13 '17 at 17:15
  • Yeah that's ok as updates can't change files in your theme. – Ben Crook Nov 14 '17 at 10:47
-1

If you want to add class into HTMl tag then

you need to create event.xml file into app/code/NameSpace/ModuleName/etc/

 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
        <event name="layout_load_before">
            <observer name="event_add_class" instance="NameSpace\ModuleName\Plugin\AddClass" shared="false" />
        </event>
    </config>

Then that class file

 namespace NameSpace\ModuleName\Plugin;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\Event\Observer;
use Magento\Framework\View\Page\Config;
use Magento\Store\Model\StoreManagerInterface;
class AddClass implements ObserverInterface
{
    protected $config;
    protected $storeManager;
    public function __construct(
        Config $config,
        StoreManagerInterface $storeManager
    ){
        $this->config = $config;
        $this->storeManager = $storeManager;
    }
    public function execute(Observer $observer){
        $store = $this->storeManager->getStore();
        $storeCode = $store->getCode();
        $websiteCode = $store->getWebsite()->getCode();
        $this->config->addBodyClass($storeCode);
        $this->config->addBodyClass($websiteCode);
    }
}

If you add class into body you can add using that way

   <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <attribute name="class" value="account"/>
    </body>
</page>

Magento also doing same thing:- https://github.com/magento/magento2/blob/2.3-develop/app/code/Magento/Customer/view/frontend/layout/customer_account.xmlng into my account section

  • 1
    I know how to add class in body tag. I would like to add class in html tag not body tag. – hweb87 Nov 13 '17 at 11:58
  • but which html tag? – Sunil Patel Nov 13 '17 at 12:01
  • I believe the OP means <html> – Ben Crook Nov 13 '17 at 12:05
  • <html class="nav-before-open nav-open"></html> I would like to add above class by default in <html> tag – hweb87 Nov 13 '17 at 12:07
  • Isn't that just recreating existing functionality? There is an ability to add attributes to html by look of it, I just can't figure out how - The core has this <html <?= /* @escapeNotVerified */ $htmlAttributes ?>> – Ben Crook Nov 13 '17 at 12:12

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.