Styling Story Element Types

The style element lets you style the story element types of native CUE 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 story elements in CUE. To set the font size of a heading story element type, for example, you could enter:

<story-element-type
  name="headline"
  xmlns="http://xmlns.escenic.com/2008/content-type"
  xmlns:ui="http://xmlns.escenic.com/2008/interface-hints">
  ...
  <ui:style>
    .story-element-headline [contenteditable='true'] {
      font-size: 2.3em;
    }
  </ui:style>
</story-element-type>

You can use the following CSS class names to select different parts of the HTML generated for a story element:

.story-element-name

where name is the name of the story element type. This selects the whole story element.

.fields

This selects all story element fields, so

.story-element-pull_quote .fields

will select all the fields in a pull_quote story element.

.field-name

where field-name is the name of a field in a story element. This selects the specific field, so:

.story-element-pull_quote .fields .quote

or

.story-element-pull_quote .quote

will select the quote field in a pull_quote story element.

You can also use the [contenteditable='true'] predicate to select only the editable content in a field.

For a simple story element type, the hints given above may be enough to enable you to style elements as required, but for more complicated cases, the best method is probably to wait with styling until you have a working publication, and then use the following method:

1. Open the publication in CUE, using the Chrome browser.

2. Create a story content item, selecting a storyline that includes this story element type.

3. Insert a story element of this type.

4. Start the Chrome developer tools and display the Elements pane.

5. Locate the HTML code representing the story element.

6. Use the Chrome style editing functionality to get the appearance you want.

7. Copy the CSS you created back to a ui:style element in the story element type resource.

8. Upload the modified story element type resource to the server in the usual way (see Manage Shared Resources)

9. Restart CUE and check the results.