Remove link for abbreviated-form

Glimmerino
Posts: 24

Remove link for abbreviated-form

Mon Mar 13, 2017 5:47 pm

Hi.

I use the "abbreviated-form" in order to create a list of glossary. I would however like the "abbreviated-form" not to render as a link but rather as plain text. In which css-file can I change this?

I'm guessing there is a css line somewhere stating that "abbreviated-form" should inherit from "<a href"">".

Regards
Kristian
alin
Site Admin
Posts: 111

Re: Remove link for abbreviated-form

Tue Mar 14, 2017 7:05 pm

Hello,

You can contribute your own CSS file that overrides the default style rules following this procedure: https://www.oxygenxml.com/doc/versions/ ... n-css.html.

Actually, the abbreviated form term is generated inside an a element. For example:

Code: Select all

<a href="antilock.html" title="Anti-lock Braking System (ABS)">
    <dfn class="term abbreviated-form">Anti-lock Braking System (ABS)</dfn>
</a>


You can use the following CSS snippet as a starting point:

Code: Select all

.abbreviated-form,
.abbreviated-form:link,
.abbreviated-form:visited,
.abbreviated-form:hover,
.abbreviated-form:active
{
    font-style: normal;
    text-decoration: none;
    cursor: default;
    color:#000000;
}


Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Glimmerino
Posts: 24

Re: Remove link for abbreviated-form

Wed Mar 15, 2017 10:17 am

This kind of works. But since the

Code: Select all

<dfn class="term abbreviated-form">Anti-lock Braking System (ABS)</dfn>
is inside the <a>-element I will still get a link behaviour since the styling is also set on the anchor element (in this case <a href"">). Is there any way of changing an element with the condition that it should only change when containing a certain class?
I have searched the internet for this but without results.

Thankyou.
alin
Site Admin
Posts: 111

Re: Remove link for abbreviated-form

Wed Mar 15, 2017 6:26 pm

Hi,

I understand that you want a way to match an element that has a certain child element (in your case a <a> element that contains a <dfn> element with the .abbreviated-form class). As far as I know there is no such thing as a parent selector in CSS. You can have a look here: https://www.w3.org/TR/css3-selectors/#selectors

You can try a JavaScript approach to this problem and remove the wrapping <a> element in this case. You can contribute a custom JavaScript code to the WebHelp transformation as follows:
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: mihaela and 1 guest