How to Properly Customize MDB

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: How to Properly Customize MDB

godminders pro asked 8 years ago

I currently use the following strategy for integrating Bootstrap into VS 2017 and recompiling only what's needed into my own minified CSS file. https://channel9.msdn.com/Series/aspnetmonsters/ASPNET-Monsters-74-Customizing-Bootstrap-4-in-Your-ASPNET-Core-MVC-Application It works very well. I can modify the bootstrap variables in my own override scss file and it will compile cleanly. I want to use MDB as well. It appears that Bootstrap 4 is not fully incorporated into it so that I have to load both Bootstrap and MDB in my main CSS file. What is the appropriate strategy for modifying MDB so that when a new version comes out, I don't have to reset all your variables. For example, I want to set my colors up as variables first. Then modify some bootstrap properties and insure they are not overwritten by Bootstrap or MDB. Eg: $light-stone is defined first in my constants file. Then in my _b4_overrides I have. //* //* Body //* // Settings for the <body> element. $body-bg: $light-stone; This will apply all the way through the rest of the bundling. I can reinstall bootstrap on an upgrade and not lose any changes. How do I incorporate MDB4 into that? Below is my main css file to give you an idea of the strategy. Unfortunately MDB is overwriting my variable changes and changing my media queries. TIA for any help on a streamlined customization process. 
@charset 'UTF-8';

/*
  1. Application wide variables.  (non-Bootstrap)
*/
@import "constants";

/*
  2. Bootstrap & MDB Pro Imports Section 
*/

// Core variables and mixins
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins";

//* Here is where we can copy variables from <code>_variables.scss</code> to override default values without modifying source files.
@import "bootstrap-variable-overrides";

// Reset and dependencies
@import "../lib/bootstrap/scss/normalize";
@import "../lib/bootstrap/scss/print";

// Core CSS
@import "../lib/bootstrap/scss/reboot";
@import "../lib/bootstrap/scss/type";
@import "../lib/bootstrap/scss/images";
@import "../lib/bootstrap/scss/code";
@import "../lib/bootstrap/scss/grid";
@import "../lib/bootstrap/scss/tables";
@import "../lib/bootstrap/scss/forms";
@import "../lib/bootstrap/scss/buttons";

// Components
@import "../lib/bootstrap/scss/transitions";
@import "../lib/bootstrap/scss/dropdown";
@import "../lib/bootstrap/scss/button-group";
@import "../lib/bootstrap/scss/input-group";
@import "../lib/bootstrap/scss/custom-forms";
@import "../lib/bootstrap/scss/nav";
@import "../lib/bootstrap/scss/navbar";
@import "../lib/bootstrap/scss/card";
@import "../lib/bootstrap/scss/breadcrumb";
@import "../lib/bootstrap/scss/pagination";
@import "../lib/bootstrap/scss/badge";
@import "../lib/bootstrap/scss/jumbotron";
@import "../lib/bootstrap/scss/alert";
@import "../lib/bootstrap/scss/progress";
@import "../lib/bootstrap/scss/media";
@import "../lib/bootstrap/scss/list-group";
@import "../lib/bootstrap/scss/responsive-embed";
@import "../lib/bootstrap/scss/close";

// Components w/ JavaScript
@import "../lib/bootstrap/scss/modal";
@import "../lib/bootstrap/scss/tooltip";
@import "../lib/bootstrap/scss/popover";
@import "../lib/bootstrap/scss/carousel";

// Utility classes
@import "../lib/bootstrap/scss/utilities";

/*
  3. MDB Framework 
*/

// MDB Framework //

// Mixins
@import "../lib/md-pro/sass/mdb/free/data/prefixer";
@import "../lib/md-pro/sass/mdb/free/data/mixins";

// Variables
@import "../lib/md-pro/sass/mdb/free/data/colors";
@import "../lib/md-pro/sass/mdb/free/data/variables-b4";
@import "../lib/md-pro/sass/mdb/free/data/variables";

//* Here is where we can copy variables from <code>_variables.scss</code> to override default values without modifying source files.
@import "bootstrap-variable-overrides";

//Global
@import "../lib/md-pro/sass/mdb/free/global";

// MDB Free
@import "../lib/md-pro/sass/mdb/free/roboto";
@import "../lib/md-pro/sass/mdb/free/typography";
@import "../lib/md-pro/sass/mdb/free/animations";
@import "../lib/md-pro/sass/mdb/free/waves";
@import "../lib/md-pro/sass/mdb/free/helpers";
@import "../lib/md-pro/sass/mdb/free/buttons";
@import "../lib/md-pro/sass/mdb/free/forms-basic";
@import "../lib/md-pro/sass/mdb/free/cards-basic";
@import "../lib/md-pro/sass/mdb/free/navbars";
@import "../lib/md-pro/sass/mdb/free/hover-effects";
@import "../lib/md-pro/sass/mdb/free/footer";
@import "../lib/md-pro/sass/mdb/free/carousels-basic";

// MDB Premium
@import "../lib/md-pro/sass/mdb/pro/forms-pro";
@import "../lib/md-pro/sass/mdb/pro/tabs";
@import "../lib/md-pro/sass/mdb/pro/msc";
@import "../lib/md-pro/sass/mdb/pro/progress";
@import "../lib/md-pro/sass/mdb/pro/accordion";
@import "../lib/md-pro/sass/mdb/pro/buttons-pro";
@import "../lib/md-pro/sass/mdb/pro/social-buttons";
@import "../lib/md-pro/sass/mdb/pro/cards-pro";
@import "../lib/md-pro/sass/mdb/pro/dropdowns-pro";
@import "../lib/md-pro/sass/mdb/pro/light-box";
@import "../lib/md-pro/sass/mdb/pro/side-nav";
@import "../lib/md-pro/sass/mdb/pro/navbars-pro";
@import "../lib/md-pro/sass/mdb/pro/carousels-pro";
@import "../lib/md-pro/sass/mdb/pro/modals-pro";
@import "../lib/md-pro/sass/mdb/pro/toasts";
@import "../lib/md-pro/sass/mdb/pro/scrollspy";
@import "../lib/md-pro/sass/mdb/pro/charts-pro";
@import "../lib/md-pro/sass/mdb/pro/animations-pro";
@import "../lib/md-pro/sass/mdb/pro/scrollbar";
@import "../lib/md-pro/sass/mdb/pro/ecommerce";
@import "../lib/md-pro/sass/mdb/pro/skins";
@import "../lib/md-pro/sass/mdb/pro/chips";
@import "../lib/md-pro/sass/mdb/pro/parallax";
@import "../lib/md-pro/sass/mdb/pro/stepper";

// DATE & TIME PICKERS
@import "../lib/md-pro/sass/mdb/pro/date_picker/default.scss";
@import "../lib/md-pro/sass/mdb/pro/date_picker/default.date.scss";
@import "../lib/md-pro/sass/mdb/pro/date_picker/default.time.scss";

// SECTIONS
@import "../lib/md-pro/sass/mdb/pro/sections/blog";
@import "../lib/md-pro/sass/mdb/pro/sections/magazine";
@import "../lib/md-pro/sass/mdb/pro/sections/pricing";
@import "../lib/md-pro/sass/mdb/pro/sections/testimonials";
@import "../lib/md-pro/sass/mdb/pro/sections/features";
@import "../lib/md-pro/sass/mdb/pro/sections/team";
@import "../lib/md-pro/sass/mdb/pro/sections/templates";
@import "../lib/md-pro/sass/mdb/pro/sections/social";

/*
  4. My components.
*/

/*
  5. My pages.
*/

webmaster_rg pro answered 6 years ago

Hi,

I have just bought MDB for a project and I'm interested in this solution as well.

If this is not possible, then I could have used the free version instead.

All I want and need is a single file, containing Bootstrap, the MDB styles and on top my own stuff - cleanly rendered - with my own colors..

I can't believe that there is no proper method described either on this site or somewhere else.

I have been trying to get it compiled for the last 2 hours or so. So.. it would be appropriate to describe this process in more detail since

this is a well used practice.

Thanks for asking this question.

 

Regards

Toby

Piotr Glejzer staff answered 6 years ago

Hi Toby, Did you use our gulp tutorial? At the folder MDBPro are files scss like _custom-skins, _custom-variables, _custom-styles. So If you want use your own styles/variables you can put that to files. We are using gulp to minify/compile files and etc. If you will add some code to that files it will be compile to mdb.css and next minify to mdb.min.css. Is that what you need to know? Let me know. If not I will try to help you again. Gulp tutorial: Link Best, Piotr

Kamil Paciepnik answered 8 years ago

Hi godminders, the best way to initialize your changes without a loss during the update mdb or bootstrap is to create your own file sass and adding it to a file sass/mdb.scss. During each update line with the path to your file disappears from mbd.scss. But add it again and compile restore previous settings. Regards

Leo Merkel pro answered 7 years ago

@godminders: I like your approach. Did you find a solution meanwhile? Would be interested. Regards from Germany, Leo

Jose Luis Gouveia answered 6 years ago

any solution found for this issue?

Piotr Glejzer staff answered 6 years ago

Hi, we are very sorry but we don't support any integration with vs. It is possible to do but we don't have any tutorial or fixed to do this. Best, Piotr
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
mdb-customization
Related topics
1
Badges [color] not working
0
customize theme (variables, colors...)
0
full HTML for Plugins
0
Is the customization tutorial still valid for MDB5
0
How to use .vue components instead of .d.ts to make custom build of mdb-vue-ui-kit-pro-advanced?
About author
godminders
Pro User
0Support score
1Questions 0Answers
0Snippets likes 0Snippets