Change color of Hyperlink

Permalink
Hi all, I am trying to change the color of the hyperlink that appears on the page, how can I do that?
Thanks for your help

 
jvansanten replied on at Permalink Reply
Not complicated, but not quite as simple as it seems.

In standard themes, you should find the anchor references in the typography.css although they may also occur in main.css. typography.css references take precedence.

Here's a snippet from the Dark Chocolate theme:
/yoursitesmainfolder/concrete/themes/dark_chocolate/typography.css

a,a:visited,a:active {
   /* customize_link */ color: #614F3F; /* customize_link */
   text-decoration:none;
}
a:hover {
   /* customize_link_hover */ color: #81613F; /* customize_link_hover */ text-decoration:underline;
}


As you can see, this is commented to guide the customization of the color.

Also note that there are multiple pseudo classes to address -- the anchor by itself (a), recently visited links (visited), current link (active) and hover.

It is important to define these in the proper sequence -- otherwise, the desired effect won't appear (headscratch).

Check out this documentation for the correct sequencing.

http://www.w3schools.com/css/css_pseudo_classes.asp...


That's the HTML/CSS side.

As far as implementing in C5, you would want to move any theme you modify from it's installation folder to your custom folder, i.e.:

/yoursitesmainfolder/concrete/themes/desiredtheme -- move this entire folder to:
/yoursitesmainfolder/themes/desiredtheme

This will allow you to modify the theme as desired, and avoid having those changes being overwritten when C5 is upgraded to a new version.