With the improved styles support in EditLive! 6.4 (grab the latest build from early access), and a little CSS, it's easy for users to make their content look great and better engage users. Let's look at a fairly simple example where users can add a set of links to related resources in their document. Currently, users would simply add a plain bullet list which is pretty ugly. For example:

See Also

• LiveWorks! Styles Category
• Driving Consistency With CSS

That does the job, but with the improvements in EditLive! 6.4 and some fairly simple CSS we can make it look much more compelling. The first step is to group the heading and the list together in a group. EditLive! 6.4 provides a simple way to do that - just select them both and choose "Create Section" (the default configuration includes it in the Format menu). In terms of the HTML, this wraps a DIV element around the heading and the list which gives us some extra structure to work with but doesn't change the actual rendering.

That extra structure gives us a great place to add styles to control the see also panel from one place. The goal is that the user can simply select one item from the styles drop down and all of our formatting is applied. Let's start by adding some simple styles to the DIV itself:

div.SeeAlso {
    border: 1px solid #D4D4D4;
    width: 20em;
    margin: 0px 10px 0px 10px;
    float: right;
}

Those styles add a simple gray border, set the width of the DIV to 20em (ems are a relative sizing that's newly supported in 6.4 and is much better for accessibility than using px) and floats the DIV to the right so content can wrap around it. The result is on the right, titled "See Also (2)".

Now we want to make the heading and the list itself look better, but we don't want to make the user apply styles to them separately. Fortunately, CSS provides a descendant selector which fits this use case perfectly. We add the styles below which will automatically apply to the content inside the DIV:

div.SeeAlso h4 {
    margin: 0px;
    padding: 5px;
    font-size: 1em;
    background-image: url(largeTitleBar.png);
    color: #FFFFFF;
    background-color: #5E657B;
    background-repeat: repeat-x;
    background-position: center;
    background-attachment: scroll;
}

div.SeeAlso ul {
    margin: 0px;
    padding: 2px 5px 2px 35px;
    list-style-image: url(bluearrow.png);
}

div.SeeAlso li {
    margin: 0px;
    padding: 3px;
}

div.SeeAlso a {
    font-weight: bold;
    text-decoration: none;
    color: #2B3D72;
}

div.SeeAlso a:hover {
    text-decoration: none;
    text-decoration: underline;
    color: #8599D3;
}

While there's a fair bit of CSS there, it's all standard techniques that web designers are quite used to using for styling content. It also uses a couple of background images to provide nice gradients so that the final result looks like the image on the right. Here's the important elements that make it work well with the editor. Keep these in minds when you develop style sheets for your site:

• Make it easy for users to apply by using a single class on the div element and then apply styles via descendant selectors whenever possible.
• The class name you use will appear in the styles drop down, so make it self explanatory to help users know when to apply it.
• The styles combo is context sensitive so it will show an accurate preview of how the style will look in the current context. So with the stylesheet above, the "Heading 4" entry would appear differently in the styles drop down if the current selection is within a "SeeAlso" div because the descendant style applies. Elsewhere, the default rendering of h4 elements would apply. This lets your users know what things will look like without having to try out each style. You could use this to provide different types of rendering for the header based on different heading levels and the user can pick the most appropriate one.

This entry is filed under EditLive!, 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.