MDB Skin settings are not effecting navbar sidebar dropdown

Marta Szymanska staff pro premium commented 5 years 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 5 years 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 5 years 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 5 years 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 5 years 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 5 years 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 5 years 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 5 years 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 5 years 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 5 years ago

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

Marta Szymanska staff pro premium commented 5 years 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.