style
Contains a CSS style definition that can be applied to this element's
parent field
element by application user
interfaces. It is mostly used to style the content of rich text fields
(basic
fields where
mime-type
is set to
application/xhtml+xml
) in CUE. You can
however also use it in a limited way to style the content of other
field containing text (plain-text basic fields, number fields, URI
fields and so on). If used with fields other than rich text fields,
then you must observe the following limitations on your CSS code:
-
Only use the CSS selector
body
Only use the CSS properties that are used are
font-size
andfont-weight
Only use the
font-size
units pixel (px
) or percentage (%
)Only use the
font-weight
valuesnormal
andbold
The style
field is not used by any application other than
CUE, and has no effect if specified as the child of other kinds of
element.
Syntax
<style> text </style>
Examples
This example increases the size and weight of the text in a title field.
<field mime-type="text/plain" type="basic" name="title"> <ui:style> body { font-size: 20px; font-weight: bold; } </ui:style> </field>
This example adds a nice CSS table format to a rich text field.
<field mime-type="application/xhtml+xml" type="basic" name="body"> <ui:label>Body</ui:label> <ui:layout rows="10" cols="40"/> <ui:style> body { font-size: 20px; font-family: Georgia, Times-Roman, serif; width: 100%; border-collapse: collapse; } table { font-family: Arial, Helvetica, sans-serif; } td { text-align: left; border: 1px solid #98bf21; } th { font-family: "Arial Black"; font-size: 24px; text-align: left; padding: 10px 10px 10px 10px; background-color: #A7C942; color: #ffffff; } tr:nth-child(even) td { color: #000000; background-color: #EAF2D3; } </ui:style> </field>
This example sets different colors for the HTML headings h1 and h2.
<ui:style> h1 {color:red;} h2 {color:green;} </ui:style>
This example sets default fonts and font size for the the whole field, and adds overrides for the HTML headings h1 to h4. Note that
body
here refers to the HTMLbody
element, not the name of the content item field being styled - it will work on any rich text field.Note that Content Studio will only actually use fonts that are either available in the operating system or supplied by Java.
<ui:style> body { font-family: "Monaco"; font-size: 16px; } h1, h2, h3, h4 { font-family: "Georgia", sans-serif; } </ui:style>
This example adds paragraph numbering to
p
elements.<ui:style> p { margin: 0; padding: 0; line-height: 1.6; max-width: 20cm; counter-increment: paragraph 1; } p+p { text-indent: 30px } p:before{ float: right; margin-right: -2.5em; content: "#" counter(paragraph); color: #444; font-size: 0.8em; } p+p:before{ margin-right: 0; } </ui:style>
This example prepends the text "VIDEO:" before video links and wraps the link in [] parentheses. Related elements are marked up in Content Studio as either
img
ora
elements, so in order to make them easy to target with CSS, they are also assignedclass
attributes. Theseclass
attributes are formed by appending the content type name withescenic-
So this example will style related items with the content-typevideo
.<ui:style> a.escenic-video:before { content: "VIDEO: ["; } a.escenic-video:after { content: "]"; } </ui:style>