The Design Editor: A Closer Look

Today, I want to take a closer look at the new LightCMS Design Editor, which we began rolling out last week. The Design Editor offers the opportunity to make changes to the design of a LightCMS website without editing any code. The Design Editor works out of the box with all of LightCMS's built-in designs. In addition, designers who create custom designs for LightCMS can choose to enable the Design Editor to work with part or all of their designs.

In this post, we're going to take a closer look at how the Design Editor works and how you can enable your own designs to work with it, if you so choose.

One of LightCMS's built-in designs loaded inside the new Design Editor. Click the image to view full size.

Accessing the Design Editor

Currently, account owners can access the Design Editor in the same way they have previously accessed our code-based editor. First, select "Design" on the top toolbar and then select the "My Designs" tab. This will show you a list of all the designs enabled on your current website. Select a design and then select the "edit" button. This will load up the new Design Editor.

Once the Design Editor loads, you may get a message indicating that your design isn't set up to work with the Design Editor. This is because all designs must be specifically enabled to work with the Design Editor. We have enabled all of the designs in our built-in design gallery. To grab one of our built-in designs, select the "Design Gallery" tab, choose a design and either apply it to your website or add it to "My Designs" (note: if you already have a design by the same name in "My Designs" the system will overwrite it with the design from the gallery).

Once you have an enabled design set up in "My Designs," you should be able to access the editor's controls.

Templates and Panels

Once the Design Editor is up and running, take a look at the very top left. You'll see the name of your design and just below it, you'll see the name of the currently-selected template. Selecting the template name will open a drop-down list of all the templates that can be edited within your current design.

Just below the template name, you'll see the name of the currently-selected panel. This will say something like "Base Styles," "Wrapper Styles," "Header Styles" ... etc. Selecting this will open a drop down of all the available panels for the currently-selected template (see image to the right). A panel is basically a set of controls that are assigned to a particular area of your template. For example, the "Nav Styles" panel presents a set of controls that adjust the design of the site's navigation. Each template may present a different list of available panels. This is because the designer of the template can determine what areas of the site are able to be controlled by the Design Editor.

Global vs. Template-Specific Panels

The Base Styles panel and the Nav Styles panel will make global changes to your design. Edits made on these two panels will be reflected across every template in your design. 

On the other hand, all other panels make template-specific changes. This means, for example, that you can adjust the sidebar or the header uniquely on each individual template in the design. Or, you can set them all the same. The choice is yours.

Behind the Scenes

The Design Editor implements its changes by creating a new CSS file called userstyles.css. This is an actual file that exists in your design files and it can be edited via the Advanced Editor (see below) or via FTP. However, each time new changes are saved by the Design Editor, the file is rewritten, so it is not advisable to make changes to the userstyles.css file directly as they can be easily lost.

The Advanced Editor

Our built-in code editor is still available by selecting the "Advanced Editor" button at the bottom of the Design Editor. The advanced editor functions exactly as it did before, allowing you to edit any of your HTML, CSS, JS and INC files directly inside the system. Of course, you can also still access these files by FTP.

Design Integration

One of the most powerful features of the Design Editor is the fact that it can be easily enabled to work with your own custom designs. The integration is simple, but done in a way to give the designer complete control over how his or her designs can be edited, if at all. You can enable editing on entire designs, specific templates, or even very specific areas of a page. Or, if you don't want to allow your designs to be edited, you don't have to.

Enabling the Design Editor on your designs is a simple process. We've recently published complete documentation on Design Integration which you can find here on our support site. If you need more information about creating custom designs for LightCMS in general, please see this section about Creating Designs.