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

Marta Wierzbicka staff answered 6 years ago


Hi, MDB-react team should help you tomorrow with that. Best, Marta

Marta Wierzbicka staff 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 ;)

elastic-bee pro answered 6 years ago


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

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 6 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 commented 6 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)


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 jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags