If you’re serious about WordPress development or are a web designer you’re probably already using child themes. To read more on this topic, please visit my Learn page.

As you may know, one of the advantages of child theme functionality is the ability to modify themes without fear of data loss when updating your themes. Style modifications, however, can be even applied to plugins directly via your child theme’s css if you know this one little trick. This way you won’t lose any changes next time you’re updating your plugins.

This is an example using the amazing Symple Shortcodes plugin by AJ Clarke from WPExplorer.com.

By default, the plugin’s testimonials shortcode outputs the author’s name in black color.

testimonial css1

The plugin’s own css code for author’s name in symple_shortcodes_styles.css looks something like this:

css1

Instead of changing the plugin’s css file, which would result in losing all the changes in the next plugin update, we’ll attempt to change the color by copying the same code into our child theme’s style.css file and changing its color value to #ffffff.

The problem, however, is that right now both rules (plugin’s and child theme’s css) are of equal value and the text color will simply remain black despite the child theme changes. The solution is to use the ( !important ; ) property in the child theme’s css file.

css2

Now the changes will be visible in the sidebar as seen in the picture below.

testimonial css 2