Chapter III. Reference
Prev | 4. CSS Reference | Next

## 4. CSS Reference

### 4.1. Style Sheets Supported by edit-on Pro

edit-on Pro supports a subset of the CSS properties. Properties not listed here are preserved by the editor, but will not be rendered.

#### 4.1.1. Font properties

Font family

Syntax:

  `font-family:font1,font2,fontn;`

Possible values:

  Any font name.

Example:

      font-family:arial,verdana;

Font size

Syntax:

  `font-size:value;`

Possible values:

  `--pt | --pc | --px | --in | --cm | --mm`

  `xx-small | x-small | small | medium | large | x-large | xx-large`

Example:

      font-size:12px;

Font style

Syntax:

  `font-style:value;`

Possible values:

  `normal | italic`

Example:

      font-style:italic;

Font weight

Syntax:

  `font-weight:value;`

Possible values:

  `normal | bold`

Example:

      font-weight:bold;

#### 4.1.2. Color and background properties

Background

Syntax:

  `background: value;`

Possible values:

  `color | transparent`

  Determine a `color` value using one of the following syntaxes: `#0000ff, black, rgb(50%,60%,80%)`

Example:

      background:#0000ff;

Background attachment

Syntax:

  `background-attachment:value;`

Possible values:

  `fixed | scroll`

  Determine the scrolling behaviour of a background image.

Example:

      background-image:url(background.jpg);
      background-repeat:repeat-y;
      background-attachment:fixed;

Background color

Syntax:

  `background-color:value;`

Possible values:

  `color | transparent`

  Determine a `color` value using one of the following syntaxes: `#0000ff, black, rgb(50%,60%,80%)`

Example:

      background-color:#0000ff;

Background image

Syntax:

  `background-image:url(URI);`

Possible values:

  `url(URI)`

  Determine an absolute or relative URL value for the image file (GIF / JPG / JPEG / PNG) which should be display in the background.

Example:

      background-image:
      url(http://myserver.com/images/background.gif);

Background repeat

Syntax:

  `background-repeat:value;`

Possible values:

  `repeat | repeat-x | repeat-y | no-repeat`

  Determine the repetition of an image (set by background-image) in background.

Example:

      background-image:url(background.jpg);
      background-repeat:repeat-y;

Color

Syntax:

  `background:value;`

Possible values:

  `color`

  Determine a `color` value using one of the following syntaxes: `#0000ff, black, rgb(50%,60%,80%)`

Example:

      color:#0000ff;

#### 4.1.3. Text properties

Text alignment

Syntax:

  `text-align:value;`

Possible values:

  `left | right | center`

Example:

      text-align:center;

Text decoration

Syntax:

  `text-decoration:value;`

Possible values:

  `none | underline | line-through`

Example:

      text-decoration:line-through;

Vertical alignment

Syntax:

  `vertical-align:value;`

Possible values:

  `sub | super | baseline`

Example:

      vertical-align:sub;

#### 4.1.4. Box properties

Bottom margin

Syntax:

  `margin-bottom:value;`

Possible values:

  `--pt | --pc | --px | --in | --cm | --mm`

Example:

      margin-bottom:12pt;

### Note:

This style property will only be rendered for the body element.

Top margin

Syntax:

  `margin-top:value;`

Possible values:

  `--pt | --pc | --px | --in | --cm | --mm`

Example:

      margin-top:12pt;

### Note:

This style property will only be rendered for the body element.

Left margin

Syntax:

  `margin-left:value;`

Possible values:

  `--pt | --pc | --px | --in | --cm | --mm`

Example:

      margin-left:12pt;

Right margin

Syntax:

  `margin-right:value;`

Possible values:

  `--pt | --pc | --px | --in | --cm | --mm`

Example:

      margin-right:12pt;

#### 4.1.5. List properties

List style

Syntax:

  `list-style-type:value;`

Possible values:

  `disc | circle | square | decimal | lower-alpha | uppper-alpha`

Example:

      list-style-type: disc;

List style image

Syntax:

  `list-style-image: url(value);`

Example:

      ul { list-style-type:none; list-style-image:url(icon.gif); }

#### 4.1.6. Table properties

Table width

Syntax:

  `width:value;`

Possible values:

  `--px | --%`

Example:

      width:100%;

Border color

Syntax:

  `border-color:value;`

Possible values:

  `color`

  Determine a `color` value using one of the following syntaxes: `#0000ff, black, rgb(50%,60%,80%)`

Example:

      border-color:#0000ff;

Border width

Syntax:

  `border-width:value;`

Possible values:

  `--px`

Example:

      border-width:2px;

### 4.2. edit-on Pro CSS Extensions

Element action

Syntax:

  `ro-action:value;`

Possible values:

  Any action defined in the editor's configuration file.

Description:

  The action `value` will be available in the context menu for the elements this style applies to.

  ### Note:

  The action `value` will only be available for those elements if it is added to the context menu definition in the configuration file.

Example:

      p { ro-action: MYCUSTOMACTION; }
      body { ro-action: CUSTOMACTION1, CUSTOMACTION2; }

CDATA action

Syntax:

  `ro-cdata`

Description:

  The `ro-cdata` selector allows you to define style properties for CDATA sections.

Example:

      ro-cdata { ro-action:CDATAPROPERTIES; }

Processing instruction action

Syntax:

  `ro-pi`

Description:

  The `ro-pi` selector allows you to define style properties for processing instructions.

Example:

      ro-pi { ro-action:PIPROPERTIES; }

Comment action

Syntax:

  `ro-comment:value;`

Description:

  The `ro-comment` selector allows you to define style properties for comments.

Example:

      ro-comment { ro-action:COMMENTPROPERTIES; }

#### 4.2.1. Style Properties Controling the Behaviour of Custom Tags

Read-only content

Syntax:

  `ro-readonlycontent:value;`

Possible values:

  `true|false`

Description:

  The content of the elements this style is applied to will become read-only, i.e. it can not be edited or modified. The corresponding elements still can be deleted.

Example:

      ro-readonlycontent:true;

Read-only element

Syntax:

  `ro-readonlyelement:value;`

Possible values:

  `true|false`

Description:

  The elements this style is applied to will become read-only, i.e. they can not be edited or modified.

Example:

      ro-readonlyelement:true;

Content Limit

Syntax:

  `ro-contentlimit:value;`

Possible values:

  Any integer value.

Description:

  This element can only contain up to `value` characters. Entering more characters than specified by `value` in this element is not possible.

Example:

      ro-contentlimit:100;

Read-only element

Syntax:

  `ro-readonlyelement:value;`

Possible values:

  `true|false`

Description:

  The elements this style is applied to will become read-only, i.e. they can not be edited or modified.

Example:

      ro-readonlyelement:true;

Formatting Only

Syntax:

  `ro-formattingonly:value;`

Possible values:

  (true|false)

Description:

  The content of this element can not be modified as with `ro-readonlycontent` . The formatting of the element however can still be modified when this property is set.

  ### Note

  This property will not have an effect if `ro-readonlycontent` is set to true for the same element.

Example:

      mytag {
          ro-readonlycontent:false;
          ro-formattingonly:true;
      }

#### 4.2.2. Style Properties Affecting the Display of Elements

Always show element

Syntax:

  `ro-alwaysshowtags:value;`

Possible values:

  `true|false`

Description:

  The custom element this style is applied to is always displayed. Normally custom elements are only displayed while the "SHOWNALLCHAR" mode is active.

Example:

      ro-alwaysshowtags:true;

Start tag icon

Syntax:

  `ro-starttagicon:value;`

Possible values:

  URL pointing to the location of an icon file (possible formats: GIF, JPG and PNG). May be relative to the editor's codebase.

Description:

  The editor will use the icon indicated by `value` to display the opening tag of the elements this style is applied to.

  ### Note:

  The element is only displayed if the "SHOWNALLCHAR" mode is active or if the style `ro-alwaysshowtags` is applied to this element.

Example:

      ro-starttagicon:"icons/start.gif";

End tag icon

Syntax:

  `ro-endtagicon:value;`

Possible values:

  URL pointing to the location of an icon file (possible formats: GIF, JPG and PNG). May be relative to the editor's codebase.

Description:

  The editor will use the icon indicated by `value` to display the closing tag of the element this style is applied to.

  ### Note:

  The element is only displayed if the "SHOWNALLCHAR" mode is active or if the style `ro-alwaysshowtags` is applied to this element.

Example:

      ro-endtagicon:"icons/end.gif";

Maximum width of custom element representation

Syntax:

  `ro-maxiconwidth:value;`

Possible values:

  `--pt | --pc | --px | --in | --cm | --mm`

Description:

  The editor will use this value to determine the maximum width of the generated custom element representation this style is applied to.

  ### Note:

  The style is only taken into consideration if no custom icon is specified for the custom element using `ro-starttagicon` and `ro-endtagicon` .

Example:

      ro-maxiconwidth:100px;

Start tag label

Syntax:

  `ro-starttaglabel:value;`

Description:

  The editor will use the value indicated as label for the opening of the custom element this style is applied to. You can use the keyword attr to select an attribute the style applies to. The value of this attribute will then be used as label for the tag. You can freely combine attribute values and text strings in this way.

  ### Important:

  The style is only taken into consideration if no custom icon is specified for the custom element using `ro-starttagicon` and `ro-endtagicon` .

Example:

      ro-starttaglabel:"start label" attr(nameofanttribute);

End tag label

Syntax:

  `ro-endtaglabel:value;`

Description:

  The editor will use the value indicated as label for the closing of the custom element this style is applied to. You can use the keyword attr to select an attribute the style applies to. The value of this attribute will then be used as label for the tag. You can freely combine attribute values and text strings in this way.

  ### Important:

  The style is only taken into consideration if no custom icon is specified for the custom element using `ro-starttagicon` and `ro-endtagicon` .

Example:

      ro-endtaglabel:"end label: " attr(nameofanttribute);

#### 4.2.3. Style Properties Controling the Display of CSS Classes in Editor Dialogs

Hide Class

Syntax:

  `ro-hideclass:value;`

Possible values:

  `true|false`

Description:

  If this property is set to false, it is not possible to select or apply the CSS class it is defined for in any of the editor's dialogs.

Example:

      .redarea {
          ro-hideclass: true;
          color: red;
      }

Class Description

Syntax:

  `ro-classdescription:value;`

Description:

  The value of this property determines the name which will be used to display the class it is defined for in the editor's dialogs. For example, if it is set to "Red Text", then the string "Red Text" will be displayed in dialogs such as the style selector combo box instead of the class name itself.

Example:

      .redarea {
          ro-classdescription: "Red Text";
          color: red;
      }

#### 4.2.4. Style Properties Controling the Display in Comparison Mode

Balloon Width

Syntax:

  `ro-balloon-width:value;`

Description:

  The value of this property determines the width of the balloons that display changes in comparison mode.

Example:

      * {
          ro-balloon-width: 200px;
      }

Balloon Color

Syntax:

  `ro-balloon-color:value;`

Description:

  The value of this property determines the color of the balloons that display changes in comparison mode.

Example:

      * {
          ro-balloon-color: #0689cc;
      }

Selected Balloon Color

Syntax:

  `ro-balloonselected-width:value;`

Description:

  The value of this property determines the width of selected balloons in comparison mode.

Example:

      * {
          ro-balloonselected-width: #0689cc;
      }

Selected Balloon Color

Syntax:

  `ro-balloonselected-color:value;`

Description:

  The value of this property determines the color of selected balloons in comparison mode.

Example:

      * {
          ro-balloonselected-color: #0689cc;
      }

Prev | Up | Next
3. User Interface Configuration | Home | 5. Clean-up Class and Form Fields