A creative agency that crafts innovative ideas into digital products

Experience mixed with passion is route our work

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

What are styles?

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

How to 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.

How to use the customizer

To use the Customizer,

  1. Login to the site’s administrator backend, go to Extensions > Template Manager.

  2. Click the template to edit, then click on Options tab.

  3. On the Settings vertical tab click on the Customizer button > the live customizer will appear with the options on the left and the site on the right.

  4. To see more advanced options, check the Advanced Mode checkbox > you will see more options appearing. On some of the headings, you’ll notice a ‘more’ link that lets you expand the options further.

  5. Once you are done, click on save.

  6. If you messed up the settings and you’d like to revert to the original, you can click on reset.

Tags: