Questions about link font colors and underlining

[LittleRiverBB]

URL: http://www.littleriverbedandbreakfast.com

Question about the fonts for hyperlinks in X.

Easy one: How do I add underlines to links (and hover)

Harder one: I use alternating backgrounds in some of my pages. For example: On the following page, I have links in the light colored background of the body and links in my dark colored footer. There are also places where I have links on white background.

Special Packages at Little River Bed and Breakfast

My text on the dark colored background is light and the text on the light colored background is dark. But the links are someone where in the middle (kind of a reddish brown…think it was default by the theme). Unfortunately that link colored font does not contrast enough with the background colors to pass WCAG accessibility testing.

Is there a way for me to set the font for links to the same as the rest of my text? My thinking is that if its the same color as the rest of my text to has enough contrast and then I add bolding and underlining to it to differentiate it as a link.

[mldarshana]

Hi There @LittleRiverBB

Thanks for writing in! To make your links and hover underline, you can add the following CSS rule into your X -> Theme Options -> CSS area.

a, h:hover {
    text-decoration: underline;
}

If you want to change link colors and other attributes of your specific sections, you can first assign a special class to your sections.

For example:

Then you can add your custom CSS rules into your page’s custom CSS area.

.my-dark-links a {
  color:red;
}
.my-dark-links a:hover {
  color:green;
  text-decoration: underline;
}

Hope that helps.