Customize related-links section

[marcus_s]

Hello,

I wanted to ask if it is possible to customize the display of <related links> section in the responsive webhelp?

Currently, the responsive webhelp displays several sections for concepts, references, tasks, topics.
I would just like a simple list without this subdivision. Is that somehow possible?

[ionela]

Hi,

In case the related links are specified within the DITA topics, to customize the display of <related links> section in the WebHelp Responsive section, you can use a structure like this in your source files: <related-links>/ <linklist>/ <title>:

Code: Select all

<related-links>
        <linklist>
            <title>Custom Title</title>
            <link href="..."/>            
        </linklist>
</related-links>

I hope this helps.

Regards,
Ionela

[chrispitude]

We use a prefix of "See Also" for our related links, in both the editor and the PDF output. Here's the CSS we use for that:

Code: Select all

html:root [class~="topic/linklist"] > strong { display: none; }
*[class ~= "topic/related-links"]::before {
    content: "See Also";
    font-weight: bold;
    page-break-after: avoid;
    margin-bottom: 8pt;
    padding-bottom: 0pt;
    display: block;
}

We use some more CSS to style the list items:

Code: Select all

[id]:root *[class~='topic/related-links'] *[class~='topic/link'],
html:root *[class~='topic/related-links'] li {
    margin-left: 0.1in;  /* guesses */
    padding-left: 0.125in;  /* guesses */
    margin-top: 6pt;
    margin-bottom: 8pt;
}
[id]:root *[class~='topic/related-links'] *[class~='topic/link'] {  /* HTML shows as bullet by default; editor does not */
    display: list-item;
    list-style-type: disc;
    list-style-position: outside;
}

I hope this is helpful!