Community Forums › Forums › Archived Forums › General Discussion › Unable to change button colours in Whitespace Pro
- This topic has 4 replies, 2 voices, and was last updated 9 years, 4 months ago by adamjayc.
-
AuthorPosts
-
December 8, 2014 at 12:22 pm #133999adamjaycMember
Hi all,
I'm trying to edit button colours in the Whitespace Pro theme.
I've been directed by support as to where to edit this and I've updated this.
But the colours haven't changed, I'm told that I should contact my host because it must be a caching issue - I don't think that's the case and my host would never help me with this issue.
As an example I've added a button to the bottom of this page:
http://www.adamconnell.me/about/
I'm trying to change the colour to #FE5001 but one style element still shows the old colour (#fe9601).
When I use Chromes inspect tool to change the #fe9601 to the new colour, it also changes the header colour which is also controlled by the Customizer.
I know Whitespace is the first theme to use the WordPress Customizer to change colours so this has me thinking that it's an issue with the theme.
Can anyone confirm this? because I'm way out of my depth!
Or if anyone has a solution to this, that would be awesome.
I just want to change the button colour, that's it!
Thanks,
AdamDecember 8, 2014 at 12:43 pm #134003zubirdMemberHave you tried including only the background-color elements you wish to change, i.e. remove the .site-header reference in the style block, like below? You may need to include the !important property for specificity if fighting with other style sheets beyond your control.
Don't forget the hover color!
a.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.after-entry .enews,
.archive-pagination.pagination a,
.enews-widget input[type="submit"],
.nav-secondary {
background-color: #fe9601 !important;
}a.button:hover,
button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.after-entry .enews-widget input:hover[type="submit"],
.archive-pagination.pagination a:hover {
background-color: #00b796;
}December 8, 2014 at 12:46 pm #134005adamjaycMemberAh, looks like you need to add !important to CSS to override the customizer.
December 8, 2014 at 12:54 pm #134006zubirdMemberI removed .site-header class from the style block. Here is the original, emphasis mine...
a.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.after-entry .enews,
.archive-pagination.pagination a,
.enews-widget input[type="submit"],
.nav-secondary,
.site-header {
background-color: #fe9601;
}December 8, 2014 at 2:13 pm #134009adamjaycMemberThanks for your help!
In the end I was able to get it to work with just the !important added to the background colours:
button, input[type="button"], input[type="reset"], input[type="submit"], .button { background-color: #FE5001 !important; border: 0; border-radius: 3px; color: #fff; cursor: pointer; font-size: 18px; font-weight: 400; letter-spacing: 1px; padding: 20px; text-transform: uppercase; -webkit-font-smoothing: antialiased; } button:hover, input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], .button:hover { background-color: #C53D00 !important; color: #fff; }
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.