Every now and then I come across a plugin that’s a little too big for its britches in the CSS department. What do I mean? The default plugin styles are written in a way that make for an ugly integration with a site.
The worst offenders even go so far as to use !important in the CSS, forcing you to resort to CSS worst practices (i.e. countering with !important and overly specific selectors) to override the plugin styles.
Last week I wrote a tutorial on how to solve this problem by switching the load order of style sheets to bring in your theme’s style sheet last of all. The result takes advantage of the cascading styles, enabling you to cleanly overcome (or trump) plugin styles via custom styles in your theme.
@cdils brilliant! Thanks. You’ve just saved me hours tomorrow!
— Jo Waltham (@CalliaWeb) December 18, 2013
The tutorial was enthusiastically received and Gary Jones gave me a nudge to turn it into a plugin. I’ve wanted to make a contribution to the WordPress plugin repository anyway, so…
I’d like to introduce you to Genesis Style Trump.
The Genesis Style Trump plugin is now available for download. Although my tutorial meant to solve the problem of working specifically with WooCommerce styles, Genesis Style Trump will let you conquer styles from any plugin.
If you use the plugin, I’d encourage you to leave a brief review – it’ll help others decide if the plugin is a good solution for them. And while you’re in a review-leaving mood, go ahead and rate/review all your favorite plugins. Trust me, it’s appreciated. 🙂
Hi Carrie,
I learned a lot from your tutorials and tips! Thank you!
I’m using the Style Trump plugin for a client with the Altitude Theme as a base and WooCommerce.
It works fine accept for the ‘Front Page Back images’ in the Appearance editor.
The bg images are loaded in the left column of the editor, but they are not shown beneath the gradient.
When i deactivate Style trump, the bg images are displayed.
Maybe something to look at for the next update?
Hi Esther,
Yes! This is a known bug and I’m working to get an update out. I can point you to some unfinished code if you need it in a hurry and are comfortable tweaking. Otherwise, hoping to have the update pushed out next week.
Cheers,
Carrie
Hi Carrie,
I am using a plugin in a design and it is using !important where I want to make changes…of course. I installed your Trump plugin but I still can’t trump the plugin’s CSS. Am I missing something? Thanks!
Hey Susan,
Ugh. If the plugin is using
!important(which is a ridiculous practice), then you’ll either have to beat the specificity of the selector or use an!importantyourself. In the case of the later, your!importantwill load after the plugin’s, so you’ll be able to trump it. I hate having to do that, but it may be your only option.Cheers,
Carrie
Hi Carrie,
That’s the weird part. I was using !important and it still wouldn’t work even with the trump plugin installed. I ended up not using the plugin (I can’t even remember which one it was now or which website I was doing lol) as I didn’t like them using !important in the plugin either.
Thanks for answering too! I have learned a lot from you over the years and appreciate every word you say. Thanks again, Susan
Hi Carrie, is there any way to asynchronously load style.css of genesis child theme to optimize the page performance?
Also PageSpeed insights showing two sets of google fonts one with http and other with https. Here is the screeshot http://prntscr.com/c829t1.
I’m not 100% sure, but I don’t think you’d want to async your primary stylesheet since that’s needed for the page to render. Are you minifying your style.css? That could certainly help.
I’m not sure why you’re getting the dual Google fonts load? (I couldn’t see your screenshot)
When plugin installs and activates it blank screens me and informs of “No Valid Header” in plugin?
Hey Michael, here’s how to fix:
https://wordpress.org/support/topic/invalid-plugin-header-4/