Customizing the Document Editing Experience Using CSS
Edit online

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

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 associate the CSS with your framework.

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