CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootbox
Dan Cundy
Dan Cundy

Reputation: 2849

How can i stop a custom CSS from overwriting my styles?

Problem

I have a site built with my own styles and it looks just the way I like it. However, I want to add extra functionality by adding a custom dialog box downloaded from BootBox.

However the extensive style sheet that comes with it and is needed absolutely murders my site, butchering it in every way.

Is there anyway i can stop this by making the BootBox.css only apply to its little part of my code and not all of my site?

Upvotes: 1

Views: 315

Answers (4)

Leonardo Delfino
Leonardo Delfino

Reputation: 1498

You can use LESS wich is what bootstrap uses.

Example:

#ContainerWithBootboox {      
   @import (less) "bootstrap.css"; //import bootstrap
}

Doc: http://lesscss.org/

Upvotes: 3

Dio Phung
Dio Phung

Reputation: 6272

Not labour intensive, with the help of LESS or [SASS] (http://sass-lang.com),

If you use LESS, just wrap all bootbox css rules inside a parent root. For e.g.: 

.bootbox {
    /*move all bootbox CSS rules here*/
    h1 { color: inherit;}
    .someclass { color: red;}
}

It will be compiled into:

.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}

Upvotes: 1

essmahr
essmahr

Reputation: 676

If you only want the bootbox css to target a specific div, you'd need to prepend each bootbox css rule with the class of the target div.

So if you had

<div class="bootbox">
   <!-- bootbox html here -->
</div>

and the bootbox styles were

h1 {
   color: red;
   padding: 0;
}

h2 {
   color: blue;
   margin: 10px 0;
}

Then you'd need to change it to

.bootbox h1 {
   color: red;
   padding: 0;
}

.bootbox h2 {
   color: blue;
   margin: 10px 0;
}

That said, if the bootbox css is thousands of lines of code then this may be labour intensive. It might be a matter of finding which rules specifically are borking your code and adding a specifier class to only those rules.

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

You could put the BootBox code within an iframe. The css loaded by the iframe would only apply to the content within the iframe. I have used this strategy to only apply bootstrap to certain areas of my page such as tables, while leaving the rest of the page untouched.

Upvotes: 0

Related Questions