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?
Additional tips, using the railstutorial from Michael Hartl:
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!