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.
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; }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.
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.
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?
Please let me know which page has a link that I can check out to see what’s happening there. Thanks.
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.
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.
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?
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.
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; }Thanks Andrew, this is working perfectly! Much appreciated :)
Jon.
For sure, glad we could help.