Topic: Custom CSS for Date and Time Picker

Youcef pro asked 5 years ago


Hi, We are trying to customize the Date Picker and the Time Picker. We've tried creating a new skin in custom_skins.scss, or adding our style to src/styles.scss, both being included in angular.json. But nothing seems to override the original CSS. We tried to put our codes either in "styles.scss" , "our_component.component.scss", or "app.component.scss", Could you please explain, how does your MDB Angular CSS work and how should we do to customize it ? Thanks in advance. Our styles tag in angular.json:
            "styles": [
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
              "node_modules/bootstrap/dist/css/bootstrap-grid.css",
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap-reboot.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap-grid.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/_custom-skin.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/_custom-styles.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/_custom-variables.scss",
              "src/styles.scss"
            ],

Damian Gemza staff answered 5 years ago


Dear Youcef, Please check my previous answer in this ticket. There was described, how to create your own skin: LINK If you will encounter more problems, feel free to ask. Best Regards, Damian

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No