mdb 8 custom skins not working

web
mobile

Topic: mdb 8 custom skins not working

Andrew pro asked 8 months ago

Expected behavior Custom styling that has been used in previous versions should still work. Actual behavior The files _custom-skin.scss, _custom-styles.scss, _custom-variables.scss are now ignored and there is nothing to indicate how to migrate custom skins to version 8. The entire MDB that I paid for is currently useless, leaving me no way to move to Angular 8. It was bad enough figuring out how to migrate my heavily customized style the last time you changed it. Now you have changed it in a way that seems to have no way to apply the rules in the _custom-* files that you have removed without any warning. ⚠️


Damian Gemza staff answered 8 months ago

Dear @Andrew

The custom skins shouldn't be placed in _custom-skins.scss file, because only MDB jQuery uses this file.

In Angular, we're defining custom skins in global styles.scss stylesheet, as it is described in our docs.

Please add your custom skin code to styles.scss, and add there necessary imports:

@import '~ng-uikit-pro-standard/assets/scss/core/mixins';
@import '~ng-uikit-pro-standard/assets/scss/core/colors';
@import '~ng-uikit-pro-standard/assets/scss/core/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/variables-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/skins-pro';

Please take a look at the below code - that's my styles.scss file where I'm defining custom skin which is working fine with MDB Angular 8:

$skins: () !default;
$skins: map-merge((
  "custom": (
    "skin-primary-color": #fff,
    "skin-navbar": #fff,
    "skin-footer-color": #fff,
    "skin-accent": #fff,
    "skin-flat": #fff,
    "skin-sidenav-item": #fff,
    "skin-sidenav-item-hover": #fff,
    "skin-gradient-start": #fff,
    "skin-gradient-end": #fff,
    "skin-mask-slight": #fff,
    "skin-mask-light": #fff,
    "skin-mask-strong": #fff,
    "skin-sn-child": #fff,
    "skin-btn-primary": #fff,
    "skin-btn-secondary": #fff,
    "skin-btn-default": #fff,
    "skin-text": #fff
  )
), $skins);

/* You can add global styles to this file, and also import other style files */
@import '~ng-uikit-pro-standard/assets/scss/core/mixins';
@import '~ng-uikit-pro-standard/assets/scss/core/colors';
@import '~ng-uikit-pro-standard/assets/scss/core/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/variables-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/skins-pro';

Best Regards,

Damian


Andrew pro answered 8 months ago

How do I handle the changes in the _custom_styles.scss?

Here is one example (of many) that worked when you provided the slots for custom_styles that no longer work because of the new 'modularity'.

.solid-toast {
  @extend .md-toast;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19) !important;
  opacity: 1 !important;
}

Damian Gemza staff commented 8 months ago

Move every change from _custom-styles.scss file to global styles.scss stylesheet. From there, those styles should work.

Could you please provide me with the reproduction steps - how can I be able to reproduce this problem? For example, with those toasts? Show me every code which is needed - ts, html, scss.

Best Regards,

Damian


Andrew pro commented 8 months ago

I tried moving them to the styles.scss, but that doesn't work because the .md-toast is no longer defined at the global level (.md-toast is unknown element). It only exists in the alert module now. I don't see a way to add custom styles to these items that are now only in the individual modules.


Arkadiusz Idzikowski staff commented 7 months ago

I'm afraid that this approach will no longer be correct in the MDB 8. We needed to remove component styles from the global scope in order to reduce the bundle size.


Andrew pro commented 7 months ago

Are you saying that, without warning, you have removed the ability to add custom styling to your components?


Arkadiusz Idzikowski staff commented 7 months ago

Customization of the components is still possible, but there will be problem with this specific approach (using sass extend on one of our classes). You can still add custom class to the toast and we recently provided a better way for specifying opacity (in the toast configuration options).

Please take a look at our notification docs (opacity section and API tab at the top of the page):

https://mdbootstrap.com/docs/angular/advanced/notifications/


Andrew pro commented 7 months ago

I get that this is how it is now, but I am not happy. I have to rework my entire style structure. I haven't even had time to determine how bad this is going to be yet. Then I have to re-document/re-train the branding department so they will understand how to configure the various build targets. I imagine that sort of thing doesn't affect the 99% of your customers that roll out a single site per codebase, but for those of us that support multiple customers with branded sites, this was a terrible decision to drop in without any warning/deprecation notice. Shame on you.


Mitch commented 7 months ago

Agreed with Andrew, this added a lot of frustration for me as well.


Schermbecker pro commented 7 months ago

Same here - frustrating, that all custom styles and custom variables obvioulsy do not work anymore. On the one hand we have to keep on track with MDB versions, on the other hand we first have to bring custom styles to version 8. At the moment I do not know how to implement our custom styles - when putting variables and styles to styles.scss compiler throws errors.


Arkadiusz Idzikowski staff commented 7 months ago

@Schermbecker

Which styles do you need to customize and what are the exact problems?


Hahn pro commented 6 months ago

I didnt figure out how to replace the changes made in _custom_variables.scss. My problem is mainly the primary color. I found no solution for now.


Andrew pro commented 6 months ago

I've considered refactoring the mdb codebase back to a workable form, but that would quickly become a nightmare with future versions. I have been considering switching to Angular Material w/ Angular Flex-Layout. I don't suppose anyone has any insights into that approach?


ais pro answered 7 months ago

Is this relevant? https://mdbootstrap.com/support/angular/custom-skin-styles-not-applied-to-nav-tabs/


Damian Gemza staff commented 7 months ago

In some sort yes. There's a bug which we have to resolve. Why you're asking?


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No