5

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.

Improve this question
3
  • 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. Commented Jan 4, 2017 at 20:24
  • 1
    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? Commented Jan 4, 2017 at 21:46
  • 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. Commented Jan 4, 2017 at 21:59

2 Answers 2

Reset to default
9

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

Improve this answer
2
  • 1
    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. Commented Jan 4, 2017 at 23:04
  • 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 Commented Jan 4, 2017 at 23:06
0

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 }
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.