Customization Questions


Topic: Customization Questions

duckies asked 4 years ago

Hi,

I ran into several issues while customizing components and I was hoping you can help to provide some guidance:

-- In _custom-skin.scss, I was able to customize skins such as "skin-btn-primary", "skin-btn-secondary" and "skin-btn-default". How can I customize class, "btn-success", color? I added "skin-btn-success" but it did not work. I would like to customize colors for all button types(e.g. btn-danger, btn-info and etc.)

-- Under ../scss/core directory, I found _variables.scss in ../scss/core/bootstrap, ../scss/core and ../scss/pro . Can I override any variables found in those three _variables.scss in _custom-variables.scss? I tried to override links with these colors and styles but the $link-hover-decoration is not showing underline: $link-color: blue; $link-decoration: none !default $link-hover-color: blue; $link-hover-decoration: underline !default; // TODO: not working! I also tried to override the color palette in _custom-variables.scss file but nothing is overridden: $blue: #1A87BB !default; $purple: #5A2D83 !default; $red: #E03C31 !default; ... To what extent can I use these variables as I am not having much luck with them. Do you have documentation and examples on the list of variables we can override vs. those we cannot.

-- How do we override component styles in _custom-styles.scss? Do you have examples? I tried to change the alert's styles but they don't work: .alert .alert-primary { background-color: light-green; color: green; }

-- In https://mdbootstrap.com/docs/b4/jquery/navigation/breadcrumb, I want to change the breadcrumb to using '>' so I clicked on 'Open in MDBEditor' for Javascript, $breadcrumb-divider: quote(">"); , but the breadcrumb didn't change. See: https://mdbootstrap.com/snippets/standard/karatemom/2865103. I then tried adding breadcrumb variables in _custom-variables.scss but they didn't work either.

Please share how we can customize controls, colors and styles with _custom-styles.scss and _custom-variables.scss. I found very little documentation on customization and would appreciate any help you can provide.

Thank you.


Marcin Luczak staff answered 4 years ago

Hi @duckies,

You can override styles with your custom styles in _custom-styles.scss. To do so you have to add !important to each value and remember to use any kind of bundler to compile your .scss files, e.g:

.alert .alert-primary { 
    background-color: light-green !important;
    color: green !important;
}

I would recommend using the styles file for customization of your code as it seems variables are not working properly for Bootstrap 4. I've made a proper task for that in our issue list.

Regards, Marcin


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


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
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: All
  • Browser: IE 11, Firefox, Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes