My client is using these two plugins: - All in One Buttons - Genesis Design Palette

If you check this example page http://bsc.mustor.com/testing-buttons/ you will see that time text on the button is maroon and red (hover). It is supposed to be white.

The style sheet inserted by Genesis Design Palette is overriding All In One Buttons AND the theme styles. This is despite All In One Buttons style.css and the theme's style.css both referring specifically to the element in question aio-orange. Genesis Design Palette's style overrides with a more general style applied to entry content.

How can I give the correct styles precedence in this situation?


closed as off-topic by cybmeta, Pieter Goosen, TheDeadMedic, Robert hue, Mark Kaplun Mar 11 '15 at 19:00

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    The current style of the button comes from http://bsc.mustor.com/wp-content/uploads/gppro/gppro-custom-1.css?ver=1425965825. Maybe the plugin have a option for change this to your custom style or deactivate this style. – bueltge Mar 10 '15 at 7:57
  • 1
    I don't feel this question was off topic, I do feel the powers that be dislike new users! Where else would you suggest asking a question specific to wordpress' handling of plugins and styles? A wordpress forum seems like the ideal location!!! – sammond Mar 17 '15 at 8:10

On the definition of the aio-orange button in the all-in-one-buttons/css/display.css?ver=4.1.1 add !important after the #FFF.

The color is overwritten because you load the AIO styles first and later some other style that overrides button styles or what not. With !important you can tell the browser to use that one even though it's not the latest definition.

So it would be like

a.aio-orange, a.aio-orange:link, a.aio-orange:hover, a.aio-orange:visited, a.aio-orange:active, a.aio-orange:focus {
color: #FFF !important;

Or something like that.

  • Not a problem. Altough again, not really a wordpress problem when addressed in the way I said :) – jimihenrik Mar 17 '15 at 8:23

Ideally one of those plugins would have an option to load their CSS file last or first. You'd want the AIO Button to load last.

Otherwise you could edit the CSS class with the color you want as '!important' like jimihenrik suggested, although that's not recommended for long term solutions.

Or you could overwrite the offending CSS style from Genesis Design Palette's style by being even more 'specific' then they are with your CSS rule.

Example of being more specific: Their code says:

body.gppro-custom .content > .entry .entry-content a { color: maroon; }

Your code can overwrite it by being more specific with the CSS rule:

body .content > .entry .entry-content .aio-button-center a { color: white; }

This will change all .aio-button-center links within the .entry-content to white. You can place this in any CSS file of yours... like your custom CSS for the theme.

For more info read this fun article on CSS Specificity: https://css-tricks.com/specifics-on-css-specificity/

  • 1
    thanks Sean. I ended up using !important as I simply couldn't get specific enough, even with what you had suggested. Cheers for your help. – sammond Mar 17 '15 at 8:09

Not the answer you're looking for? Browse other questions tagged or ask your own question.