Customizing the Editing Experience 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 element 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 very 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.

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 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. You can check to see how notes look in Web Author by using the Web Author Test Server add-on.