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!
