Override style color for a link (+ hover underline) in posts

[1b5085]

Forum URL: (private)

I set default colors for links and the underlined hover style in the style sheet.

In my posts when using one specific url (or maybe in any post on my forum with that particular link) I want to use a different color for the link text with the same different color for the hover underline.

When using BBCode color tags, it keeps overriding my specific color with the default color from the style sheet, even when put before and after the link. At one point I succeeded in changing the link text's color, but still not the hover underline.

How to do this? 

[Scott]

1b5085 -

I can get you the different colored link by surrounding the link text in a span tag, but am unable to create an individual hover affect.

Link text color example:

(Before)

ProBoards Support Forum
[a href="https://support.proboards.com"]ProBoards Support Forum[/a]

(After with span tag)

ProBoards Support Forum
[a href="https://support.proboards.com"][span style="color:red;"]ProBoards Support Forum[/span][/a]

[1b5085]

Thanks! There isn't some sort of conditional rules way of styling (if url = xyz then color = red) in css?

[Scott]

1b5085 - not that I'm aware of. The easiest method would be to assign a class or id to the <a> tag, however classes/id's are stripped (ignored) when the post is rendered taking away the ability to uniquely style the link. Inline CSS can be used (my span tag solution) but that's about it afaik.

However there are much more savvy coders out there that may have a solution?

[1b5085]

Thanks, again!

Oct 9, 2024 14:41:04 GMT -8 Scott said:

However there are much more savvy coders out there that may have a solution?

I hope so!

Every girl needs a coder in her life anyway.

[Chris]

See my post in your activities thread for an example of how to query the href attribute in CSS

I have to get ready for work...

[Retread]

Oct 9, 2024 14:41:04 GMT -8 Scott said:

However there are much more savvy coders out there that may have a solution?

I'm definitely not a "much more savvy" coder than you. For that, we'd need someone like Chris . That said, I reckon you're overlooking the attribute selector available in css.

We could place something like this in the Global Header, (or skip the <style> tags and just place it at the bottom of the style sheet(s) on the forum):

<style>
.posts .message a[href*="support.proboards.com"] { color: red;}
</style>
This applies to any and all a tags where the href attribute contains the substring "support.proboards.com" that are within an element with the "message" class, which is within an element with the "posts" class. That part insures that we're restricting this to the message container within posts and not globally on the forum.

We can be as specific or as general as desired with the substring we're targeting in the href attribute selector.

CAVEAT: This will only affect the color when viewing the forum in the desktop version. In the mobile version it will default to blue. For that reason, the inline styling within the post itself is the preferred method, if we want the link color to be red, regardless of how the forum is being viewed.

Also worth noting: Using span tags with a style attribute certainly does the job. However, it's slightly more direct to just apply a style attribute within the a tag.

These two lines accomplish the same thing:

[a href="https://support.proboards.com"][span style="color:red;"]ProBoards Support Forum[/span][/a]

[a href="https://support.proboards.com" style="color:red;"]ProBoards Support Forum[/a]

[Scott]

Yes I totally spaced on that Retread . Thanks!


1b5085 , building on what Retread posted, to have the specific color and the underline on hover it would be:

<style>
.posts .message a[href*="support.proboards.com"] { color: red;}
.posts .message a[href*="support.proboards.com"]:hover {text-decoration:underline;}
</style>
Of course substitute in the URL (and color) you want.



Definitely time for me to go back to school   or up my caffeine level 

[1b5085]

Yes! Yes! Yes! Perfect! I placed it without the <style> tags at the bottom of my CSS. Thanks Retread, Chris and Scott.

As far as the mobile version is concerned, it unfortunately discards many more styling preferences. 😢

[1b5085]

Follow-up question. How to do this in html for a custom page:

Style my special link with the specific color + bold + hover underline, exclude any other url - e.g. the proboard links at the bottom of the page - from this particular styling?

[Retread]

Oct 11, 2024 2:43:12 GMT -8 1b5085 said:

Follow-up question. How to do this in html for a custom page:

Style my special link with the specific color + bold + hover underline, exclude any other url - e.g. the proboard links at the bottom of the page - from this particular styling?

Since the content portion of custom pages is in divs with the class widget-content, we can use that as part of the selector. You could place this in a HTML box for a specific page, or you could place this in your Global Header to affect all custom pages, or you could place this at the bottom of your style sheet after your previous addition that affects the posts.

<style>
.widget-content a[href*="support.proboards.com"] { color:red; font-weight:bold;}
.widget-content a[href*="support.proboards.com"]:hover {text-decoration:underline;}
</style>

If you're doing the exact same styling on all these special links, another option would be to use multiple selectors (the stuff before the curly brackets), separated by a comma.

[1b5085]

Thanks a lot, Retread!

I was not able to get it to work yet. Probably need to do some more trial and error with the options you gave me.

So far, either the general proboards links at the bottom of the page still have (or turn into) the special color and size (which they should not), either my special link turns into the color and size of the general proboards links (dito).

[Scott]

1b5085 -

From what I see, in the custom page widget you defined the anchor tag ( <a> ) the same color you are using for the special link color. This generic CSS will affect all the links on the page.


I took the liberty to comment out that style section of the widget; then I uncommented the code in your CSS that Retread gave you (as well as adding a font-size attribute).


Things should be sorted now. Please let me know if all is well.

[1b5085]

Oh... you guys are the best. Thanks for everything, Retread, Chris, Scott! The forum is becoming a true masterpiece.