Changing hyperlink color while leaving menus alone

[HelpfulScout]

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.com

[Marcy]

In 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

[HelpfulScout]

I 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.

[Marcy]

When 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

[HelpfulScout]

Blue is selected. That is why I think something happened with my changes to set it to orange.

[HelpfulScout]

This 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;
}

[Marcy]

You 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

[HelpfulScout]

Ok, 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.

[HelpfulScout]

I figured it out. Thank you! (I understand the CSS better now too!)

[HelpfulScout]

p.s Your code worked. I had a typo 🙂 That is what I figured out

[Marcy]

Hooray for you! I'm so glad it worked for you! 🙂

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts