CSS changes
Changing the DITA OT CSS files used by the output XHTML takes very little time and can produce some of the most visible results.
The fastest way to make changes (hacking) is to make direct modifications to the CSS files that are a part of the DITA OT. There are two files, both in ditaot/resource. The file commonltr.css describes formatting for left-to-right languages (most Western languages, including English and European languages). The file commonrtl.css provides the same information for right-to-left languages. The rest of this discussion assumes you’re using a Western language and modifying commonltr.css.
Any change you make to commonltr.css will affect all HTML deliverables generated by that modified DITA OT. That might be good (you want the same effect to appear in all docs processed by this copy of the DITA OT) or bad (not all docs that use this copy of the DITA OT requires this behavior). For example, if you changed
.dangertitle { font-weight: bold }
to
.dangertitle { font-weight: bold; color: #FF0000;}
all occurrences of the word “Danger” in a danger admonition, for all documents processed by that OT, will be colored red.
Adding your own CSS files
The more elegant way to modify the CSS is to create your own CSS file that overrides the CSS in the common CSS files. To specify your own CSS file, modify the Ant file that builds your deliverable (my_xhtml.xml). Add three new properties at the location indicated by the ➌ in the example on page 4.
<property name="args.css" value="${dita.dir}${file.separator}css${file.separator}garage.css"/>
<property name="args.csspath" value="CSS"/>
<property name="args.copycss" value="yes"/>
The args.css property specifies the source location of the new CSS file. In this case, it is in the folder named ditaot/css. The ${file.separator} is a default property defined by Ant. It represents an OS-dependent file separator character, which is a forward slash for UNIX (/) and a backslash for Windows (\).
The args.csspath property indicates a relative path in the output location to the folder that will contain the CSS file. In this example, the CSS files will reside in a folder named CSS, which is a child of the folder containing the output HTML files. In our example, the CSS file will be copied to ditaot/ant/out/samples/xhtml/CSS.
The args.copycss property tells the DITA OT to copy the CSS file to the path specified in the args.csspath argument (there may be times when you don’t want the file to be copied). This property is required if you want the CSS file to be copied.
Note that these Ant properties limit you to a single additional CSS file. If you need to reference multiple CSS files, use these properties to copy a “master” CSS file. Then in the master CSS file, you can use one or more CSS @import directives to include other CSS files:
@import url("group-styles.css");
@import url("company-styles.css");
The outputclass hack
Under normal circumstances, the DITA OT XHTML transformation outputs HTML tags, -adding class attributes as the transformation dictates. If you know that your files will be used to generate HTML output, there’s a further hack you can use along with modifying or specifying the CSS file.
DITA defines an attribute named outputclass that can be used with any DITA element. When the DITA OT processes a DITA element with the outputclass attribute, it automatically adds a class attribute to the corresponding output HTML tag, using the value of the outputclass attribute. Therefore, if you wrote:
<ul outputclass="square_b">...
The DITA output would contain:
<ul class="square_b">...
To complete this hack, modify a CSS file to support the new class. For example, you might add the following line to a CSS file so that any <ul> element with output‑class="square_b" is styled with square bullets:
.square_b { list-style-type: square; }
This is particularly useful (as a hack) because it enables you to control the appearance of your output directly from a DITA attribute. A <ul> element without this outputclass attribute is rendered normally.
Again, the outputclass attribute only works with HTML. Note also that there is no value checking: if you or another content creator types the name of the attribute incorrectly, no error messages are generated in the DITA OT. A more elegant alternative, which would allow the DITA OT to check your input, would be to create a simple specialization that implemented a new square-bulleted <ul> element, -perhaps <ul-square>. You could also create a specialization that adds a new bullet-type attribute to the <ul> element.
Next Page:
HTML headers and footers