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

stemago free asked 4 years 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?


stemago free answered 4 years 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 Wierzbicka staff commented 4 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 free commented 4 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 Wierzbicka staff commented 4 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 free commented 4 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 Wierzbicka staff commented 4 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 free commented 4 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 Wierzbicka staff commented 4 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 free commented 4 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 Wierzbicka staff commented 4 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 free commented 4 years ago

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


Marta Wierzbicka staff commented 4 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.


Aliaksandr Andrasiuk staff answered 4 years ago


Hi,

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


stemago free answered 4 years ago


Marta Wierzbicka staff answered 4 years 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: PC
  • Browser: chrome
  • OS: Win
  • Provided sample code: No
  • Provided link: No