Configuring TOCs in topic pages

Are you missing a feature? Request its implementation here.
Andreas70
Posts: 4
Joined: Mon Nov 04, 2024 5:22 pm

Configuring TOCs in topic pages

Post by Andreas70 »

We want to customize the display (widths, appearance) of the Publication Toc and the Topic Toc in the topic pages for our WebHelp based on version 27.

Customizing widths
We like to either apply minimum widths for the TOCs or change the current percent values.
So far I was able to do this by applying customized values for several classes
col-md-{x} (col-md-3, col-md-9)
col-lg-{x} (col-lg-2, col-lg-3, col-lg-7, ...)

Question:
I assume, that the commons.css is the result of a configurable build process.
How likely is it that the class names or the concept in general will change with one of the next releases?

Publication Toc Breakpoint
We think about having the Publication TOC in "medium" (min-width: 768px) not on the left side but on top of the content (similar to "small").
Following seems to be sufficient (at least it works somehow):

Code: Select all

@media (min-width: 768px) {
	/* Burger icon for Publication Toc in Navigation bar - Overwrite Oxygen default "display:none" */
    .navbar-expand-md .navbar-toggler {
        display: unset;
    }
	/* Toggle button for Publication Toc in Content Area - Overwrite Oxygen default "display: block!important" */
    .d-md-block {
        display: unset;
    }
}

@media (min-width: 992px) {
	/* Burger icon for Publication Toc in Navigation bar - Apply value which was set in Oxygen default for breakpoint 768px */
    .navbar-expand-md .navbar-toggler {
        display: none;
    }
	/* Toggle button for Publication Toc in Content Area - Apply value which was set in Oxygen default for breakpoint 768px */
    .d-md-block {
        display: block!important
    }
} 
Additionally, the width for some col-md-{x} have to be set to 100%.

But I have seen that the commons.css contains also rules for ".navbar-expand-lg .navbar-toggler" and ".d-lg-block" which seem to have the same effect, however they are nowhere used in the WebHelp XSLTs or Templates.
This leads me to the question of whether my approach is correct or whether the requirement can or should be achieved by solely adapting the templates.
Is there documentation for the CSS classes?

Breakpoint values
Is there a way (with reasonable effort) to move the "Medium" breakpoint, e.g. from 768px to 800px?

Thank you in advance
Andreas