wordpress plugin and theme css colide

Question

I have a small problem! Im using a Wordpress theme, and a Plugin from a real-estate system developer witch fetches data from the system..

IF i use the theme the real-esate system recommends everything works smoothly. But i want to use a nother theme.

The result of this is that the data fetched from the Plugin is not looking like intendend. The Theme CSS takes over hand.. and uses the themes css on sertain elements like .li and .ul...

Is there a way to solve this? I dont want to use iframes. Can i e.g create a div, and then apply the Plugins style.css to that div and to that div only. and in just that div override the css from the theme?

if u want to look at source and css and so on here is the link: http://hogmans.nu.temp-url.se click on "till salu"..

if u want to look where the plugin is presented correctly http://hogmans.mspecsweb.se/till-salu

u se the problem?

Answer 1

looks like it is using two different css framework..

try adding this line of code into your header

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

It will fix the middle part for sure... but not so sure what it will do to your site as a whole..

also there is no easy fix to this other than using a theme that is powered by the newest version of twitter boostrap or create your own custom mobile css to make those single lines into blocks again.

Answer 2

You have a few options:

• If you save the stylesheet you want into your theme's core files and import it in your theme's header AFTER all the other stylesheets, those styles will take precedence over the theme's styles (though this might not work for all of the styles since it depends on how the theme's stylesheet is coded - for example if there are any !important declarations).
• You can also copy all of the styles from the one stylesheet and paste it at the bottom of the other, but you run into the same issues as the first option - it will most likely work, but it might not render as expected. The same goes for adding the <style> tags to the header.
• The most reliable option you have is to figure out what styles you need from your preferred styles and create your own stylesheet that will render certain elements the way you need it to so you can control and adjust the css specificity as needed. If you need to, you can add a div around what you need to style, give it an id, and use that id before your elements in the stylesheet. Usually is is not wise to use ids for css, but since you are trying to override styles, this could be a quick and easy way of doing so.

**If you are using a theme that you did not build on your own, your theme might update. Any changes you make to the theme's files will be overridden. You will need to create a child theme to add or edit any of the theme's files.