Customization Questions

duckies commented 4 years ago

Hi Marcin!

Thanks for your reply. It's good to have your confirmation that many variables are not working properly in _custom-variables.scss. I have used _custom-styles.scss per your suggestion and the overridden styles are working. :-)

Do you know how I can change the breadcrumb separator to use '>'?

Best regards.

Marcin Luczak staff commented 4 years ago

As changing breadcrumb-divider via variables would be problematic I suggest you to use its general selector inside _custom-styles.scss file, please see example below: .breadcrumb-item + .breadcrumb-item::before { display: inline-block; // default padding-right: 0.5rem; // default color: #6c757d; // default content: ">" !important; // will change separator }

This way you can also change breadcrumb-divider color or padding, or any other style.

Regards, Marcin

duckies commented 4 years ago

Hi Marcin!

Thank you for the custom styled breadcrumb as it is working! Do you know if _custom-skin.scss has more options than these default ones:

$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 );

Thank you!

Marcin Luczak staff commented 4 years ago

Following documentation https://mdbootstrap.com/docs/b4/jquery/css/skins/#custom, you can only use options that you've mentioned. All the other styles you can customize via custom styles.

Regards, Marcin

duckies commented 4 years ago

Hi Marcin,

Thanks for the confirmation for the skin options. BTW, I tried to customize tooltips and after spending hours I finally got it to work: https://mdbootstrap.com/snippets/jquery/karatemom/2867789#js-tab-view . My question is does the styling have to be so involved with creation of the tooltip object in Javascript needing a template? I've done tooltip customization with plain Bootstrap and it seems to be much simpler - see http://jsfiddle.net/duckies/rwL2890v/ . Any way we can simply the MDBootstrap one?

Thank you

Marcin Luczak staff commented 4 years ago

Hi @duckies,

I've rearranged your snippet so it works almost the same as your Bootstrap example, please see the CSS section of the snippet https://mdbootstrap.com/snippets/jquery/marcin-luczak/2867987

In this case, selectors for tooltip were slightly different than in your Bootstrap example. It is always a good idea to check component structure in the dev tools if you want to do some customization. You can check Tooltip structure by e.g. changing its hide delay: { "show": 500, "hide": 50000 }, and inspecting its HTML in the dev tools. Hope this will be helpful :)

Best, Marcin

duckies commented 4 years ago

Hi Marcin,

I appreciate your response and invaluable tips. I got it working...Thank you! :-) Do you know when variables will be fixed so we can use them in _custom-variables.scss?

Thanks so much again.

Marcin Luczak staff commented 4 years ago

I'm happy that I could help :) Unfortunately, I cannot give you a specific date when it will be fixed. It has been added to our issue list and the team shall decide the timing and sequence of fixes.

Regards, Marcin