Customizer

Learn all about managing theme styles and how to add your own.

The Warp customizer simplifies your workflow and allows you to add new styles with no need for any CSS knowledge. It is divided into two sections. The left hand vertical bar indicates the settings for the theme and on the right you can see your selected theme. All modifications within the customizer will instantly be displayed in the preview on the right side.

Note To optimize performance, we recommend disabling add-ons, like Firebug in Firefox.


Styles

A style is a set of Less variables, which define your customization.

Create a New Style

  1. Select a style within the customizer.
  2. Hit Copy and enter a new name to duplicate the style.
  3. Now you can start customizing your own style.
  4. Once you are satisfied with your adjustments, hit Save and the customizer saves your style Less files into the /styles/STYLE-NAME/style.less folder and compiles the CSS files into /styles/STYLE-NAME/css folder.

Note To undo your modifications within a theme style, hit reset to reverse the changes to the default theme values.


Usage

By default, the customizer shows only a selected number of variables. These variables are the most used in the theme. There are different customizer modes to determine, to what detail you want to customize your theme.

Mode Description
Advanced mode Activating the advanced mode extends the default variables with additional developer variables, which are rarely adjusted.
More In Advanced mode you can see a (More) button next to groups which displays all variables. The @ symbol indicates variables that are defined through other variables.
Warp Themes Documentation