Change Button Colours

Hey,
I took a quick look, and I assume you’re using some custom css? If not, you might want to, or create a child theme, so your changes won’t be lost when there are updates for your theme ??

The css responsible for your main nav is:

.main-small-navigation ul > .current_page_item, .main-small-navigation ul > .current-menu-item {
    background: none repeat scroll 0 0 #6E6E6E;
}
.navigation-main {
    background: none repeat scroll 0 0 #6E6E6E;
}
.navigation-main ul {
    margin: 0 30px;
}
.navigation-main a {
    color: #FFFFFF;
    padding: 10px;
    position: relative;
}
.navigation-main li {
    background: none repeat scroll 0 0 #6E6E6E;
}
.navigation-main li:hover {
    background: none repeat scroll 0 0 #808181;
}
.navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent {
    background: none repeat scroll 0 0 #00CBC5;
}
.navigation-main ul > .current_page_item:hover, .navigation-main ul > .current-menu-item:hover, .navigation-main ul > .current-post-ancestor:hover, .navigation-main ul > .current-menu-ancestor:hover, .navigation-main ul > .current-menu-parent:hover, .navigation-main ul > .current-post-parent:hover {
    background: none repeat scroll 0 0 #00CBC5;
}
.navigation-main ul > .current_page_item:hover a:after, .navigation-main ul > .current-menu-item:hover a:after, .navigation-main ul > .current-post-ancestor:hover a:after, .navigation-main ul > .current-menu-ancestor:hover a:after, .navigation-main ul > .current-menu-parent:hover a:after, .navigation-main ul > .current-post-parent:hover a:after {
    border-top-color: #00CBC5;
}
.navigation-main ul > .current_page_item ~ .current_page_item a, .navigation-main ul > .current-menu-item ~ .current-menu-item a, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
    background: none repeat scroll 0 0 #00CBC5;
}
.navigation-main ul > .current_page_item ~ .current_page_item a:hover, .navigation-main ul > .current-menu-item ~ .current-menu-item a:hover, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a:hover, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a:hover, .navigation-main ul > .current-post-parent ~ .current-post-parent a:hover {
    background: none repeat scroll 0 0 #00CBC5;
}
.navigation-main ul > .current_page_item a:after, .navigation-main ul > .current-menu-item a:after, .navigation-main ul > .current-post-ancestor a:after, .navigation-main ul > .current-menu-parent a:after, .navigation-main ul > .current-post-parent a:after {
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    border-top: 6px solid #00CBC5;
    bottom: -6px;
    content: "";
    font-size: 0;
    left: 50%;
    line-height: 0;
    margin-left: -6px;
    position: absolute;
    width: 0;
    z-index: 9995;
}

#00CBC5 is your current page colour, #6E6E6E is your dark grey, and #808181 is your lighter grey(hover) colour. All you need to do is use your desired colours in place of those codes ?? If the code above isn’t already apart of your custom css, you only need to copy the relevant sections to apply changes.

Hope that helps! Let me know if you need anything else (I tried to explain the best I could but I’ve been a bit under the weather today)

Thanks,….but

I wasn’t talking about my nav. buttons. I was talking about the “Continue Reading” and “Subscribe” button.

Similar situation then, with having a custom stylesheet or child theme.

The css would be something like:

button, input[type="button"], input[type="reset"], input[type="submit"], .button-primary, a.button-primary, .wpm-button-primary, a.wpm-button-primary {
    background: #yourcolour;
    color: #yourtextcolor;
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover, .wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active {
    background: #yourhovercolour;
}

Neat idea, btw. Hope it all works out!

.button, input[type=”button”], input[type=”reset”], input[type=”submit”],
.button-primary, a
.button-primary,
.wpm-button-primary, a
.wpm-button-primary {
background: #fa5858;
color: #ffffff;
}

.button:hover, input[type=”button”]:hover, input[type=”reset”]:hover, input[type=”submit”]:hover,
.button-primary:hover, a
.button-primary:hover,
.wpm-button-primary:hover, a
.wpm-button-primary:hover, button:focus, input[type=”button”]:focus, input[type=”reset”]:focus, input[type=”submit”]:focus, .button-primary:focus, a
.button-primary:focus,
.wpm-button-primary:focus, a
.wpm-button-primary:focus, button:active, input[type=”button”]:active, input[type=”reset”]:active, input[type=”submit”]:active,
.button-primary:active, a
.button-primary:active,
.wpm-button-primary:active, a
.wpm-button-primary:active {
background: #00cbc5;
}

The code you gave me only changed the colors of the subscribe button. It does not change the colours of the “Continue reading” button.

Please help.

Are you changing theme files or adding your changes to custom CSS?

Please also use the code buttons when posting code on these forums.

sorry

I am using the custom CSS

Try adding this:

.button-primary, a.button-primary {
    background-color: #fa5858;
}

Thanks it worked ??

I found just changing my continue reading button background hover colour worked with this: just change the RGB colour numbers at the end line.

}

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover, .wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active {
    background: none repeat scroll 0% 0% rgb(117, 119, 120);
}

}

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover, .wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active {
    background: none repeat scroll 0% 0% rgb(117, 119, 120);
}