Tutorial to create custom skin

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Tutorial to create custom skin

kmueller222 pro asked 7 years ago

Hi there, I like the framework very much. Is there a tutorial to create own skins, explaining in more detail which sass files and variables to be adjusted ? Which can be used by beginners as well... BR Kai

Bartłomiej Malanowski staff pro premium answered 7 years ago

Currently, we don't have any tutorial that would help you to create your own skin, but it's not that hard to create new skin. You just need to take a look at sass/mdb/pro/_variables-pro.scss file. Here you'll find this code: "light-blue": ( "skin-primary-color": #3d799c, "skin-navbar": #3f5c80, "skin-footer-color": #3f5c80, "skin-accent": #b4c2c9, "skin-flat": #6a9ed3, "skin-sidenav-item": rgba(29, 54, 86, 0.6), "skin-sidenav-item-hover": rgba(29, 54, 86, 0.6), "skin-gradient-start": #69adf4, "skin-gradient-end": #69adf4, "skin-mask-slight": rgba(87, 134, 180, 0.5), 'skin-mask-light': rgba(87, 134, 180, 0.65), "skin-mask-strong": rgba(87, 134, 180, 0.8), "skin-sn-child": #aadeff, "skin-btn-primary": #ff4a67, "skin-btn-secondary": #64c3f0, "skin-btn-default": #2d486a, "skin-text": #fff ), It's a simple array that you need to duplicate it and customize the colors. You should also change "light-blue" to your custom skin name I'll write a tutorial as soon as possible ;)

randy pro commented 7 years ago

It would be great if there were a page that would allow you to preview how each variable affects the skin or at the very least some documentation around this.

Bartłomiej Malanowski staff pro premium commented 7 years ago

Thank you for the tip! I added this to our list of ideas ;)

Unicomp pro commented 6 years ago

How can I get the one of the existing skin colors out of the system? (I would like to make a slight variation on the black skin for example)

elastic-bee pro answered 6 years ago

any updates here? i need to customize mdb with our CI and currently its not so easy ^^

Marta Szymanska staff pro premium answered 6 years ago

Hi, if you use Gulp version of MDB Pro, you can see in scss catalog this file: "_custom-skin.scss". You can change default values to yours, save, compile and you will have your custom skin. And could you explain what do you mean by CI? Best, Marta

elastic-bee pro commented 6 years ago

no, iam using the react pro version. and iam not sure how i can create a custom skin or overwrite an existing one clean an correctly.

elastic-bee pro commented 6 years ago

CI means corporate identity ...so i mean that i need a custom skin in your company colors ;)

Marta Szymanska staff pro premium answered 6 years ago

Hi, MDB-react team should help you tomorrow with that. Best, Marta
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: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
kmueller222
Pro User
0Support score
1Questions 0Answers
0Snippets likes 0Snippets