CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapcustomization
jhsu802701
jhsu802701

Reputation: 571

Rails/Bootstrap: How do I change the black bar at the top?

Chapter 5 of railstutorial.org (http://ruby.railstutorial.org/chapters/filling-in-the-layout#top) talks about how to create a basic layout for a web site. I use it as a resource for putting a Rails web site together.

I'm having difficulty customizing the navbar/header. While changing the font color of the "sample app" logo is straightforward enough (just change the RGB setting of the color parameter under #logo), how do I change parameters in the rest of the header? How do I change that black bar to be some other color, such as dark blue/green/red/purple/brown/etc.? How do I change the color of the menu links (Home/Help/Sign Up) from the default gray to yellow? Or orange? Or some other color?

Upvotes: 0

Views: 1359

Answers (2)

rails_id
rails_id

Reputation: 8220

If you want to change color or customize style of twitter bootstrap (e.g header, link etc), you can use generator for twitter bootstrap..

Generator

Or if you don't know class/id potition of style, you can use inspect element on your browser and see element using class/id of style

Example

Header using blue color

.navbar-inner {
    min-height: 50px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #45aeea;
    background-image: -moz-linear-gradient(top,#54b4eb,#2fa4e7);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#54b4eb),to(#2fa4e7));
    background-image: -webkit-linear-gradient(top,#54b4eb,#2fa4e7);
    background-image: -o-linear-gradient(top,#54b4eb,#2fa4e7);
    background-image: linear-gradient(to bottom,#54b4eb,#2fa4e7);
    background-repeat: repeat-x;
    border: 1px solid #1990d5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54b4eb',endColorstr='#ff2fa4e7',GradientType=0);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
    box-shadow: 0 1px 4px rgba(0,0,0,0.065);
   }

Link header using white color

.navbar .nav>li>a {
   float: none;
   padding: 10px 15px 10px;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 1px 0 #ce4213;
}

Bootstrap themes

You can see some amazing bootstrap themes here

Upvotes: 0

Quazi Marufur Rahman
Quazi Marufur Rahman

Reputation: 2623

.navbar {
    .navbar-inner {
        background-color: #2c2c2c;
        background-image: none;
    }
}

Source Change background color in navbar fixed menu bar Bootstrap

You can take a look at this too.

Upvotes: 0

Related Questions