Need custom Hyperlink text color in galleries

guy

So I've come across a bit of a problem with hyperlink text color in gallery & photo descriptions. If I leave the text set to theme default then the hyperlinks are highlighted.

However if I change the theme text color then the hyperlinks are exactly the same color & the theme does not have an option to set hyperlink color differently.

Here is an example:
http://guy.smugmug.com/Plantmad/Plantmad-Plants/Wisteria

The Wisteria names in the gallery description are hyperlinks but that is not obvious! I also need obvious hyplerlinks in photo descriptions.

Is there a way I can do this with CSS & if so can someone help me out?

Thanks.

denisegoldberg

I had the same issue on my site. I didn't want the links in a different color (but they needed to stand out from the text to give a clue to the viewer) so I just used HTML to bold the links (<b>text</b>) them, but I also added some CSS to my theme to change the color and apply an overline on hover. I added this CSS to my theme to change the behavior on hover:

/* Adds hover effect to all links on site */
a :hover, 
a:hover {
  color: #19a791 !important;
  text-decoration: overline !important;
}

Examples on my site:

• gallery description - http://www.denisegoldberg.com/Travel/Acadia-and-October-2013/Wandering-downeast-Maine
• photo caption - http://www.denisegoldberg.com/Travel-stories/Wandering-assisted-by-2-feet

It sounds like you might want to do something similar but for links. I'm not sure if you'll be happy changing all links though because it would change the links on your entire site. Instead of referencing hover you would need similar CSS for link. Available css pseudo classes can be seen at http://www.w3schools.com/css/css_pseudo_classes.asp.
--- Denise

guy

guy wrote: »

So I've come across a bit of a problem with hyperlink text color in gallery & photo descriptions. If I leave the text set to theme default then the hyperlinks are highlighted.

However if I change the theme text color then the hyperlinks are exactly the same color & the theme does not have an option to set hyperlink color differently.

Here is an example:
http://guy.smugmug.com/Plantmad/Plantmad-Plants/Wisteria

The Wisteria names in the gallery description are hyperlinks but that is not obvious! I also need obvious hyplerlinks in photo descriptions.

Is there a way I can do this with CSS & if so can someone help me out?

Thanks.

Thanks Denise, when I put this code into my theme it worked but when I tried to alter it to simply change the color of the hyperlink it broke! guess I didn't have something in the right place!

denisegoldberg

guy wrote: »

Thanks Denise, when I put this code into my theme it worked but when I tried to alter it to simply change the color of the hyperlink it broke! guess I didn't have something in the right place!

Right now I see the underline and the color changing on hover. I just had a play in the chrome developer tools, if you change

.sm-page-content a :link, a:link {
text-decoration: bold !important;
text-decoration: underline !important;
}

To this:

.sm-page-content a :link, a:link {
text-decoration: bold !important;
text-decoration: underline !important;
color: aquamarine;
}

you will get a color change. Obviously change the color to one that you like using either the color name or color number.

--- Denise

PhilT87E

Some stunning autumn shots on your site, Denise!

P.

guy

Thanks Denise,

Still playing around with it, I tried a few versions of this:

.sm-page-content a :link, a:link {
text-decoration: bold !important;
text-decoration: underline !important;
color: aquamarine;
}

But got some very strange results so I removed it, even though I had it in the theme CSS is would work in some galleries but not in others with the same theme.

I'll play with it some more or maybe give up & move on to something else!

denisegoldberg

PhilT87E wrote: »

Some stunning autumn shots on your site, Denise!

Thank you!

--- Denise