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.

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

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
}