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.
macro
buttons and
style-class
buttons appear in the style bar
in the same order as they appear in the
interface-hints
resource.
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 astyle
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.