Sneaky WordPress Plugin Developers Blocking CSS Edits with JavaScript ?

I just ran into a hair pulling experience working on a child theme for a customer. angry

There is a small gallery section needed for the five partners on the site. The gallery has a picture of each partner in a block on the right, then a short bio on the right with a link to their page and a link to their LinkedIn profile.

I found a very good gallery plugin on the Plugins site. Of course, it had limited features because free is such a bad business model.wondering 

The pictures the client supplied were too low resolution for the gallery’s default image css width. So I tried a few regular Child Theme CSS tricks but they didn’t work because it “looked” like they were enqueing a stylesheet later than the child theme css and with !important. So, OK, I’ll fix that by enqueing a custom theme for the styling after all the the css sheets:


//enqueue style override for portfolio

add_action('wp_enqueue_scripts', 'mg_styles', 9999);
function mg_styles() {
	wp_register_style('mg-portfolio.css', get_stylesheet_directory_uri().'/mg-portfolio.css'  );

surprisedWell cr*p. That didn’t work. WTF is going on? Aha, says I to myself as I’m looking at their plugin structer, they are inserting the CSS with JavaScript. So I checked out the JavaScript. Yep. They were inserting a <style> section right in the middle of the content section!

Well, tricky / clever plugin devs, two can play that game. I’ll just insert

<?php the_content(); ?>
<!--Style to override the !important styling inserted by the gallery plug-in-->
<style type="text/css">
.portelement_2 div.left-block_2 .main-image-block_2 img {
    margin: 0px !important;
    padding: 0px !important;
    width: 140px !important;
    height: auto;

Yep – that worked!
Overwriting WordPress JavaScript Inserted CSS