zesty.io

Product

Use Cases

Integrations

Learn

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.

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.

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.

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.

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

Start Here

We will listen to your needs and walk you through how Zesty can help your team.

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

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo