This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Links – adding rollover color to text

Resolved 12 replies premiumthemetheme-vantage
jdgtr7
11 years ago · Last reply by Andrew Misplon 11 years ago

Hi,

Just wanted to see if there was a way to add color to text when the cursor moves over it, when the text on the page is made into a link. I have added the link and do not want to use underlines, so I have removed those. Now I just need to show the link by adding color in the rollover state.

Thanks for any help you can give,

Jon.

URL: http://lep-sw.com/gold-standard-partners/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

12
  1. Andrew Misplon Staff 11 years, 5 months ago

    Hi Jon

    Thanks for running Vantage. You can control content link colors from Appearance > Customize: General. There is however a shortcoming in the scope of this setting so I’d suggest inserting the following under Appearance > Custom CSS and editing with your colors:

    /* Links */

#main a { color: #dd3333; }
#main a:hover { color: #2b1100; }
  2. jdgtr7 11 years, 5 months ago

    Thanks Andrew.

    I have copied the code to Custom CSS and changed the colors to match the design, but no changes take effect. I am hoping to get the links to change from grey to gold as the cursor moves over each link (“Alliance Residential”, etc.).

    I removed the underline from the link by using:

     a:link { text-decoration: none; }

    Could I add anything to the link part regarding hover color?

    Thanks again, Jon.

  3. Andrew Misplon Staff 11 years, 5 months ago

    Everything looks good, the hover just needs a tweak, right now it’s:

    /* Links */

#main a:hover {
c;
}

    The selectors you have after that can be removed. So to summarise your Custom CSS can be:

    /* Links */

#main a {
color: #dfa835;
text-decoration: none;
}

#main a:hover {
color: #;
}

    Just insert the hover color you want there. You had a different color set for #main a and a:link so not sure which one you’re wanting to use.

  4. jdgtr7 11 years, 5 months ago

    Hi Andrew, I have copied the code above and added the hover color. The text decoration is in effect, but the color has not changed when hovering over the text. Is there anything else I can try?

  5. Andrew Misplon Staff 11 years, 5 months ago

    Please let me know which page has a link that I can check out to see what’s happening there. Thanks.

  6. jdgtr7 11 years, 5 months ago

    Here is the page:

    http://lep-sw.com/gold-standard-partners/

    The two columns on the right are all going to be links, most are currently active. The links are set up, I just need the color to change on rollover.

  7. Andrew Misplon Staff 11 years, 5 months ago

    Those links are wrapped in a span tag with a inline style stating their color. You’d need to remove that for the Custom CSS to take effect.

  8. jdgtr7 11 years, 5 months ago

    I am new to coding and not sure how to do that from within the WordPress environment. Would you be able to point me in the right direction? If I remove these lines of code for the color, would it effect the other text in the site?

  9. Andrew Misplon Staff 11 years, 5 months ago

    Sure. On that page, via Page Builder, using the Black Studio TinyMCE, Visual Editor widget, a color was directly applied to those links. That formatting would ideally need to be removed.

  10. Andrew Misplon Staff 11 years, 5 months ago

    Alternatively leave it all in place and add the following selector below the others in Custom CSS:

    #main a strong span:hover {
color: #dfa835 !important;
}
  11. jdgtr7 11 years, 5 months ago

    Thanks Andrew, this is working perfectly! Much appreciated :)

    Jon.

  12. Andrew Misplon Staff 11 years, 5 months ago

    For sure, glad we could help.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread