CODEWITHSUNDEEP
javascripthtmlcss
Crystal
Crystal

Reputation: 29448

Customizing existing twitter bootstrap modal styles

So I'm pretty new to CSS. I know there is some inheritance, but besides font, I'm not always sure where it applies. So what I'm trying to do, is modify the twitter bootstrap modal class. There is a backbone view that is being shown currently with these classes:

modal hide fade

What I want to do is extend the width and height of the modal view but keep all of the other modal CSS properties in tact. Is there a way to do this? In my own local.less file for my project, I first tried doing what I googled which was How can I change the default width of a Twitter Bootstrap modal box?

But my view wasn't modal anymore. It wasn't centered and didn't have a darkened backdrop. So I then thought I could just copy the .modal class from twitter bootstrap into my local.less file, and then change the width/height. So I tried that with this:

.modal-width-half (@modalWidth: 50%) {
  top: 50%;
  left: 50%;
  z-index: 1050;
  overflow: auto;
  width: @modalWidth;
  margin: -250px 0 0 -@modalWidth / 2;
  background-color: white;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999999;
  /* IE6-7 */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}

And again, the style isn't modal. Is there something I'm missing or doing incorrectly? Thanks.

Upvotes: 1

Views: 5545

Answers (1)

mjallday
mjallday

Reputation: 10072

I just did this and can share the line you're missing.

In my commit to change the width of the modal I had to change the width property and also the margin-left property. By changing both of these you will keep the form centered.

.modal {
  width: @modalWidth;
  margin-left: -@modalWidth / 2;
}

of course this will apply to all modals on your site, if you want to apply it to just one modal then you can customise the class name e.g. 

.my-modal { 
  width: @modalWidth; 
  margin-left: -@modalWidth / 2; 
}

You can then refer to this in your html like:

<div class="modal fade open my-modal">...</div>

Just make sure the definition for .my-modal comes after .modal in your less/css file or the definition will be overridden by the bootstrap style.

Upvotes: 1

Related Questions