Changing Space Between Link and Shortdesc in oxygen-webhelp

Thu Dec 03, 2015 10:50 pm

Hello,

I have searched everywhere in the css files to find the style that controls the shortdesc under hierarchy links. I would like to make the space smaller.

We are using the Oxygen Webhelp plugin.

I have found that .ulchildlink in the commonltr.css file changes the space between each set of links and shortdesc, but I just want to make the space between the link and shortdesc smaller.

Note, these links and shortdesc are hierarchy links, meaning they appear in parent topic.

Thanks,
Danielle

Fri Dec 04, 2015 1:05 pm

Hi,

I assume you are talking about the links that are automatically generated for the child topics.

If this is the case, for each child topic, following HTML snippet is generated in the Webhelp output:

Code: Select all

<div class="related-links">
  <ol class="olchildlinks">
  ...
   <li class="link olchildlink">
     <a href="../concepts/summerFlowers.html">Summer Flowers</a>
     <div>A short description for summer flowers.</div>
   </li>
  </ol>
</div>

So, if you want to control the space between the link and shortdesc you have to write a CSS rule that match the a or div elements as child of li with class olchildlink.

Code: Select all

.olchildlinks>.olchildlink > a + div {
  line-height: 12px;
}

You can add these additional rules in a custom CSS file and specify it in the Webhelp transformation. You can find more details about this customization in the Customizing WebHelp Output with a Custom CSS topic from our user manual.

Fri Dec 04, 2015 4:22 pm

Actually no <div> is being wrapped around the shortdesc. Here is what is being generated:

Code: Select all

<div class="related-links">
<ul class="ullinks">
<li class="link ulchildlink"><strong><a href="../../topics/user_interface/collector_selection_r.html#reference_rmz_yry_wt">Select Entities</a></strong><br></br>
Select and deselect entities using the Selection tool, the modeling window context     menu, or with keyboard shortcuts and mouse controls. Selected entities are outlined to indicate     their selection state.</li>
</ul>
</div>

Mon Dec 07, 2015 3:04 pm

This output is obtained when the list with related links is unordered. It is generated when the collection-type attribute is set to unordered in the topicref element from the DITA map:

Code: Select all

<topicref href="topics/index.dita" collection-type="unordered">

This output is generated by the DITA-OT framework used in Webhelp. So, I've added an issue to the DITA-OT project to change the output for this case. I've requested to wrap the text for the short description in a separated div:
https://github.com/dita-ot/dita-ot/issues/2164

Meanwhile, a possible workaround would be to use a JQuery script for wrapping the short description text(JQuery is already included in the Webhelp).
Below, you can find a link to a thread that contains some solutions about how to wrap a text node in a specific element.
http://stackoverflow.com/questions/1365 ... in-element

You can specify a custom java script that will be copied in the <head> section of every WebHelp page through the webhelp.head.script parameter.
See: http://oxygenxml.com/doc/versions/17.1/ ... utput.html