Plugin CSS Class selector is to generic and conflicts with theme

This is a great example of why plugins and themes should strive to use unique CSS names

<img class="alignnone size-medium wp-image-1359" alt="Capture2" src="http://www.qtree.com/wp-content/uploads/2014/01/Capture2-300x110.png" width="300" height="110" />

 

Notice the submit button for the forum plugin.

<img class="alignnone size-large wp-image-1360" alt="Capture" src="http://www.qtree.com/wp-content/uploads/2014/01/Capture-1024x351.png" width="1024" height="351" />

 

Inspecting reveals a common name used to define the CSS  (p.submit)

granted the theme made the same mistake and this particular theme is poorly codded anyway.

 

I need to fix this this afternoon, do you recommend modifying the theme or the plugin?

  • Patrick

    Hi there @qtree-systems

    I hope you are well today!

    You shouldn't need to modify either one.

    You can override the theme styling by getting more specific by declaring a parent element in your selector.

    I just logged into your site via Facebook login, and took a look at your forums page. The actual form used doesn't even have an ID or class assigned either. So the only way would be to declare the form itself in the selector.

    Try adding the following to the style-sheet of your theme:

    form p.submit {background:none;}

    If you don't want to edit the theme style-sheet, try with a handy little plugin like this one which enables you to add custom CSS willy-nilly to override plugin & theme styles:
    http://wordpress.org/plugins/my-custom-css/

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.