CSS to change colour of hyperlink text

sinthea · Member · Aug 8, 2017 at 5:10 pm
Copy link

Add topic to favorites
Hello, I am trying to add the CSS code to change the colour of hyperlinks in their un-clicked and in their visited states (happy to leave hover colour alone).

This is what I tried, and appears not to have worked. Can you please tell me where I have gone wrong…
```
a: link {
	color: #267aaa;
	}

a: visited {
	color: #0c405d;
	}
```
Using the Sela theme for boddrums.co.uk Thanks.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 8, 2017 at 10:39 pm
Copy link
Hi, in the code you have above, you would not want the space between the colon and the “link” and “visited”. Try the following instead, and I’ve used some obnoxious colors for demonstration purposes so you can check and see the change easily. Also notice that I’ve included #content to keep this from affecting your site title and menu, and other links outside of the content area.
```
#content a, #content a:link {
	color: #22ff11;
}

#content a:visited {
	color: #ee11ff;
}
```
sinthea · Member · Aug 15, 2017 at 4:56 pm
Copy link
Hi Sacred Path, my apologies for the delay in responding. I tried this (love the lime green actually, but sadly the client didn’t go for it!). Just one little glitch I cannot figure out how to avoid. Help please!

Since I have a fixed front page and the blog relegated to another page, which is in the form of a summary list, when I change the link colour as above, the titles of the blog articles become hyperlink coloured – normally they are the basic text charcoal grey (#404040 colour ref). The theme is Sela if that is any help. Thanks!
sinthea · Member · Aug 15, 2017 at 4:57 pm
Copy link
to clarify – the titles of the blog articles as listed on the summary page (“Blog” from the main menu).
thesacredpath · Member · Aug 15, 2017 at 8:19 pm
Copy link
Oh, this is getting complicated. I’ve had to get more specific with the CSS selectors. See what you think with this (and of course you can adjust my obnoxious colors. :)
```
.entry-body a, .entry-meta a, .widget a {
  color: lime;
}
.entry-body a:visited, .entry-meta a:visited, .widget a:visited {
  color: violet;
}
```

No items found.