Add class attribute to every ul element in XHTML TOC output

[eloralon]

Hello,

I have a request regarding how to:

1) Add a custom CSS to the XHTML transformation scenario, how to reference my custom CSS in the generated index.html file?

2) I also need to add a custom class to elements inside the output index.html containing the TOC. I would like to be able to add to the <ul> and <li> elements in the TOC custom classes that I can use to style the look/behavior of the links in the TOC.

Hopefully, this makes sense to you.

Thanks

[sorin_ristache]

Hello,

1) Add a custom CSS to the XHTML transformation scenario, how to reference my custom CSS in the generated index.html file?

Set the file path of the custom CSS in the parameter args.css of the XHTML transformation. I suggest setting also the args.copycss parameter to yes (by default it has the no value) for copying your custom CSS to the output directory of the transformation, otherwise you have to make sure that the file path set in the args.css parameter works in the XHTML output pages.

2) I also need to add a custom class to elements inside the output index.html containing the TOC. I would like to be able to add to the <ul> and <li> elements in the TOC custom classes that I can use to style the look/behavior of the links in the TOC.

Setting a custom class attribute to some DITA elements is usually done with a DITA specialization. If you just want to set a custom class value to the ul and li elements from TOC without creating a DITA specialization you have to add the class attribute to all the ul and li elements that are created in all the XSLT templates with the attribute mode="toc" in the [Oxygen-install-dir]/frameworks/dita/DITA-OT/xsl/map2htmtoc/map2htmlImpl.xsl stylesheet.

Altrernatively you could also style the ul and li elements in the TOC with your custom CSS that you set above in the transformation. For example in the Oxygen Webhelp transformation you can match in your CSS the ul and li elements that are descendants of div#tree:

Code: Select all

div#tree ul {

 ... 

}



div#tree li {

 ... 

}

In the XHTML transformation you can match the TOC ul and li elements with the following CSS code because other ul elements (that are not in the TOC) are NOT inserted directly as child elements of the body element:

Code: Select all

body > ul {

 ... 

}



body > ul li {

 ... 

}

Regards,
Sorin