Topic: Angular Material Design for Bootstrap Pro Custom Skins & CSS class overide & Gitlab Access

surabathula karthik pro asked 6 years ago


How do we edit existing css class, could you please provide information on how to do it. I am trying to edit "light-blue-skin" to different color which suits the project, i tried to search but i could not find any.
<body class="light-blue-skin">
I there any documentation for Bootstap, i am finding it hard to use the existing components as i am learner with mdbootstrap.
Please help me.
Hope you can understand.
Thanks & Regards,
Karthik S

Damian Gemza staff answered 6 years ago


Dear surabathula karthik, You can achieve your desired behavior by overwriting the light-blue skin in your styles.scss stylesheet. Copy the below code into your styles.scss, and change every variable to your desired values.
$skins: () !default;

$skins: map-merge((

"light-blue": (

"skin-primary-color": #fff,

"skin-navbar": #fff,

"skin-footer-color": #fff,

"skin-accent": #fff,

"skin-flat": #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);

@import "~ng-uikit-pro-standard/assets/scss/mdb";
After importing ng-uikit-pro-standard/assets/scss/mdb file, please copy the img and fonts folders from ng-uikit-pro-standard/assets to level above styles.scss file. So if your styles.scss file is located in the src directory, paste the img and fonts folders to the root directory of your app. 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.2
  • Device: Mobile/PC
  • Browser: Chrome/IE9/IE Edge/Mozila
  • OS: Windows/Linux
  • Provided sample code: No
  • Provided link: No