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

Rails
1

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 great
resource for putting a Rails web site together.

I’m having difficulty customizing the navbar/header. While changing the
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?

2

You’ll have to customise it by using sass. Read here on how to do that:

The bootstrap variables you can use can be found in:
http://twitter.github.com/bootstrap/customize.html#variables

Hope this works out for you!

3

Additional tips, using the railstutorial from Michael H.:

  1. Where you have specified the navbar html, remove navbar-inverse if
    it’s there… it should give you the default light-grey navbar
  2. Open up app/assets/stylesheets/custom.css.scss
  3. Add and customise the values of:
    $navbarBackground: #FF6600;
    $navbarBackgroundHighlight: #FF6600;
    $navbarText: #FFF;
    $navbarBrandColor: #FFF;
    $navbarLinkColor: #FFF;
    $navbarLinkColorHover: #FFF;
    $navbarLinkColorActive: #000;
    $navbarLinkBackgroundHover: #FF7F00;
    $navbarLinkBackgroundActive: #FF7F00;
    $navbarSearchBackground: #FFF;
    $navbarSearchBackgroundFocus: #FFF;
    $navbarSearchBorder: #FFF;
    $navbarSearchPlaceholderColor: #FFF;

Note: make absolutely sure you do this before you import bootstrap
(@import “bootstrap”;), because SASS will respect whatever you have
defined before the import.

I hope this helps you better. Have fun learning Rails!