Topic: MDB Skin settings are not effecting navbar sidebar dropdown hover effects
stemago free asked 5 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 5 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 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 free 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 Wierzbicka staff 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 free 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 Wierzbicka staff 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 free 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 Wierzbicka staff 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 free 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 Wierzbicka staff 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 free commented 5 years ago
Thanks for that Info, but why is the skin setting not working. Are there parts missing?
Marta Wierzbicka staff 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.
Aliaksandr Andrasiuk staff answered 5 years ago
Hi,
Did you change skin-navbar
property and dropdown on hover skin-accent
property in your custom-skin.scss file?
Marta Wierzbicka staff answered 5 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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