Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing hyperlink color while leaving menus alone
Tagged: hyperlink color
- This topic has 10 replies, 2 voices, and was last updated 10 years, 7 months ago by Marcy.
-
AuthorPosts
-
September 18, 2013 at 8:09 pm #63322HelpfulScoutMember
I would like to change the hyperlink color in the regular text but leave the menus alone. I changed my menus to be midnight blue, which looks good but the midnight blue is hard to distinguish in the regular text as a hyperlink. I'd like to lighten that blue. How do I do this? I'm using eleven40 pro and my site URL is below. Thanks!!
http://www.thehelpfulscout.comSeptember 19, 2013 at 12:54 am #63336MarcyParticipantIn the eleven40 Pro Blue section is this:
.eleven40-pro-blue a,
.eleven40-pro-blue .entry-title a:hover,
.eleven40-pro-blue .genesis-nav-menu a:hover,
.eleven40-pro-blue .genesis-nav-menu .current-menu-item > a,
.eleven40-pro-blue .nav-primary .sub-menu a:hover,
.eleven40-pro-blue .nav-secondary .sub-menu a:hover,
.eleven40-pro-blue .site-footer a:hover,
.eleven40-pro-blue .site-header .sub-menu a:hover {
color: #2aa4cf;
}
You changed them all to color: #191970;What you want is to:
- leave the section above with color: #2aa4cf;
- separate the nav menu lines from the link lines
- add them below with color: #191970;.eleven40-pro-blue .genesis-nav-menu a:hover,
.eleven40-pro-blue .genesis-nav-menu .current-menu-item > a,
.eleven40-pro-blue .nav-primary .sub-menu a:hover,
.eleven40-pro-blue .nav-secondary .sub-menu a:hover,
.eleven40-pro-blue .site-header .sub-menu a:hover {
color: #191970;
}I wasn't sure if you want the .entry-title a:hover and the .site-footer a:hover to be the darker blue or the lighter blue. You can add them to the darker blue section, if needed.
Marcy | Amethyst Website Design | Twitter
September 19, 2013 at 7:39 am #63360HelpfulScoutMemberI thought I changed it how you said and now 1) my subpages are showing links in orange? and 2) the main page didn't update. I guess I don't quite understand.
September 19, 2013 at 9:16 am #63373MarcyParticipantWhen you log into WordPress. Click on Genesis > Theme Settings > Color Style, what is set there? Are you on Default?
The section you had edited last night was in the eleven40 Pro Blue section, so that's why I had you edit that section.
If you look near the top of your Style.css, you can see the Table of Contents, so you can see the Color Styles section just before the Media Queries section. You have to edit the section that is set in Genesis > Theme Settings
If you have set the Default (Orange) Color Style, then you need to edit the nav menu colors in the top section, but I think you want to choose the eleven40 Pro Blue and do your edits in that section of style.css
Marcy | Amethyst Website Design | Twitter
September 19, 2013 at 9:19 am #63374HelpfulScoutMemberBlue is selected. That is why I think something happened with my changes to set it to orange.
September 19, 2013 at 9:20 am #63375HelpfulScoutMemberThis is what I did, following your instructions:
.eleven40-pro-blue a, {
color: #2aa4cf;
}.eleven40-pro-blue button:hover,
.eleven40-pro-blue input:hover[type="button"],
.eleven40-pro-blue input:hover[type="reset"],
.eleven40-pro-blue input:hover[type="submit"],
.eleven40-pro-blue .archive-pagination a:hover,
.eleven40-pro-blue .archive-pagination li.active a {
background-color: #2aa4cf;
}.eleven40-pro-blue .entry-title a:hover,
.eleven40-pro-blue .genesis-nav-menu a:hover,
.eleven40-pro-blue .genesis-nav-menu .current-menu-item > a,
.eleven40-pro-blue .nav-primary .sub-menu a:hover,
.eleven40-pro-blue .nav-secondary .sub-menu a:hover,
.eleven40-pro-blue .site-footer a:hover,
.eleven40-pro-blue .site-header .sub-menu a:hover {
/*color: #2aa4cf;*/
color: #191970;
}September 19, 2013 at 9:30 am #63376MarcyParticipantYou have to have the .eleven40-pro-blue a still in the blue section.
Add this section back so you have two section like I suggested above. The light blue section is first and you ADD the dark blue section just below it. You need to have both sections.
.eleven40-pro-blue a,
.eleven40-pro-blue .entry-title a:hover,
.eleven40-pro-blue .genesis-nav-menu a:hover,
.eleven40-pro-blue .genesis-nav-menu .current-menu-item > a,
.eleven40-pro-blue .nav-primary .sub-menu a:hover,
.eleven40-pro-blue .nav-secondary .sub-menu a:hover,
.eleven40-pro-blue .site-footer a:hover,
.eleven40-pro-blue .site-header .sub-menu a:hover {
color: #2aa4cf;
}.eleven40-pro-blue .genesis-nav-menu a:hover,
.eleven40-pro-blue .genesis-nav-menu .current-menu-item > a,
.eleven40-pro-blue .nav-primary .sub-menu a:hover,
.eleven40-pro-blue .nav-secondary .sub-menu a:hover,
.eleven40-pro-blue .site-header .sub-menu a:hover {
color: #191970;
}
Marcy | Amethyst Website Design | Twitter
September 19, 2013 at 9:53 am #63378HelpfulScoutMemberOk, I didn't understand needing to repeat it. I did it and it is still orange 🙁 I even reset the theme to blue. I opened it in Chrome developer tools and it shows the orange but doesn't show me why. I am new to CSS editing and so am puzzled.
September 19, 2013 at 10:57 am #63391HelpfulScoutMemberI figured it out. Thank you! (I understand the CSS better now too!)
September 19, 2013 at 10:58 am #63392HelpfulScoutMemberp.s Your code worked. I had a typo 🙂 That is what I figured out
September 19, 2013 at 12:08 pm #63404MarcyParticipant -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.