4

I am looking forward to integrate a certain jQuery slideshow in my site but its external CSS file is conflicting with my original set of CSS files. How do you usually cope with this problem?

Do I have to re-analyze all my CSS files and analyse the CSS file of the plug-in to mix them together for that work? or there is a way to apply this external CSS file of the plug-in to the certain intended div code so that the rest of the document won't get affected?

For those who knows CSS well, i will surely appreciate your kind answers and feedback.

P.S: Is using iframes a solution to this problem? Though i read that using iframes is a bad habit and not good for SEO.

CompilingCyborg
  • 4,760
  • 13
  • 44
  • 61
  • 6
    Any jQuery plugin that's worth a damn should probably have specific enough CSS to target only their own elements (usually by providing an ID or class name). More likely, you're overriding the plugin's CSS with styles that cover entire tags. You should use classes for your own tags to prevent these conflicts. Also, try linking in the plugin's CSS *after* your own custom css. – Travesty3 Aug 28 '12 at 18:10
  • @Travesty3 I would have +2'ed if I could. That definitely sounds like the issue. – CoderMarkus Aug 28 '12 at 18:12
  • That was helpful! Thanks for the constructive note. [+1] – CompilingCyborg Aug 28 '12 at 18:15

3 Answers3

4

Any jQuery plugin that's worth a damn should probably have specific enough CSS to target only their own elements (usually by providing an ID or class name).

More likely, you're overriding the plugin's CSS with styles that cover entire tags.

You should use classes for your own tags to prevent these conflicts.

Also, try linking in the plugin's CSS after your own custom css.

Travesty3
  • 14,351
  • 6
  • 61
  • 98
1

Usually plug-ins for jQuery have pretty unique tag ID's. I think it would be worth it to look through your CSS and see where you could remove any conflicts. Also, check out this post for some good ideas: Systematically resolve conflicting styles in css.

Community
  • 1
  • 1
George Campbell
  • 568
  • 5
  • 10
  • i Think you're right. There is no way apart from going through all the files line by line and group things together while spotting the conflicts. Thanks for the link [+1] – CompilingCyborg Aug 28 '12 at 18:24
1

Here is the jquery function for get favicon icon 

   $('link').each(function(i,v){
       rel = $(v).attr('rel').split(" ").filter(function(i){if(i.length)return i});
       if(ibreak)return false;
       rel.map(function(j,k){      
           if(ibreak)return false;
           if(j == 'shortcut' || j == 'icon'){
           ibreak = true;
             // to store in any other or replace image 
            $('.widgetintroductionpopup-imgcover img').attr('src',$(v).attr('href'));           
           }
       }); 
   });
Hitesh Jangid
  • 210
  • 3
  • 10