Designing for the Inline Editor

Factors to consider when designing your theme to work with Live Editor’s inline editor.

Live Editor’s Inline Editor feature has been carefully designed to work alongside your own custom HTML, CSS, and JavaScript code with as little trouble as possible. However, both your design and the Inline Editor must ultimately share the same HTML document, so there are a few things to keep in mind while you’re coding up your theme.

HTML5 DOCTYPE

The Inline Editor expects to be added to a document with the HTML5 DOCTYPE.

Make sure that this is on the very first line of your layout templates: 

<!DOCTYPE html>

Responsive layout

While the Inline Editor may work OK with a non-responsive layout, we recommend coding your theme using responsive, mobile-first techniques.

One particularly crucial element to include in the document’s <head> section is the viewport setting, instructing the browser to play nice with scaling the layout on mobile devices: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Reserved words for class, id, and data attributes

As a rule of thumb, it’s best to avoid naming any of your class, id, and data attributes with the prefix le-. Live Editor namespaces all of its class, id, and data attributes with le- to avoid colliding with your theme’s custom names.

Here are some examples:

Not preferred 
      <header id="le-header" class="le-header" data-le-target="secondary">
        ...
      </header>
Preferred 
      <header id="header" class="header" data-target="secondary">
        ...
      </header>

We figure that this would only potentially be a problem for our French-speaking friends. Le sigh!

In all seriousness, you can use any other naming scheme that you wish and can safely use CSS to style your own classes, elements, ids, etc.

All of your JavaScript is blocked

Due to security reasons, we cannot execute any of your theme’s JavaScript in the Live Editor user interface.

This can be overcome by making sure that your site’s theme uses progressive enhancement. In short, your theme would best be coded to work well when the client has disabled JavaScript.

Using Ember.js in your theme may lead to unexpected results

Live Editor’s interfaces all use the wonderful Ember.js framework. Unfortunately, that means that any themes written using Ember.js may collide with the Inline Editor.

That said, it would probably also be wise to not use these class names in your HTML or CSS:

  • ember-application
  • ember-view

Need help?

If you followed all of the steps above and something doesn’t work quite right with your theme, contact us for support, and we’d be glad to help.

Next steps

Learn about the issues and best practices for changing content templates and the content that depends on them in the Managing Change guide.