How to Override Module CSS in Custom Theme?

Question

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.

• poor_documentation: Is this even possible within my theme or do I need to override the module with a custom module? I thought one of the great benefits of M2 is that you can customize Modules differently for each theme.
• Aaron Allen: Try using this path to override the css file: app/design/frontend/[Namespace]/[theme]/Ubertheme_UbContentSlider/web/css/owl-carousel1/owl.theme.css. Are you in developer mode or production?
• poor_documentation: That path also does not work. Magento is still loading the module's default instead of my template's edited one. I am in developer mode and am clearing cache between changes.

Answer 1

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/*" !

• Aaron Allen: Dependency injection is unrelated to css. Probably all you needed to do was rm -rf pub/static/* var/view_preprocessed/* and/or clear your browser cache.
• poor_documentation: Ah! I didn't think recompiling DI made any sense for this. But I did run setup:upgrade before recompiling and I believe that command clears out pub/static and var/view_preprocessed

Answer 2

You can also override this using this two files. Just add parent classes in that you want to override in _extend.less

Example: if you want to overwrite .miniquote-wrapper you need add to file .header .miniquote-wrapper (without parent .header will not work)

app/design/frontend/[Namespace]/[theme]/web/css/styles.less

@import 'source/_extend.less';

app/design/frontend/[Namespace]/[theme]/web/css/source/_extend.less

// Common
// (for styles used in both mobile and desktop views)
& when (@media-common = true) {
//end common
}
// Mobile
// (for all mobile styles.)
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
///end mobile
}
// Tablet
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
///////end tablet
}
// Desktop
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
//end desktop
}