Zmiana koloru paska na pasku Bootstrap 2.3.2

Question

Przyjrzałem się innym postom dotyczącym tego pytania, ale nadal nie mogę zmienić koloru tła paska nawigacyjnego na Twitterze Bootstrap. Używam wersji 2.3.2. Zrobiłem wszystko, co opisał baptme w tym poście: Change navbar color in twitter bootstrap 2.0.4. Oto CSS, którego używam do przesłonięcia oryginalnego pliku bootstrap.css.

.navbar-inner { 
    background: #eab92d; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eab92d', endColorstr='#c79810',GradientType=0); /* IE6-8 */ 
    } 

    .navbar-inner, .navbar .btn-navbar { 
    background: #eab92d; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eab92d', endColorstr='#c79810',GradientType=0); /* IE6-8 */ 
    } 

    .navbar .divider-vertical { 
    background-color: #c79810; 
    border-right: 1px solid #eab92d; 
    } 

    .navbar .nav .active > a, .navbar .nav .active > a:hover { 
    background-color: #c79810; 
    } 

    .navbar .nav > li > a { 
    color: #f9ed9d; 
    } 

.navbar-fixed-top .brand { 
    color: #634c08;color: #f4dc87; 
    } 

    .navbar .nav > li > a:hover {color:white;} 

    .navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;} 

Jedyną rzeczą, która się zmienia, gdy biegnę to, że aktywny „home” link ma kolor # c79810 tła. Wszystko inne ma domyślnie czarny kolor tła.

Co więcej, naprawdę nie zależy mi na tym, aby mieć gradient, chyba że jest to wymagane. Tylko solidny kolor tła jest w porządku.

Jakieś pomysły dotyczące tego, co robię źle? Dzięki!

Answer 1

(dla Twittera Bootstrap 3, patrz: Change navbar color in Twitter Bootstrap 3)

nie zapomnij usunąć gradient przez ustawienie background-image: none;

Przykładowy kod CSS: (patrz: http://bootply.com/66394)

/* set the background-color to red */ 
.navbar-inner { 
    background-color: red; 
    /* remove the gradient */ 
    background-image: none; 
    /* set font color to white */ 
    color: white; 
} 

/* menu items */ 

/* set the background of the menu items to pink and default color to white */ 
.navbar .nav > li > a { 
    background-color: pink; 
    color: white; 
} 

/* set hover and focus to lightblue */ 
.navbar .nav > li > a:focus, 
.navbar .nav > li > a:hover { 
    background-color: lightblue; 
    color: white; 
} 

/* set active item to darkgreen */ 
.navbar .nav > .active > a, 
.navbar .nav > .active > a:hover, 
.navbar .nav > .active > a:focus { 
    background-color: darkgreen; 
    color: white; 
} 

/* set font color and background of the project name (brand) */ 
.navbar .brand { 
    background-color: orange; 
    color: navy; 
} 

Dodaj ten kod po bootstrapie CSS

Używanie Mniej

Można również rozważyć skompilowanie własnej wersji. Wypróbuj http://twitter.github.io/bootstrap/customize.html (który ma osobną sekcję dla ustawienia paska nawigacyjnego) lub pobierz własną kopię z: https://github.com/twitter/bootstrap. Ustawienia paska nawigacyjnego znajdziesz w variables.less. navbar.less służy do kompilowania navbara (zależy od variables.less i mixins.less).

Stosując ustawienie pokazane poniżej daje te same zmiany kolorów jak wcześniej, ale bardziej stabilny i gradienty:

// Navbar 
// ------------------------- 
@navbarCollapseWidth:    979px; 
@navbarCollapseDesktopWidth:  @navbarCollapseWidth + 1; 

@navbarHeight:     40px; 
@navbarBackgroundHighlight:  #FF0000; // red 
@navbarBackground:    darken(@navbarBackgroundHighlight, 5%); 
@navbarBorder:     darken(@navbarBackground, 12%); 

@navbarText:      #fff; //white 
@navbarLinkColor:     #fff; 
@navbarLinkColorHover:   #fff; 
@navbarLinkColorActive:   #fff; 
@navbarLinkBackgroundHover:  #ADD8E6; //lightblue 
@navbarLinkBackgroundActive:  #006400; //darkgreen 

@navbarBrandColor:    #000080; // navy 

UWAGA brak jest zmienna, aby ustawić kolor tła marki. Aby zmienić kolor tła będzie trzeba dodać coś takiego:

.navbar .brand { 
    background-color: #FFA500; // orange 
} 

zobacz: http://bootply.com/66399

Answer 2

Będziesz musiał zastąpić go jakimś CSS. Upewnij się poniżej bootstrap css ten ładunki uczyni brązowej NavBar

.navbar { 
    background-color: #442a13; 
} 

/* set the background-color to red */ 
.navbar-inner { 
    background-color: #442a13 !important; 
    background-image: -webkit-linear-gradient(top, #442a13 0%, #291306 100%)!important; 
    background-image:   linear-gradient(to bottom, #442a13 0%, #291306 100%)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#442a13', endColorstr='#291306', GradientType=0)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    background-repeat: repeat-x; 
    color:#fff; 
    border: none; 

} 

.navbar-inverse .nav .active>a, .navbar-inverse .nav .active>a:hover, .navbar-inverse .nav .active>a:focus{ 
    background-color: #291306; 
    color:#fff; 
} 

.dropdown-menu{ 
    background-color: #371c09; 
    padding-left: 5px; 
} 

.navbar-inverse .brand, .navbar-inverse .nav>li>a{ 
    color: #fff; 
} 

.navbar-inverse .nav .dropdown-header{ 
    color:#ccc; 
} 

.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle{ 
    background-color: #291306; 
} 

.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a{ 
    color:#fff; 
} 

.nav-collapse .nav>li>a:hover, .nav-collapse .dropdown-menu a:hover{ 
    background-color: #371c09 !important; 

    background-image: -webkit-linear-gradient(top, #371c09 0%, #291306 100%)!important; 
    background-image:   linear-gradient(to bottom, #371c09 0%, #291306 100%)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#371c09', endColorstr='#291306', GradientType=0)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    background-repeat: repeat-x; 
    color:#fff; 
} 

.navbar-inverse .nav li.dropdown>.dropdown-toggle .caret { 
border-top-color: #fff; 
border-bottom-color: #fff; 
} 

.navbar .nav li.dropdown>.dropdown-toggle .caret{ 
border-top-color: #fff; 
border-bottom-color: #fff; 
} 

.navbar-inverse .divider-vertical { 
border-right-color: #371c09; 
border-left-color: #291306; 
}