Hello Magento Friends,
Today I am going to explain How to Apply Custom CSS for Specific CMS Page using a CSS file in Magento 2.
Sometimes we have to apply the style to the CMS page. At that time instead of writing internal or embedded CSS in the content part of that CMS page, we can apply a CSS file for that specific page by creating the new layout of that CMS page.
Let’s learn to apply a custom CMS layout in Magento 2.
Contents
Step 1: First, we need to create a Magento_Cms folder inside your theme folder if it does not exist.
Step 2: After that inside the layout folder create an XML file. The format of that file should be as follows:
cms_page_view_selectable_pageidentifier_layoutname.xml
The path of the file will be as follows:
app\design\frontend\Theme_Name\Magento_Cms\layout\cms_page_view_selectable_faqs_custom.xml
Now add the below code
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="Magento_Cms::css/custom_css.css" /> </head> </page>
Step 3: After that, we need to create one css file “custom_css.css” file inside the Magento_Cms directory and apply CSS in that file
app\design\frontend\Theme_Name\Magento_Cms\web\css\
Step 4: After that, your custom layout name will be displayed in the admin panel.
Hence, now you know How to Apply Custom CSS for Specific CMS Page using a CSS file in Magento 2. You can also Add Dynamic CSS using Page Assets in Magento 2. In case of any difficulty connect with me through the comment box. I will be happy to solve it. Stay in touch with us for more tutorials on Magento 2.
Happy Coding!
In modern web development, seamless navigation and state management are crucial for delivering a smooth…
Magento Open Source 2.4.8 beta version released on October 8, 2024. The latest release of…
Hello Magento Friends, Creating catalog price rules programmatically in Magento 2 can be a valuable…
As the world of eCommerce continues to thrive, Shopify has become one of the most…
Shopify Remix is an innovative framework that provides a streamlined experience for building fast, dynamic,…
Building a successful eCommerce store requires expertise, and for many businesses, Shopify has become the…
