0

I write css in path app/code/my/module/view/adminhtml/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="My_Module::css/menuformat.css"/> 
    </head>
</page>

Above code apply menuformat.css to all the admin pages whether my module is enabled or not

I am replacing

<css ifconfig="My_Module/general/enabled" src="My_Module::css/menuformat.css"/> 

It returns error

Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'css', attribute 'ifconfig': The attribute 'ifconfig' is not allowed.

How can i write?. I need css only active when my module is enable otherwise no need .

I am using magento 2.2

I have a option to enable and disable the module . while click enable/disable button it reflects core_config_data table . Based on the table data i need to load the css . If enable load , disable no need to load the css.

  • Possible duplicate of Custom css for custom block/phtml. – Sukumar Gorai Jan 4 at 7:49
  • @SukumarGorai , i need to load the css based on core_config_data table record. Above code is work for me . but i need to stop css when path "My_Module/general/enabled" is 0 in core_config_data table. so i try "ifconfig" attributes but it is not accepted. I need to stop the css while path "My_Module/general/enabled" is 0 in core_config_data table. I need to any alternate way to stop the css loading. – Sammu Sundar Jan 4 at 7:55
  • You can check my answer. I think it should help you! – Sukumar Gorai Jan 4 at 9:40
1

Create a module with name STech_Css by following below steps:

Step 1: Create registration.php under:

app/code/STech/Css/registration.php

with content:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'STech_Css',
    __DIR__
);

Step 2: Create module.xml under:

app/code/STech/Css/etc/module.xml

with content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="STech_Css" setup_version="0.0.1">
        <sequence>
            <module name="Magento_Backend"/>
             <module name="Magento_Sales"/>
            <module name="Magento_Quote"/>
            <module name="Magento_Checkout"/>
            <module name="Magento_Cms"/>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

Step 3: Create system.xml under:

app/code/STech/Css/etc/adminhtml/system.xml

with content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="stech_css" translate="label" sortOrder="10">
            <label>STech</label>
        </tab>
        <section id="css" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>CSS</label>
            <tab>stech_css</tab>
            <resource>STech_Css::css_config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>
                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Module Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
            </group>
        </section>
    </system>
</config>

Step 4: Create events.xml under:

app/code/STech/Css/etc/frontend/events.xml

with content:

<?xml version="1.0"?>
<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="stech_css_layout_render" instance="STech\Css\Observer\LayoutRender" />
    </event>
</config>

Step 5: Create LayoutRender.php under:

app/code/STech/Css/Observer/LayoutRender.php

with content:

<?php
namespace STech\Css\Observer;

class LayoutRender implements \Magento\Framework\Event\ObserverInterface
{
    const STECH_CSS_ENABLE = 'css/general/enable';

    private $scopeConfig;

    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->scopeConfig = $scopeConfig;
    }

    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $enable = $this->scopeConfig->getValue(self::STECH_CSS_ENABLE, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
        if($enable){
            $observer->getLayout()->getUpdate()->addUpdate($this->getXmlCode());
        }
        return $observer;
    }

    private function getXmlCode()
    {
        return '<head>
                    <css src="STech_Css::css/stech_custom.css"/> 
                </head>';
    }
}

Step 6: Create stech_custom.css under:

app/code/STech/Css/view/frontend/web/css/stech_custom.css

And css according to your requirement.

Flush the cache and run setup:upgrade, setup:di:compile and static:content:deploy.

Hope this helps!

0

No need of add ifconfig attribute in css tag. Just use this code and setup upgrade module & deploy once.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="My_Module::css/menuformat.css"/> 
    </head>
</page>

php bin/magento s:up

php bin/magento s:s:d or php bin/magento s:s:d -f

  • Fine @RohanHapani , But this is always active. i can disable and enable the module. At the time of disable also this css is active in all admin pages – Sammu Sundar Jan 4 at 7:14
  • I need css is active only when the module is enabled – Sammu Sundar Jan 4 at 7:16
  • Please check your module entry enable disable from app/etc/config.php file. Set your module entry to '0' and flush cache and remove generated. – Rohan Hapani Jan 4 at 7:16
  • My module is always enabled in app/etc/config.php file . It changes only in core_config_data table only – Sammu Sundar Jan 4 at 7:20
  • While click the enable/disable button it does not reflect in app/etc/config.php file . Only reflect in core_config_data table – Sammu Sundar Jan 4 at 7:21

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.