Help needed for WebHelp Responsive Output

[felixliu]

Hi, I am new to DITA and oXygen, and have encountered a few puzzles. Wondering anyone know the answer to the following:

1. How to achieve the same output as on 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?

Thanks.

[cosmin_andrei]

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.

[felixliu]

Hi Cosmin,
Thanks for your help.

Regards.
Felix

[felixliu]

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.

Hi Cosmin, I have one more puzzle to add on top of my first question: how to achieve H2 and H3 title on a single topic web page? When I use the <section> element in a topic, it seems that the <section> is transformed with no specific heading level. Is there any attribute that I can use?

[felixliu]

Still wondering how to make H2, H3, even H4 titles on a single web page as on this web page. Help~

[chrispitude]

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

[felixliu]

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

Hi chrispitude,

Thanks for sharing the information, and it helps me a lot. I also see the page I referenced has different font size for different heading levels. How can I set those font sizes as on that page? I guess the font size and relevant formats are controlled by .css files, but not sure which file specifically.

Regards,
Felix

[chrispitude]

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.

[felixliu]

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.

Thanks a lot. I will take a look at those videos.
Best regards,
Felix