Designing for the Inline Editor
Factors to consider when designing your theme to work with Live Editor’s inline editor.
The Inline Editor expects to be added to a document with the
Make sure that this is on the very first line of your layout templates:
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
section is the
viewport setting, instructing the browser to play nice with scaling the
layout on mobile devices:
Reserved words for
As a rule of thumb, it’s best to avoid naming any of your
data attributes with the prefix
le-. Live Editor namespaces all
data attributes with
to avoid colliding with your theme’s custom names.
Here are some examples:
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
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
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.
Learn about the issues and best practices for changing content templates and the content that depends on them in the Managing Change guide.