Page 1 of 1
Remove link for abbreviated-form
Posted: Mon Mar 13, 2017 5:47 pm
by Glimmerino
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
Re: Remove link for abbreviated-form
Posted: Tue Mar 14, 2017 7:05 pm
by alin
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
Re: Remove link for abbreviated-form
Posted: Wed Mar 15, 2017 10:17 am
by Glimmerino
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.
Re: Remove link for abbreviated-form
Posted: Wed Mar 15, 2017 6:26 pm
by alin
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: