Tutorial to create custom skin

Topic: Tutorial to create custom skin

kmueller222 pro asked 6 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

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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 5 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 5 years ago

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

Add comment

elastic-bee pro answered 5 years ago

0 0 Best answer

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

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

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:
<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
  ),</code>

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 ;)

Please insert min. 20 characters.

  "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 5 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 5 years ago

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

Unicomp pro commented 5 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)

Add comment

Write

Create snippet

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

kmueller222

Pro User 0Support score
1Questions 0Answers 0Snippets