Complete list and explanation of all variables in _custom-sk


Topic: Complete list and explanation of all variables in _custom-skin.scss

ggiani pro asked 3 years ago

Hi! Is there a complete list of skin variables with explenation? For example, in _custom-skin.css there is a color-variable 'skin-navbar'. I guess, it's the background-color of the navbar. But how can I define the link-color of the navbar, or the hover-color? Same with 'skin-btn-default'. It's the background-color, but how can I set the text-color? Edit: And what about danger buttons or warning button and all the other elements? what are these color variables? Thx so far!

Marta Szymanska staff pro premium answered 3 years ago

Hi, for creating a skin, we use a loop with a specific code inside it, you can see this loop in that file:
scss/pro/_skins.scss
and for now, in your custom skin, you can change these variables: "skin-primary-color": #fff, - primary color ofpagination, spinners and any other component with this class "skin-navbar": #fff, - color of navbar "skin-footer-color": #fff, - color of footer "skin-accent": #fff, - color of input border, label, dropdown contetn, carousel indicators, social icons on hover in the side nav "skin-flat": #fff, - color of side nav "skin-sidenav-item": #fff, - color of collapsible item in side nav "skin-sidenav-item-hover": #fff, - color of collapsible item in side nav on hover "skin-gradient-start": #fff, - start color of gradient for side nav "skin-gradient-end": #fff, - end color of gradient for side nav "skin-mask-slight": #fff, - slight color of mask for side nav "skin-mask-light": #fff, - light color of mask for side nav "skin-mask-strong": #fff, - strong color of mask for side nav "skin-sn-child": #fff, - colot for link on hover in side nav "skin-btn-primary": #fff, - primary color of normal and outline button "skin-btn-secondary": #fff, - secondary color of normal and outline button "skin-btn-default": #fff, - default color of normal and outline button "skin-text": #fff - color of link of dropdown in navbar, link in navbar, input, social icons in side nav, search form in side nav, text of collapsible header in side nav, link in collapsible body And for now we don't add custom skin styles to the other components. But we're preparing tutorial of adding custom skin, so in further lessons of this tutorial, we will show how to add custom code to the loop, so stay tuned. Best, Marta
Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No