Change color hyperlinks sidebar

Hi Johnny,

Having a link to your site would help me be more precise with my answer. However, try with this snippet of CSS code in style.css of your child theme or custom CSS editor:

#secondary a {
color: black;
}

This should affect only the links inside the sidebar. If the code doesn’t work, then it means that I need a link to your page to target the HTML elements more precisely.

I hope this helps ??
– Maria Antonietta

Maria,

Thanks for your help.
Unfortunately this doesn’t help.

The links in the sidebar are still pink.

The site is https://www.worldlytreasury.com

In my CSS editor I now have:

.article a {
color: blue;
}

and

#secondary a {
color: black;
}

The links in the article are blue, but the links in the sidebar are still pink.

Yes Johnny, thanks for the link. This should change the color of the links in your sidebar:

aside a {
  color: #000;
}

Yesss. It works.

See the result: https://www.worldlytreasury.com

Thank you for your help, Maria.

Very glad to hear that! My suggestion would be to add a hover effect for usability purposes:

#secondary a:hover,
#secondary a:focus {
color: #444;
}

On mouse over or keyboard focus the link color gets a bit lighter. It’s good practice to add a hover effect to communicate to users that they’ve hit a link area.

Very best ??

Maria,

Thanks for the suggestion.
When I use #secondary nothing happens.
But .aside does work.

So this is (for me) the correct code

.aside a:hover,
.aside a:focus {
color: #444;
}

Thanks, again.

Sorry, my mistake, of course. It’s just the original code I gave above but with the hover and focus pseudo selectors. I copied and pasted from the wrong post.

I think your site looks great!