How can I add a CSS class to the element in the template?
for example, I want to add a CSS class to this element
<div class="page-wrapper example">
3 Answers 3
To add Custom Css class to the existing div element to the magento you need follow the below mentioned procedure.
add
<referenceContainer name="page.wrapper" htmlClass="page-wrapper example"/>
in your custom theme default.xml layout file
-
We should add htmlTag if the html element doesn't exist: <container name="custom_head" htmlTag="div" htmlClass="container"> otherwise the error could appear. "HTML ID or class will not have effect, if HTML tag is not specified."Chen Hanhan– Chen Hanhan2023年02月04日 22:05:11 +00:00Commented Feb 4, 2023 at 22:05
Please add your css to vendor/module/frontend/web/css/style.css
The best way to do this is add your custom css File:
If you have already a custom theme (inherited from Luma) i would suggest to place it in the folder "Magento_Theme\web\css\custom.css" and add your css there
then you want to include your css in the pages that you want, if you need it in the whole site i suggest to declare it in:
"Magento_Theme\layout\default_head_blocks.xml" inside it:
<css src="Magento_Theme::css/custom.css" />
Instead if you dont have a custom template, you'll have to create a file in:
vendor\module\view\frontend\layout\default_head_blocks.xml
inside it:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
<css src="Vendor_Module::css/custom.css" />
</head>
</page>
And your css in:
Vendor\Module\view\frontend\web\css\custom.css