Instance Styles
Access and edit style variables through the Settings section using a non-technical interface to update colors, fonts, and other design elements.
Overview
#What are style variables?
#Each of the Styles have an associated variable. That variable is denoted by the @
followed by its name, for example: @body-bg
. Each of these variables is defined in the instance's style sheet.
![Styles and style variable names.](https://kfg6bckb.media.zestyio.com/IzXjBpFwZD.png)
Editing your variables
#Styles offer a variety of options from font style to colors. The left-hand sidebar shows all the available categories (outlined in purple below).
![Styles categories outlined in the left-hand sidebar.](https://kfg6bckb.media.zestyio.com/k5ARHqdI0s.png)
Once a category is selected from the left-hand navigation the main portion of the screen to the right will show the editable fields for you (outlined in purple below) to start customizing the variables.
![The editable fields of a category in the main portion of the screen.](https://kfg6bckb.media.zestyio.com/wTVa9zLo6J.png)
The available style variables will depend on your selected Blueprint. Once you're finished editing your styles be sure to save them so your changes populate.
In order for the style variables to work they must be added to your style sheet before you edit them.
![Example of style variables in a style sheet.](https://kfg6bckb.media.zestyio.com/WuWHk8KGav.png)
Accessing your variables in the Editor
#In the Editor section, you can add your style variables to a LESS/SCSS file in the under Style Sheets section. All variable names are listed in the Styles subsection. Add those variable names to your style sheet, for example: background-color: @body-bg;
.
Connect with Content Experts
Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.
Trusted By
G2 MOMENTUM LEADER
![zesty customer logo](https://kfg6bckb.media.zestyio.com/WebContentManagement_EasiestToDoBusinessWith_EaseOfDoingBusinessWith.png)
![zesty customer logo](https://kfg6bckb.media.zestyio.com/WebContentManagement_HighPerformer_HighPerformer.png)