How to Add Custom CSS Class Through XML File in Magento 2
Magento 2 is widely popular among the developers’ community, owing to its insane capability to customize and tweak the default configuration and code.
With increasing online stores and various types of businesses built with Magento 2 as the platform, there ought to be crazy requirements to fulfill customers’ expectations.
Recently, I found myself in the exact same scenario where I was required to add custom CSS class through XML file in Magento 2.
As it is not recommended to completely change the layout of the XML, I preferred the below solution:
Method to add custom CSS class through XML file in Magento 2:
The below example is to add CSS class in the product page:
Add the below code:
|
1 2 3 4 5 6 7 |
<?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"> <body> <referenceContainer name="product.info.media" htmlClass="custom col-lg-4 col-md-12 col-sm-12 product media" /> </body> </page> |
Removing blocks and adding custom CSS/HTML classes are the usual requirements during store development. So, please bookmark this solution which is surely going to help you someday!
Also, if you have any doubts, just mention them in the Comments section below 🙂
I would be happy to help.
Feel free to share the solution with the Magento community via social media.
Thank You.
Also Read:
- How to Enable Merge CSS, Javascript in Magento 2
- How to Override a phtml File Using a Custom Module in Magento 2
Prev
How to Filter Orders Between Two Dates in Magento 2
Top 10 Magento 2 Migration Mistakes And How to Avoid Them
Next