MDB Skin settings are not effecting navbar sidebar dropdown


Topic: MDB Skin settings are not effecting navbar sidebar dropdown hover effects

stemago asked a year ago

I changed the skin primary color and there are still elements like dropdown hover effects or navbar hover effects which won't accept the new primary color.

Is there anything else I need to change for that?


Marta Szymanska staff pro premium answered a year ago

Hi,

would you show me a demo of your website with the skin code? For now, I suppose that for navbar you also need to change in your custom-skin.scss file skin-navbar property and for dropdown on hover skin-accent property. Change these properties, recompile your CSS and check if this helped you.

Best, Marta


Hi,

Did you change skin-navbar property and dropdown on hover skin-accent property in your custom-skin.scss file?


stemago answered a year ago

$skins: map-merge(( "cbk-brown": ( "skin-primary-color": #A6938D, "skin-navbar": #A6938D, "skin-footer-color": #000, "skin-flat": #fff, "skin-accent": #DBCECE, "skin-sidenav-item": #8C7C77, "skin-sidenav-item-hover": #A6938D, "skin-gradient-start": #fff, "skin-gradient-end": #fff, "skin-mask-slight": #fff, "skin-mask-light": #fff, "skin-mask-strong": #000, "skin-sn-child": #8C7C77, "skin-btn-primary": #A6938D, "skin-btn-secondary": #000, "skin-btn-default": #ccc, "skin-text": #fff ),

Marta Szymanska staff pro premium commented a year ago

This is correct code for skin:

$skins: () !default; $skins: map-merge(( "test": ( "skin-primary-color": #fff, "skin-navbar": #fff, "skin-footer-color": #fff, "skin-flat": #fff, "skin-accent": #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);

Of course, you can give your own names and values. In this snippet I can't see your scss, could you show me your website?

Best, Marta


stemago commented a year ago

Where is the difference to my attached code? You can download the custom files here, due to the website won't help you cause template is behind member area! https://con4.creativbaukasten.de/files/cbk-theme/assets/mdb-dashboard/scss/_custom-skin.scss


Marta Szymanska staff pro premium commented a year ago

Hi,

have you tried to remove a flag !default from your custom-skin.scss and once again recompile the CSS?

Best, Marta


stemago commented a year ago

// Your custom skin // Skins $skins: ();

$skins: map-merge(( "cbk-brown": ( "skin-primary-color": #A6938D, "skin-navbar": #A6938D, "skin-footer-color": #000, "skin-flat": #fff, "skin-accent": #DBCECE, "skin-sidenav-item": #8C7C77, "skin-sidenav-item-hover": #A6938D, "skin-gradient-start": #fff, "skin-gradient-end": #fff, "skin-mask-slight": #fff, "skin-mask-light": #fff, "skin-mask-strong": #000, "skin-sn-child": #8C7C77, "skin-btn-primary": #A6938D, "skin-btn-secondary": #000, "skin-btn-default": #ccc, "skin-text": #fff ), "cbk-cyan": ( "skin-primary-color": #81C8DC, "skin-navbar": #81C8DC, "skin-footer-color": #000, "skin-flat": #fff, "skin-accent": #B3DEEA, "skin-sidenav-item": #72B1C2, "skin-sidenav-item-hover": #81C8DC, "skin-gradient-start": #fff, "skin-gradient-end": #fff, "skin-mask-slight": #fff, "skin-mask-light": #fff, "skin-mask-strong": #000, "skin-sn-child": #72B1C2, "skin-btn-primary": #81C8DC, "skin-btn-secondary": #000, "skin-btn-default": #ccc, "skin-text": #fff ), "cbk-green": ( "skin-primary-color": #BFD05B, "skin-navbar": #BFD05B, "skin-footer-color": #000, "skin-flat": #fff, "skin-accent": #DDE7AB, "skin-sidenav-item": #A8B851, "skin-sidenav-item-hover": #BFD05B, "skin-gradient-start": #fff, "skin-gradient-end": #fff, "skin-mask-slight": #fff, "skin-mask-light": #DDE7AB, "skin-mask-strong": #000, "skin-sn-child": #A8B851, "skin-btn-primary": #BFD05B, "skin-btn-secondary": #000, "skin-btn-default": #ccc, "skin-text": #fff ), "cbk-orange": ( "skin-primary-color": #F26D47, "skin-navbar": #F26D47, "skin-footer-color": #000, "skin-flat": #f00, "skin-accent": #F6A68F, "skin-sidenav-item": #D9603F, "skin-sidenav-item-hover": #F26D47, "skin-gradient-start": #fff, "skin-gradient-end": #fff, "skin-mask-slight": #0ff, "skin-mask-light": #F6A68F, "skin-mask-strong": #000, "skin-sn-child": #D9603F, "skin-btn-primary": #F26D47, "skin-btn-secondary": #000, "skin-btn-default": #ccc, "skin-text": #fff ) ), $skins);

this is the new code, which is still having the same problem


Marta Szymanska staff pro premium commented a year ago

Hi,

this is very hard to see what is wrong in your page with only a code of skin object. I don't know how to help you now in the comment. If you will send me your website or a project to m.szymanska@mdbootstrap.com it will be very helpful for me to check your code and see what is wrong, so please do it, and I will try to help you as fast as possible.

Best, Marta


stemago commented a year ago

Is this helping you? I also added a Download Button to get access to the full assets https://mdbootstrap.com/snippets/jquery/stemago/993352


Marta Szymanska staff pro premium commented a year ago

Thank you for sending me your project, it is very helpful. Would you tell me what file is one when you have a problem with skins? Just tell me the path and the name of the file and I will check it.


stemago commented a year ago

As I'm using the cbk-brown-skin in this demo. My problem is the description above, that hover effects in the navbar at the top are still blue, same as the dropdown items on the right. The skin settings are placed at "scss/_custom-skin.scss file. Maybee it would be easier if you guys could create a demo page where somone could play around with those skin parameters and see them in action. There should be the same result happening as in my demo, if I haven't done anything wrong.


Marta Szymanska staff pro premium commented a year ago

Hi,

I added a code in your snippet for hover on bars icon: https://mdbootstrap.com/snippets/jquery/stemago/993352#css-tab-view.

Best, Marta


stemago commented a year ago

Thanks for that Info, but why is the skin setting not working. Are there parts missing?


Marta Szymanska staff pro premium commented a year ago

Not each class is included in the skins loop. It means that for example, navbar-toggle on hover has not its settings in skins. We will fix that as soon as possible.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.8.5
  • Device: PC
  • Browser: chrome
  • OS: Win
  • Provided sample code: No
  • Provided link: No