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?
-
What's the URL of the page? Is it for the front or backend?Adarsh Khatri– Adarsh Khatri2021年03月24日 22:15:10 +00:00Commented 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.Timothy Fisher– Timothy Fisher2021年03月24日 22:18:31 +00:00Commented Mar 24, 2021 at 22:18
2 Answers 2
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
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.