Hyperlink widget class A20 A trumps the class attribute?

[Larelyn]

Our company uses both Genie and Rich Display programs, and I'm accustomed to the A20 A class as the default class for Genie hyperlinks. We use Genie hyperlinks exclusively for menu type options, and consequently are styled with larger font sizes that work well for that purpose.

When I add a hyperlink widget to a Rich Display format, I typically assign a different class (let's say "fkey-link") because it will serve a different purpose and is usually smaller in font size. However, when I inspect the RD hyperlink, the A20 A class is automatically applied higher in rank than the fkey-link class.

Is there a work around to this?

[Scott Klement]

I'm not clear on what is meant by "A20 A" class, but I think you're saying the A20 class to the A HTML tag, correct? Can you show me the selector you're refering to/

Rich Displays don't automatically apply an A20 class... that is a 5250 attribute class, so the only way it'd have the A20 class is if you assigned it yourself or have some cusomization that would add it. (This seems extremely unlikely.)

[Larelyn]

I've attached a pdf with some screen shots to show what I am experiencing.

In the designer, I assign the class attribute "fkey-link" to the hyperlink object. When I inspect the hyperlink object, it has been assigned as a div with class "fkey-link", but the DIV.A20 A styles are assigned as well. Because this is a rich display file and not Genie, I do not expect to see DIV.A20 A styles at all. Why would they be appearing? How do I prevent this?

[Larelyn]

Ok, I kind of figured it out. The default Genie skin CSS we use has DIV.A20 A, A {...}.

I'm clearly not much of an expert with CSS, because I didn't realize this encompassed both DIV.A20 hyperlinks and plain old "<A>" hyperlink elements.

Removing the last "A" from that class definition almost fixes my problem (DIV.A20 A {...}). Hyperlinks from Rich Display now can have different styles than Genie.

However, now the A element from /proddata/css/profoundui.css is overruling the div style I apply to the object in the developer (my fkey-link example). Do you have any recommendations in how I can change the sequence the styles are being applied?

Thanks for your patience!

[Larelyn]

More research on my end... I had to go into my css and add an entry for A with "inherit" values to override the properties in profoundui.css.

"Inherit" will take the properties from the parent element, so this works for rich display. Hyperlink widgets are <div> objects with an <A> hyperlink child. In the designer, classes are assigned to the <div> widget object, so "inherit" will apply those properties to the child hyperlink and override the profoundui.css properties.

So, for a simplified example:
<div id=hyperlink class=myclass>
<a>Hyperlink</a>
</div>

CSS:
A { color:inherit;} ---->from mycss.css
A { color:#0066cc;} ---->from /proddata/css/profoundui.css
.myclass { color:black;} ---->from mycss.css

The style from myclass now comes through, and the hyperlink is black.

This will work. Thanks for your time!