Edit online

Customizing the Document Editing Environment Using CSS

Oxygen XML Web Author allows you to edit XML documents with a visual presentation mode. The document rendering is controlled by CSS stylesheets. You can control how the XML elements are visually presented, from basic aspects such as fonts, colors, and layout (tables, lists, etc.) to more advanced aspects such as the in-place XML attribute editor, placeholders for empty elements, or controlling which elements can be folded.

Oxygen XML Editor/Author has a useful CSS inspector similar to those found in most modern browsers. It can be used to quickly modify the CSS used to render your XML documents.

After making changes to the CSS, you can test the results by using the Web Author Test Server add-on. Once you are happy with the changes, you need to use the CSS tab in the Document Type Association dialog box to associate the CSS with your framework.

Example: Configuring Foldable Elements

The Oxygen XML Web Author visual editor supports some CSS properties that allows you to configure whether or not the content of an element can be expanded or collapsed. This is especially useful when working with large documents. In the editor, foldable elements can be expanded or collapsed by clicking the small arrow that is displayed before such elements. The following folding-related properties are supported:

-oxy-foldable
This property defines whether or not the content for an element can be folded (expanded/collapsed) by the user. To define that an element's content can be folded, use -oxy-foldable:true.
-oxy-folded
This property is used in conjunction with the -oxy-foldable property and it defines the elements that are folded by default. To define an element to be folded by default, use -oxy-folded:true.
Note:
Since the -oxy-folded property works in conjunction with the -oxy-foldable property, the -oxy-folded property is ignored if the -oxy-foldable property is not set on the same element.
-oxy-not-foldable-child
When collapsing an element, sometimes it is useful to keep some of its content visible (for example, a short description of the collapsed region). This property is used to identify the child element that is kept visible in this situation. For its value, it accepts an element name or a list of comma-separated element names. The first occurrence of each child element specified in the list of element names will be identified as the not-foldable child and displayed. If the element is marked as foldable (-oxy-foldable:true) but it does not have the -oxy-not-foldable-child property (or none of the specified non-foldable children exist), then the element is still foldable. In this case, the element kept visible when folded will be the before pseudo-element.

For more details, see Oxygen XML Editor: Folding Elements: -oxy-foldable / -oxy-folded / -oxy-not-foldable-child.

Example: Customizing the Editing Environment for DITA Documents

There are various ways to customize the editing environment to make certain actions or tasks easier to access. For example, a particular built-in CSS can be used to display a widget () near empty paragraphs to make it easy for DITA authors to insert common elements (for example, to insert lists, notes, or tables).

There are two ways to enable this widget ():
  • Each user can enable the widget manually. The More drop-down menu in the top toolbar includes a Choose styles action that opens a dialog box where you can select one main CSS style and multiple additional styles to change the look of the document. Each user can select the Inline insertion actions style to enable the action insertion widget (). For more details, see Changing the Look of Documents Using the Styles Menu.
  • The widget can be enabled globally for all users in a custom framework configuration. In the CSS tab in the Document Type configuration dialog box (in a standalone version of Oxygen XML Editor/Author), find the ${framework}/css/webauthor/inline-insertion-actions.css entry in the table and change the Alternate column for that CSS file to no and remove the value from the Title column.
Tip:
You can also control the behavior of the Enter key to make it easier for users to insert a new paragraph.

Example: Customizing the Background for the Note Element in DITA

Suppose you want to configure Web Author to render the default DITA <note> elements with a yellow background while rendering those with the @type attribute set to danger with s light red background. You could do this by following these steps:
  1. In Oxygen XML Editor/Author, create a new DITA topic and insert two <note> elements (one without setting the @type attribute and the other setting the type attribute to danger.
  2. Right-click on the first <note> element and choose Inspect Styles.
  3. In the CSS Inspector view, you can see all the rules currently applied for notes. Click the link associated with one of them to take you to the source CSS file.
  4. Add the following code in the CSS file:
    [class*="topic/note"] {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
[class*="topic/note"][type="danger"] {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
  5. Switch to the XML document and see that the colors have changed.
  6. Once you are happy with the changes, you need to use the CSS tab in the Document Type configuration dialog box to associate the CSS with your framework.
  7. You can check to see how notes look in Web Author by using the Web Author Test Server add-on.