How do I associate custom css file with my generated HTML?

[annje...@gmail.com]

Hi,

I have followed steps in https://www.dita-ot.org/dev/topics/html-customization-plugin-bundle-css

and can see my custom css file copied to out folder. However, the generated HTML which has the associated class files does not pick up on the styles defined in the custom css file.

If I copy the styles from the CSS file directly into the HTML file within <style> element then the styles are applied fine.

Is there an automatic association between the HTML and CSS files or am I missing a step?

Any advice appreciated,

Regards,

Ann

[Chris Papademetrious]

Hi Ann,

I followed the steps and it worked for me. Did you remember to run the html5-custom-css transformation instead of the regular html5 transformation?

Note that a DITA-OT plugin is not required to specify your own CSS; you can still do it with discrete transformation parameters. The purpose of the DITA-OT plugin is to make it easier to share a completed or centrally-administered transformation with others.

 - Chris

[Chris Papademetrious]

Hi Ann,

I downloaded and installed a plain DITA-OT 4.2.2 installation, then ran the following command:

./dita-ot-4.2.2/bin/dita \
  -i dita-ot-4.2.2/docsrc/userguide.ditamap \
  -f html5 \
  -Dargs.css=dita-ot-doc.css \
  -Dargs.cssroot=`realpath dita-ot-4.2.2/doc/css` \
  -Dargs.copycss=yes

and the output used the CSS as expected. Be sure to use args.cssroot to specify the absolute path to the directory that contains the CSS file. I'm using Linux, so I used realpath to resolve a relative path to an absolute path.

 - Chris