CODEWITHSUNDEEP
ruby-on-railscssruby-on-rails-3twitter-bootstrapless
geeky_monster
geeky_monster

Reputation: 8792

How to customize Twitter bootstrap while using Rails 3.x?

I am using Rails 3.2 and I integrated Twitter bootstrap into my Rails application by using the twitter-bootstrap-rails gem as instructed in the RailCasts here - http://railscasts.com/episodes/328-twitter-bootstrap-basics .

I added a navbar to my application .

I would like to know how do I remove the gradient from the navbar ? What should I edit and where ?

Upvotes: 8

Views: 5304

Answers (3)

Jason
Jason

Reputation: 881

You can also handle it through modifying the less variable @navbarBackgroundHighlight. If you set that to the same color as navbarBackground, then you will have no gradient. For example:

@navbarBackgroundHighlight: white;
@navbarBackground: white;

Viola. No gradient, and no mucking with the internals of the CSS.

Upvotes: 11

Ian Bradbury
Ian Bradbury

Reputation: 1475

There are 2 really good references for the Bootstrap LESS variables.

Upvotes: 1

Andres I Perez
Andres I Perez

Reputation: 75379

The bootstrap gradients come from the .navbar-inner class and can be removed by resetting the background-image properties set on the bootstrap.css stylesheet. I recommend you reset them on your own stylesheet, this way when the bootstrap is updated you won't have to come back and redo your changes, so place the following on your stylesheet to remove the gradients:

CSS

.navbar-inner {
  background-color: #2c2c2c; /* place your solid color here */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

Upvotes: 6

Related Questions