When you have multiple authors contributing to a site, it can be a challenge to ensure that the resulting site has a consistent look and feel across all your content. Fortunately, HTML was designed with exactly that problem in mind, allowing you to separate the content from the presentation using CSS. EditLive! automatically detects the CSS styles in your documents which allows your authors to not only see the document as it will be displayed, but also to apply any predefined styles you have created.

Like anything though, with a little bit of effort you can make it dramatically easier for your authors to use your styles like you intended without needing a lot of training. Here's the overall plan:

1. Disable functionality that you don't want your authors to use.
2. Hide CSS styles that your authors don't need.
3. Design your CSS to work with semantic HTML.

Disabling Functionality

If you want your authors to use CSS for formatting, take away the other formatting options so they can't be used. So if you don't want your authors to apply their own fonts to content, remove the font menu. In EditLive! this is as simple as removing the toolbar buttons and menu items from the configuration file. You don't have to remove all the options, for instance you may want your authors to be able to emphasis content by making it bold so leave the bold function enabled. In most cases, I'd recommend disabling:

• font face
• font size
• text color
• highlight color
• underline (underlined text is often confused for a hyperlink)
• alignment

The CSS can still take advantage of all those formatting options, but users will only be using the predefined CSS styles which ensures the look of the site is consistent.

Hiding CSS Styles

Often a site layout has a range of styles that are only used for navigation components around the content like search boxes, menus and side bars. Authors don't need to apply these so they will only clutter up the styles menu and make it harder for authors to find what they need. To avoid this, either use two CSS files - one for the styles that are relevant to the actual content and one for the surrounding navigation. Include both stylesheets via link tags in your HTML pages, but only include the stylesheet that's relevant to the content in EditLive!'s configuration file.

Alternatively, you can specify that a CSS style shouldn't be displayed in EditLive! by adding the property: ephox-visible: false to the declaration. For example:

.myCSSClass {  display: inline;  color: blue;  ephox-visible: false;}

Designing CSS To Use Semantic HTML

To really make it easy for your authors to select the right CSS style, you should design your styles to be based around semantic attributes of the content rather than style. For example, if you wanted news headlines to appear as blue you could define the CSS style:

.blueText {  color: blue;}

This would appear in EditLive!'s styles menu as "blueText" and it could be applied to paragraphs or inline text. Instead, name the style "newsHeadline" to make what it is for obvious. Additionally, since newsHeadlines are always headings, specify the tag type to use. Specifying the tag type not only simplifies the style menu, it ensures that the style is applied to the right tag, making the site more consistent.

h2.newsHeading {  color: blue;}

If you want a style to only be used inline (to the selected text, not to paragraphs), specify the span tag:

span.reference {  font-style: italic;}

You can also use styles for tables, table rows and cells, lists and list items or pretty much any other HTML element. The more specific your CSS styles are, the more likely your authors will use them at the right time and the better your site will look.

This entry is filed under Hints & Tips, Styles, User Experience. You can follow any responses to this entry through the Atom feed. You can leave a response, or trackback from your own site.