Changing Space Between Link and Shortdesc in oxygen-webhelp

Post by **dgallo** » 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

Post by **radu_pisoi** » 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.

Post by **dgallo** » 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>

Post by **radu_pisoi** » 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

syed · Post by **syed** » Mon May 04, 2020 2:34 pm

Hi,

Can you please share a solution for v21 users?

I see this code in commonltr.css but changing it does not impact anything.

Code: Select all

.ulchildlink {
  margin-bottom: 1em;
  margin-top: 10em;
}

.olchildlink {
  margin-bottom: 1em;
  margin-top: 10em;
}

I also used this code in my custom CSS.

Thanks..
Syed

Post by **Costin** » Tue May 05, 2020 1:01 pm

Hi,

The CSS rules do not apply on the output, because there are other CSS selectors coming from the default CSS files that are more specific than the ones you are using.
You could notice which selectors match the elements in the output, by inspecting the CSS behind the HTML pages, using your internet browser's CSS inspector for that.
More details on this technique which you should use whenever you want to debug thr CSS customization in this section from the WeHelp User-Guide.

Therefore, in this case, you should either use a selector with a higher specificity, or just try adding the !important marker into your CSS properties, to prevail.

Eg:

Code: Select all

.ulchildlink {
  margin-bottom: 1em !important;
  margin-top: 10em !important;
}

.olchildlink {
  margin-bottom: 1em !important;
  margin-top: 10em !important;
}

I hope this helps.

Regards,
Costin