1

I've installed an extension and want to make some CSS customizations to the modal pop-up that it provides. There are basic options in the backend for styles, but I want to use CSS to write some custom changes.

I come from a background in WordPress, so there I'd just enqueue a CSS file in my theme directory and maybe store it in some sort of "integrations" folder in my theme so I can organize it and know that the file pertains to a specific plugin.

What would be a similar way to do this in Magento?

2
  • What's the URL of the page? Is it for the front or backend? Mar 24, 2021 at 22:15
  • No specific URL. It'd be on the front-end. I just want to write some CSS that will override some extension CSS. Mar 24, 2021 at 22:18

2 Answers 2

0

I quote from Magento official document

For example, to override the Magento_Review module’s style, the directory path should be <your_theme_dir>/Magento_Review/web/css/source/_module.less.

For more information, check this link https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-guide/css_quick_guide_approach.html#override-module-styles

0

I am not sure which page does your extension applied to.

In Magento, there are multiple ways to add CSS. I think for easier understanding, you can add CSS this way: this will add to all frontend pages

To add CSS to all pages, create this in your theme:

Create a file app/design/frontend/Theme/Your_Theme/Magento_Theme/layout/default.xml if it doesn't exist.

<?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>
        <link src="Magento_Theme::your-css.css"/>
    </head>
</page>

And clear your cache. If needed you may have to deploy the static content.

Deploy content command from your SSH: bin/magento setup:static-content:deploy -f

UPDATE

If you just want to override the CSS for any module then create a field called _module.less

app/design/frontend/Theme/Your_Theme/Custom_Module/web/css/source/_module.less

Then you will have to write .less CSS and it will override the styles.

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.