CODEWITHSUNDEEP
cssangularcustomization
Myrfa
Myrfa

Reputation: 1

MDB Angular Pro (custom CSS)

I'm new here. I'm using MDB Angular Pro (6.2.2 version) and trying to customize their Date Picker and Time Picker for my project.

For those who know MDB Angular Pro, I don't make any change in _custom-skin.scss, _custom-styles.scss, and _custom-variables.scss in \node_modules\ng-uikit-pro-standard\assets\scss since they will be deleted during "maven clean install".

Instead, I put my customized codes in the web application directly. But nothing works to override the original CSS.

I tried desperately to put the codes either in "styles.scss" , "our_component.component.scss", or "app.component.scss",

Do you understand how does the MDB Angular CSS work? How should I do to customize it correctly ?

Looking forward for your answer. Thanks before.

Best regards

Upvotes: 0

Views: 700

Answers (2)

Konstantinos Ch
Konstantinos Ch

Reputation: 11

Approach

My approach was to create two partials:
_mdb-date-picker.scss
_mdb-time-picker.scss

I then wrote my custom CSS in those files and imported them at the app GLOBAL styles.scss file.

Example

On this example I assign a class to the date-picker dynamically (wedding-picker OR baptism-picker OR wedbapt-picker) and have CSS for each to change all of the top header background-color and day selected circle color. Custom CSS in partial:

  .wedding-picker .picker__box .picker__header .picker__date-display,
  .wedding-picker .picker__box .picker__header .picker__date-display .picker__weekday-display,
  .wedbapt-picker .picker__box .picker__header .picker__date-display,
  .wedbapt-picker .picker__box .picker__header .picker__date-display .picker__weekday-display {
    background-color: $weddingColor;
    font-weight: 400;
  }

  .wedding-picker .picker__box .picker__table .picker__day--selected,
  .wedbapt-picker .picker__box .picker__table .picker__day--selected{
    background-color: $weddingColor;
  }

  .baptism-picker .picker__box .picker__header .picker__date-display,
  .baptism-picker .picker__box .picker__header .picker__date-display .picker__weekday-display {
    background-color: $baptismColor;
    font-weight: 400;
  }

  .baptism-picker .picker__box .picker__table .picker__day--selected {
    background-color: $baptismColor;
  }

Then import them to your app global styles.scss

@import "app/your/route/to/partial/mdb-date-picker"

Click the link to see the end result: Custom Date picker

WARNING

Keep in mind that with this approach you need to make sure you have assigned an ID or class to your date-picker or time-picker and write CSS for that specific ID or class, because if you have plenty of those components (so plenty of those partials files) then the order in which you import them into your global styles.scss matters and the files will override each other. In the end, this shouldn't be a problem because we always use custom classes for styles anyway.

CONCLUSION

I tried many approaches, but only this worked for me, since editing MDBs custom-**.scss files will cleanse them when you update as you said. But with this approach you can override any style of any MDB FREE/PRO components you want.

Upvotes: 1

ak.leimrey
ak.leimrey

Reputation: 1263

Sadly, I can't offer MUCH more insight than you are aware of. For example... I could change the padding of the footer of the calender by accessing it via

.picker__box .picker__footer {
    padding: 20px 10px !important;
}

And thusly overload the css styling of the original datepicker. With...

.picker__box .picker__table .picker__day--selected, .picker__box .picker__table .picker__day--selected:hover, .picker__box .picker__table .picker--focused {
    background-color: pink
}

I changed the color of the selected day background color to... well, pink

enter image description here

Upvotes: 1

Related Questions