Change hover color of Post Title, Date, and Leave a Comment

Add this custom CSS:

.entry-title a:hover, .entry-meta a:hover {
  color: #00f;
}

The color in the example is blue, but of course set it to whatever value you want.

CrouchingBruin – Thank you! That is exactly what I needed. I appreciate the support as I’m learning!

happy days!

Is There a piece of code I could use to change the entire theme to use red instead of green everywhere?

@FussBlog:

There is not just one rule that will change everything for you. In fact, there are 17 rules that you will need to override to change everything that is currently green.

First, if you’re not using a CSS plugin, you should install one like JetPack or Custom CSS Manager. Or, you can also create a child theme.

What you need to do is override all of the rules that are using the green color with whatever other color you want. The green that is being used throughout the theme is this value: #24890d. If you don’t know the hex value of the red that you want, there’s a color picker here. Let’s say, for example, you like #FF0000, which is a very bright, pure red.

Then you’re going to go into the theme’s stylesheet and find all of the rules that uses the green color #24890d. To look at the stylesheet, open up your website in your browser and append this string to it: /wp-content/themes/twentyfourteen/style.css. So if your web site address is example.com, put this into your browser:
https://example.com/wp-content/themes/twentyfourteen/style.css

Look through the stylesheet until you find the color #24890d. There should be 17 places in all. What you will do is copy the selector that’s being used, as well as the property, into the custom CSS field of whatever plugin you are using. For example, here’s the first rule which uses the green color:

a {
   color: #24890d;
   text-decoration: none;
}

This rule sets the text color of all of the links (anchor tags). So what you would do is copy this rule into your custom CSS field, change the color value, and take out any properties that don’t need to be changed:

a {
   color: #FF0000;
}

So now this rule will override the currently defined rule.

The only other thing you need to be careful of are rules which are located within media queries. Media queries are rules which take effect when the screen is a certain width. This allows the appearance of the site to change when viewed on mobile devices. For example, the 14th instance of the green color looks like this:

.primary-navigation ul ul {
      background-color: #24890d;
      float: left;
      margin: 0;
      position: absolute;
      top: 48px;
      left: -999em;
      z-index: 99999;
   }

But it’s nested inside a media query that looks like this:

@media screen and (min-width: 783px) {
   ...
}

So to override this rule, you need to include the media query:

@media screen and (min-width: 783px) {
   .primary-navigation ul ul {
      background-color: #FF0000;
   }
}

Would it be a problem if I replaced the green values with the red hexcode straight on the original code?

Also one last question. Do I have to save changes for each instance of the green in Custom CSS manager, or can I copy all 17 instances once and then save the changes?

Ok so I just dived in and changed the hexcode using the custom CSS plugin. Thank you crouchingbruin it worked great! However there is still another green hidden in the code – Hovering over post titles turns them green, the search icon is green, and the next page buttons at the bottom of page are still green when I hover over them.

What could I use to see what the greens hexcode is so I can use your instructions to change it?

Would it be a problem if I replaced the green values with the red hexcode straight on the original code?

You don’t want to do that because the next time the theme gets updated, either because of feature enhancements or security patches, your changes will get lost. The recommended method is either by using a child theme or using a CSS plugin (if your theme doesn’t have a Custom CSS option built in).

Do I have to save changes for each instance of the green in Custom CSS manager, or can I copy all 17 instances once and then save the changes?

You can copy all 17 instances all at once and save the changes, you don’t have to do it one at a time.

What could I use to see what the greens hexcode is so I can use your instructions to change it?

I use a web debugger called Chrome Developer Tools, which comes built-in with Chrome, but others use Firebug, which is a free extension that installs into Firefox. Or, if you know what to look for (i.e., you understand enough CSS/HTML to understand what the selectors mean), you can look at your style.css file and find the rule which changes the entry title link (the a element) when the mouse is hovered over it. If you have problems finding it, let me know and I’ll give you another clue (or I can give you the hex code to look for).

Sounds like you’ve made a lot of progress. Congratulations, I hope you are learning enough where you’ll be able to make other changes to your site. If you want a tutorial on CSS, there’s a good one here.