Customizing

Published at 2021-03-02 18:13:26 Updated on pzplUI 2.3

Customizing the framework

pzplUI gives you full control over how the framework looks. To get started, make sure you know about CSS Variables Here's a list of avalible variables to customize:

• --bg-color - The background color of the website
• --bg-text - The text color of the website
• --button-text - The default text color of the buttons
• --box-shadow-1 - Box shadow - present for example on buttons
• --box-shadow-2 - Hovered version of the previous box shadow
• --black - The default black color
• --black-hover - The default black hovered color
• --black-light - The default black color on alerts
• --black-alert-a - The default black color on links on alerts
• --white - The default white color
• Note: next colors are very simillar to the previous, so there will be no description
• --blue-light
• --blue
• --blue-hover
• --blue-alert-text
• --blue-alert-a
• --green-light
• --green
• --green-hover
• --green-alert-text
• --green-alerta-a
• --red-light
• --red
• --red-hover
• --red-alert-text
• --red-alert-a
• --orange-light
• --orange
• --orange-hover
• --orange-alert-text
• --orange-alert-a
• --info-blue-light
• --info-blue
• --info-blue-hover
• --info-blue-alert-text
• --info-blue-alert-a
• --secondary
• --secondary-hover
• --text-muted
• --card-border-color
• --card-header-bgcolor
• --modal-footer
• --mark-color
• --form1
• --form2
• --form-shadow
• --jumbotron-bg
• --link-color
• --progress-bg
• --dark-bg-color
• --dark-bg-text
• --dark-box-shadow-1
• --dark-box-shadow-2
• --dark-mark-color
• --dark-form1
• --dark-form2
• --dark-form-shadow
• --dark-jumbotron-bg
• --animation-speed - Sets the animation speed
• --animation-transform - Sets the animation transforms
• --mp-spacing - Sets the animation transforms
• --code-font-stack - Sets the fonts for code tags
• --font-stack - Sets the global fonts