Using your Own CSS with FM-DITA

I have been using my own CSS to format my DITA help topics for a while now. However, it was never a very "clean" solution because I was just manually copying my CSS into the html output folder, where it sat alongside the default CSS files common.css, commonltr.css and commonrtl.css. My developers have rightly been bugging me to clean up my act.

Here's my solution:

1. Copy the CSS file into the resource folder of the DITA open toolkit.
   


2. Edit the ditafm-ant.xml file in the open toolkit root folder.


3. Scroll down until you find the HTML target section (<target name="html" ...>).


4. Add the following lines to the bottom of the section, just before the </antcall> line:
   

       <param name="args.css" value="${dita.dir}${file.separator}resource${file.separator}myCSS.css""/>
       <param name="args.csspath" value="."/>
       <param name="args.copycss" value="yes"/>
   

   These parameters are:
   
   
   
   • args.css. The location of the custom CSS file.
   • args.csspath. The path to copy it to, relative to the folder containing generated HTML files
   • args.copycss. Whether to copy the file to the output folder.
   
   
5. Optionally, delete any other CSS files that you don't need from the resource folder.


6. Regenerate your files as usual within FrameMaker and you should find your CSS file in the output folder.