Page 1 of 1
Customize related-links section
Posted: Mon Nov 25, 2019 8:52 pm
by 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?
Re: Customize related-links section
Posted: Tue Nov 26, 2019 3:49 pm
by 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
Re: Customize related-links section
Posted: Sat Nov 30, 2019 4:22 am
by 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!