4

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.

  • 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. – Steve Karwacki Jan 4 '17 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? – Aaron Allen Jan 4 '17 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. – Steve Karwacki Jan 4 '17 at 21:59
3

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

  • 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. – Aaron Allen Jan 4 '17 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 – Steve Karwacki Jan 4 '17 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
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.