Categories
css twitter-bootstrap

Twitter Bootstrap overwriting css

I am using Twitter Bootstrap with WordPress.
Bootstrap outputs the following css in bootstrap.css

.navbar-inverse .navbar-inner {
background-color: #1b1b1b;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff222222", endColorstr="#ff111111", GradientType=0);
}

If I want to override this code in my style sheet, do I have to specify every class element?
For example, if i want the nav bar to be totally black – no gradients etc – is there a quick way to do it without copying every class attribute from above and changing every hex value to #000000?

I believe this would be good enough to do the following to override the background properties baked into Twitter Bootstrap:

 .navbar-inverse .navbar-inner { background: none }

The background property is considered short hand so that simple declaration should work properly.

The background property’s shorthand usage is as such:

 .navbar-inverse .navbar-inner { background:#000 url('/path/to/image.png') no-repeat 100px 100px scroll; }

This one simple property can declare and override background-color, background-image, background-repeat, background-position, background-attachment, and background-clip all at once!

Also!! It may be a good idea to make the selector within your stylesheet a bit more specific to ensure that you don’t run into specificity issues.

Here’s a jsfiddle example: http://jsfiddle.net/f5Yyj/1/