0

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

0

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

1
  • 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." Commented Feb 4, 2023 at 22:05
0

Please add your css to vendor/module/frontend/web/css/style.css

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.