Magento 2 – How to Override Module CSS in Custom Theme

luma-thememagento2moduleoverridestheme

I am using Magento 2.1.3 EE and my custom theme is using Luma as it's parent. I am trying to override a third-party module's CSS in my custom theme.

I am not using LESS. When I say override, I mean that I want Magento to pull my edited version of the module's CSS instead of the module's default CSS.

Here is the path to the CSS file I want to override:

app/code/Ubertheme/UbContentSlider/view/frontend/web/css/owl-carousel1/owl.theme.css

My understanding was that you could override this file with the following directory structure in my theme:

app/design/frontend/[Namespace]/[theme]/Ubertheme_UbContentSlider/view/frontend/web/css/owl-carousel1/owl.theme.css

I have tried this and numerous other variations however it doesn't work. I can either get both my custom css file and the module's default css file loaded or Magento can't find my custom css file and console gives a 404.

I did notice that UbContentSlider adds their CSS in a Ubertheme/UbContentSlider/Block/Init.php class like so:

$pageConfig->addPageAsset('Ubertheme_UbContentSlider::css/owl-carousel1/owl.theme.css');

Am I unable to override this CSS conventionally because Ubertheme namespaced it? In that case, I suppose I can just override their Block/Init.php class to point to my theme's custom file.

Best Answer

Arron's comment actually was correct. I just didn't know I needed to clear pub/static and var/view_preprocessed.

To override this file in your theme:

app/code/Ubertheme/UbContentSlider/view/frontend/web/css/owl-carousel1/owl.theme.css

You would place your custom owl.theme.css here:

app/design/frontend/[Namespace]/[theme]/Ubertheme_UbContentSlider/web/css/owl-carousel1/owl.theme.css

Don't forget to run "rm -rf pub/static/* var/view_preprocessed/*" !

Related Topic