style-class

Defines a style button to be added to the Content Studio style bar of the rich text field defined by this element's parent field element. This element only has any effect if specified as the child of a rich text field (a basic field where mime-type is set to application/xhtml+xml).

Inserting this element as the child of a rich text field element causes an additional button to be displayed in the field's Content Studio style bar. The icon sub-element defines the appearance of the button, and the description sub-element determines the button's tool-tip text.

Selecting text and clicking on the button displayed in Content Studio wraps the selected text in an XHTML span element with a class attribute set to name.

You can use one of the group or drop-down attributes to group style-class elements into mutually exclusive sets: this makes it impossible to apply more than one of the grouped styles to the same text selection. If you use the group attribute, then the styles are displayed as a set of mutually exclusive buttons. If you use the drop-down attribute, then they are presented in a drop-down menu.

Syntax

<style-class
    name="text"
    ( group="text" | drop-down="text" )?
  >
  <icon>...</icon>
  
  <description>...</description>
</style-class>

Examples

• This example creates a style button for marking text green, using an icon stored on the server.

  <field mime-type="application/xhtml+xml" type="basic" name="body">
    <ui:style> 
        span.green { 
        color: green; 
        } 
    </ui:style>
    <ui:style-class name="green">
      <ui:icon>http://my.server/myicon.png</ui:icon>
      <ui:description>Mark text green</ui:description>
    </ui:style-class>
  </field>

• This example creates a set of three mutually exclusive style buttons. Button icons will be generated from the specified arrow characters.

  <field mime-type="application/xhtml+xml" type="basic" name="body">
    <ui:style>
        h2 { font-weight: normal; text-decoration: underline; }
        span.important { color: red; }
        span.semi-important { color: #ffcc00; }
        span.not-so-important { color: green; }
    </ui:style>
    <ui:style-class name="important" group="importance">
      <ui:icon>↑</ui:icon>
    </ui:style-class>
    <ui:style-class name="semi-important" group="importance">
      <ui:icon>~</ui:icon>
    </ui:style-class>
    <ui:style-class name="not-so-important" group="importance">
      <ui:icon>↓</ui:icon>
    </ui:style-class>
  </field>

• This example creates a drop-down menu containing three options. Icons will be generated from the specified arrow characters and displayed alongside the option labels in the drop-down menu.

  <field mime-type="application/xhtml+xml" type="basic" name="body">
    <ui:style>
        h2 { font-weight: normal; text-decoration: underline; }
        span.important { color: red; }
        span.semi-important { color: #ffcc00; }
        span.not-so-important { color: green; }
    </ui:style>
    <ui:style-class name="important" drop-down="importance">
      <ui:icon>↑</ui:icon>
    </ui:style-class>
    <ui:style-class name="semi-important" drop-down="importance">
      <ui:icon>~</ui:icon>
    </ui:style-class>
    <ui:style-class name="not-so-important" drop-down="importance">
      <ui:icon>↓</ui:icon>
    </ui:style-class>
  </field>

Attributes

name="text"

The name of the CSS class to be associated with the style button. For the button to have any visible effect in Content Studio, the parent field element must also have a style child element where this CSS class is defined.

group="text" (optional)

The name of a group of mutually-exclusive style-class elements to which this element belongs. All style buttons belonging to the same group will behave so that only one of the grouped styles can be applied to the same text selection.

drop-down="text" (optional)

The name of a group of mutually-exclusive style-class elements to which this element belongs. The group is displayed in the Content Studio style bar as a drop-down menu: selecting an entry from the menu applies the corresponding style to the currently selected text.