SideNav text and background color

web
mobile

Topic: SideNav text and background color

Gianluca Giacalone asked 2 years ago

Hi, I have some problems with skinning SideNav component.

How can I change text color and background color of SideNav component?
I already done writing skin code in style.scss and works well except for sidenav component...

I really like some help, thanks a lot and sorry for my english!

/* You can add global styles to this file, and also import other style files */
@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/pro/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/mixins";
@import "~ng-uikit-pro-standard/assets/scss/pro/skins";

// Custom skin for JJ
$skins: () !default;
$skins: map-merge((
"jjlovesu": (
"skin-primary-color": #d9a0b5,
"skin-navbar": #fff,
"skin-footer-color": #fff,
"skin-accent": #e9bdcd,
"skin-flat": #404f9f,
"skin-sidenav-item": rgba(250, 80, 121, .8),
"skin-sidenav-item-hover": #e9bdcd,
"skin-gradient-start": #272d6e,
"skin-gradient-end": #90a8ff,
"skin-mask-slight": rgba(35, 65, 134, .5),
"skin-mask-light": rgba(35, 65, 134, .65),
"skin-mask-strong": rgba(35, 65, 134, .8),
"skin-sn-child": #ff89ac,
"skin-btn-primary": #fd668c,
"skin-btn-secondary": #3c61ae,
"skin-btn-default": #9095aa,
"skin-text": #000
)
), $skins);


Damian Gemza staff answered 2 years ago

Dear @giacas 

Your problem is caused by a bug, that skin-text variable is not used in Sidenav's accordion text.

For a workaround, please use the below code. I have replaced order of skin definitions with imports, added $skin-text variable, and used it in three places: "skin-text", two classes.

/* You can add global styles to this file, and also import other style files */

$skin-text: red;

// Custom skin for JJ
$skins: () !default;
$skins: map-merge((
"jjlovesu": (
"skin-primary-color": #d9a0b5,
"skin-navbar": #fff,
"skin-footer-color": #fff,
"skin-accent": #e9bdcd,
"skin-flat": #404f9f,
"skin-sidenav-item": rgba(250, 80, 121, .8),
"skin-sidenav-item-hover": #e9bdcd,
"skin-gradient-start": #272d6e,
"skin-gradient-end": #90a8ff,
"skin-mask-slight": rgba(35, 65, 134, .5),
"skin-mask-light": rgba(35, 65, 134, .65),
"skin-mask-strong": rgba(35, 65, 134, .8),
"skin-sn-child": #ff89ac,
"skin-btn-primary": #fd668c,
"skin-btn-secondary": #3c61ae,
"skin-btn-default": #9095aa,
"skin-text": $skin-text
)
), $skins);
@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/pro/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/mixins";
@import "~ng-uikit-pro-standard/assets/scss/pro/skins";



.side-nav .collapsible .card .card-header a h5 {
color: $skin-text;
}

.side-nav .collapsible .card-body li a {
color: $skin-text;
}

Best Regards,

Damian


giacas commented 2 years ago

Thanks a lot, I'll try as soon as possible.

Best regards,
Gianluca


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 7.0.0
  • Device: Desktop / Mobile
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No