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