Edit online

Handling CSS Imports

When a CSS document contains imports to other CSS documents, the references are also passed through the XML Catalog URI mappings to determine an indirect CSS referenced location.

Example: CSS Import

For example, if you can have a CSS import, such as:

@import "http://host/path/to/location/custom.css";

and then add your own XML Catalog file that maps the location to a custom CSS in the XML Catalog preferences page:

<uri name="http://host/path/to/location/custom.css" 
      uri="path/to/custom.css"/>

Adding a Custom Default CSS for Every XML Document

To add a custom CSS that is applied to every XML document, add a mapping in your XML Catalog file that looks like this:

<uri name="http://www.oxygenxml.com/extensions/author/css/userCustom.css"
      uri="path/to/custom.css"/>

This extra mapped CSS location will be parsed every time the application processes the CSS stylesheets used to render the opened XML document in the visual Author editing mode. This allows your custom CSS to be used without the need to modify all other CSS stylesheets contributed in the document type configuration.

Editor Variables in CSS Imports

You can use various editor variables in CSS imports. When editing an XML document with an associated CSS in Author mode, the editor variables will be expanded and resolved.

Example: Editor Variable in a CSS Import

For example, the following editor variable:

@import "${framework(DITA)}/custom.css";

is resolved in the DITA framework folder where the custom.css is placed. In the Document Type Association preferences page, you can see a list of document type. The name for your particular document type needs to be passed as a parameter to the framework() function.

Note: If you use editor variables like ${cfdu} (Current File Directory URL), it will be expanded to the URL of the current CSS document that contains the imports rather than the XML document that references the CSS.