Styling Rich Text Fields

The style element lets you style the rich text fields in Escenic legacy stories using CSS. You can put any standard CSS in the body of the element, giving you detailed control over the appearance and layout of rich text field content in CUE. To set the color of h1 and h2 headings in a field, for example, you could specify:

<field mime-type="application/xhtml+xml" type="basic" name="body">
  <ui:style>
    h1 {color:red}
    h2 {color:green}
  </ui:style>
</field>

You can also use this element to style in-line relations so that CUE users can easily distinguish between relations to different content types. To do this, you must create CSS classes with names of the form:

escenic-content-type-name

To make in-line links to news content items green and in-line links to blog content items red, for example, you could specify:

<field mime-type="application/xhtml+xml" type="basic" name="body">
  <ui:style>
    .escenic-news { color: green;}
    .escenic-blog {color: red;}
  </ui:style>
</field> 

The style element can only be used with basic fields where mime-type is set to application/xhtml+xml. It has no effect if used with any other elements.

For hints and examples about more advanced uses of the style element, see style.