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: 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.