Oxygen XML Forum

1. How to achieve the same output as in this web page where multiple levels of headings exist in a single topic, and those headings are shown in the right-side TOC?

2. Is there any way to put the title of a table into the right-side TOC of a single topic web page?

3. Is there any way to set tables to be collapsed as default on the web page?

cosmin_andrei wrote: ↑Fri Jun 10, 2022 12:36 pm Hi felixliu,

You can find my answers below:

1. How to achieve the same output as in this web page where multiple levels of headings exist in a single topic, and those headings are shown in the right-side TOC?

For sections with ids the component is called topic Table of contents - A table of contents for the topic displayed on the right side with a heading named On this page and it contains links to each section within the current topic and the section corresponding to the current scroll position is highlighted. This component is generated for any topic that contains at least two <section> elements and each <section> must have an @id attribute. You can use the button to collapse the table of contents ( or the < button to expand it).

2. Is there any way to put the title of a table into the right-side TOC of a single topic web page?

Unfortunately this could not be achieved in the current implementation.

3. Is there any way to set tables to be collapsed as default on the web page?

There is the "webhelp.topic.collapsible.elements.initial.state" parameter, that you could use and set it's value to "collapsed". By default, the sections are expanded. This support is only available for some elements. More specific, only tables with a caption, sections that have a title and subtopics (nested topics) can be collapsible.

chrispitude wrote: ↑Wed Jun 15, 2022 2:21 pm Hi Felix,

DITA supports only a single level of <section>; nested sections are not allowed.

The page you referenced uses nested topics, then sections in those:

https://github.com/oxygenxml/userguide/ ... pages.dita

chrispitude wrote: ↑Thu Jun 16, 2022 2:34 pm Hi Felix,

There are several YouTube videos that cover WebHelp customization:

oxygenxml on YouTube - "customize webhelp"

I am currently partway through the most recent video posted two months ago. Basically, you use your browser's CSS inspector to find the class of the element you want to customize, then you add a CSS style for that to your custom CSS file. For something like nested headers, it can be useful to click on the CSS filename in the browser inspector to see the full CSS file applying the rules, so you can see the relationship of how different heading-level selectors are written.