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 Content Studio. 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 and font-weight

    Only use the font-size units pixel (px) or percentage (%)

    Only use the font-weight values normal and bold

The style field is not used by any application other than Content Studio, 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 HTML body 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 or a elements, so in order to make them easy to target with CSS, they are also assigned class attributes. These class attributes are formed by appending the content type name with escenic- So this example will style related items with the content-type video.

    <ui:style>
        a.escenic-video:before {
          content: "VIDEO: [";
        }
        a.escenic-video:after {
          content: "]";
        }
        </ui:style>