Select to view content in your preferred language

Hyperlinked words not appearing in black font

327
3
Jump to solution
08-15-2024 12:58 PM
AlexisTerriquez
New Contributor

Hello, I am having difficulty getting the circled words to appear in bold and in black font, as they are hyperlinked. Originally I was able to achieve this, and the links worked just fine. However it randomly just started doing this. This issue also appears on all hyperlinked words - again, everything was looking fine in the beginning. Does anyone know how to fix this?

AlexisTerriquez_1-1723751074276.png

 

0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Regular Contributor

It looks like your theme link color is set to white based on your buttons in frame, which we calculate using link color and site background color. It would appear that the site link color may be winning against your inline link color. When you switch to the code view, are your links styled like this:

<li><a href="#" style="color: #000000; font-weight: bold;">Link text</a> goes here</li>

View solution in original post

0 Kudos
3 Replies
KlaraSchmitt
Esri Regular Contributor

It looks like your theme link color is set to white based on your buttons in frame, which we calculate using link color and site background color. It would appear that the site link color may be winning against your inline link color. When you switch to the code view, are your links styled like this:

<li><a href="#" style="color: #000000; font-weight: bold;">Link text</a> goes here</li>

0 Kudos
AlexisTerriquez
New Contributor

Hello @KlaraSchmitt 

Thank you! That worked on my end. By chance, would you also happen to know why the hyperlinked words turn purple after I click on them? Is there a way to fix that so it always stays black?

0 Kudos
KlaraSchmitt
Esri Regular Contributor

Yes. That sounds like the browser default. Okay, so this a two step deal.

1) You need to give your row a unique CSS class. You'll do this by selecting Row > Edit (pencil) and then finding the "Row CSS Class." Type a name in that field (I named my row "green-row" for purposes of this example.) 

2) Go back to your text card. Switch into the HTML editor. You can take off the inline styles I gave you earlier as this you won't need them with this snippet. Then at the top of your text card, you'll want to add:

<style>
   .green-row a:link {color:#000000; font-weight:bold;}
   .green-row a:hover {color:#000000; font-weight:bold;}
   .green-row a:visited {color:#000000; font-weight:bold;}
</style>

But replace .green-row with .your-class-name instead.

This will ensure that you have black, bold text for all three link states: link, hover, visited. But if you don't put the class name of the row ahead of those selectors, you're going to get that style for every link you have on your site and that might not benefit you if any of your other rows have dark backgrounds. Generally, we want to avoid really generic selectors for that reason - they are far more likely to have unpredictable reach, so I definitely recommend making sure you have a unique row class around generic selectors to avoid that situation.

0 Kudos