Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

stop theme css style conflicting with plugin css WordPress

  • SOLVED

Hello

Please take a look at the following url, you will see that in this example that there are a number of cases where the plugin styling for the filter is being overridden by the theme

http://grjo.wpengine.com/job/test/

Just a few examples, there are many other similar issues through the theme such as on the individual job page
- You can see bullet points by the checkboxes, e.g. by Freelance
- Light grey box with the checkboxes (job_types class) has a left margin
- Hovering over the Test job you can see that there is a left margin

Ideally in cases where the plugin styling needs to be used, I would like this to take priority over the theme. Is there any simple way to ensure that this happens? I have tried changing the plugin css to load after the theme, but it does not resolve it.

Things I would rather not do
- Rename the classes in the plugin etc, I would rather not touch any files here
- Go through and add !important on everything (but guess this could be a last resort?)

The plugin is WP Job Manager
https://github.com/mikejolley/WP-Job-Manager

Open to any suggestions
Thanks!
Nick

2014-03-15 by npeplow

Answers (4)

2014-03-15

Sai kumar answers:

Hi,

If you wish to add something in your theme style to fix this issue, then please add the below code, it will work.


#posts .post-content ul, #posts .post-content ol{
margin-left:0;
}
.job_filters .job_types li{
list-style:none;
}
.job_types{
background:none;
}


The issue persist with the wp job manager. I fixed the same issue before. Hope this will help you.

Thanks
Sai

npeplow comments:

Hi Sai

Thanks for the solution. I agree that this will likely work for that page, but I'm worried that in the other pages that the plugin is displayed on (for example click through to the single job page) there will be other issues. I'll endlessly be adding additional css changes etc

Do you know if its possible to fix this by changing perhaps the order that css files are loaded?

Sai kumar comments:

Hi,

Thanks for your reply. I think it will not be fixed with changing the css order. I think we need to fix with writing some custom css to fix the issue. Did you write any css in style.css, I just found a class #posts .post-content ul{ list-style:inside disc; } on the line number 693 on the theme css, and this causing the bullets on the <li> components. Need to fix so on. I think this is the only way, and i just fixed this by writing custom css in my past job.
This issue causing because of the plugin css. The plugin css doesn't contains the css property like list-style etc. So the only solution for this is to put the fix for style in a custom manner, I think.

If you need help, please do contact me, am always here.

Thanks,
Sai

npeplow comments:

Thanks Sai, im going with this solution (simons loading order also)

Sai kumar comments:

Thanks.!

2014-03-15

Simon Ng answers:

Hello! Nick,

I have just visited your page and cannot found the problem you have mentioned, perhaps, you are in logged in mode?
You may PM me a test account if you like.
Many thanks.

npeplow comments:

Hi Simon

I have logged out and opened the site in chrome incognito mode, its still showing

Attached is a screenshot showing the issue, see the bullet point next to freelance?