Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to change colour of links?
Tagged: changing link color
- This topic has 7 replies, 4 voices, and was last updated 8 years, 7 months ago by
LaunchPad777.
-
AuthorPosts
-
October 20, 2014 at 5:31 am #128407
LaunchPad777
MemberHi there,
Using the Genesis Sample theme...
Just spent the best part of 2 hours trying to change the colour of links on this site.
http://www.gpmotorworks.co.za/contact-us/Using Chrome so used the Inspect Element to identify the code and made the changes as follows:
/*CHANGE HYPERLINK COLOR*/ .entry-content a { border-bottom: 1px solid #ddd; color: #10073C; } /*CHANGE HOVER COLOR*/ .entry-content a:hover { color: #D4CBFA; }
But this had absolutely no affect on the links at all.
Then tried:
/* unvisited link */ a:link { color:#10073C; } /* visited link */ a:visited { color:#404040; } /* mouse over link */ a:hover { color:#D4CBFA; }
Please tell me where I am going wrong...
Also, what code would I use to change the colour of the email address?
Best regards
Greg
http://www.gpmotorworks.co.zaOctober 20, 2014 at 6:30 am #128408LaunchPad777
MemberHi there,
Sorry I seem to have had a caching problem....couldn't see the changes taking effect.
However, the change to the second batch of code above has also caused changes to the text in the Nav Menu which I didn't want.
How do I change the Nav Menu text so that it is not affected by the links change?
Appreciate your assistance...
Regards
GregOctober 20, 2014 at 2:39 pm #128477LaunchPad777
MemberAnyone have any ideas?
October 20, 2014 at 3:14 pm #128482aan91
MemberOctober 20, 2014 at 3:22 pm #128483Porter
ParticipantThe proper identifiers for your navigation are as follows:
.genesis-nav-menu a:hover { your code }
"genesis-nev-menu" specifically. Have one piece of code with "a:hover" for the hover effect, and one without ":hover" for the normal color of the navigation. If that doesn't work, add .nav-primary before the above identifiers.
October 20, 2014 at 7:13 pm #128524gcampton
MemberI assume you're just adding css to the bottom on the stylesheet?
Otherwise it should not have overridden it.What you should be doing is looking for the changes you want to make.
For instance links in content:a { color: #333; }
So rather than putting new declaration at the bottom with your color just hit CTRL+F to "Find" text on the page, look for "a {"
which is around line 80 or so, then replace it with your new color.This will NOT change the color of buttons or nav menus because the rest of the stylesheet (Those are declared afterwards) still remains the same.
October 21, 2014 at 2:51 am #128591LaunchPad777
MemberThanks Porter....
I didn't need to make changes to the Nav Menu after all.....
Regards
GregOctober 21, 2014 at 3:01 am #128595LaunchPad777
MemberThanks gcampton,
I first removed the code at the end of the stylesheet and then searched for and made changes as you suggested.
Unfortunately this didn't have the desired result.I then checked the code again using Inspect Element and then searched and made the changes here:
.entry-content a { border-bottom: 1px solid #ddd; color: #10073C; }
This was successful.
The question is - why didn't this work when I placed the code at the end of the stylesheet in the beginning? (see beginning post).
Best regards
Greg -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.