Ändern der Navbar Farbe in Twitter Bootstrap 2.3.2

Question

Ich habe andere Beiträge zu dieser Frage untersucht, aber ich kann immer noch nicht in der Lage sein, die Hintergrundfarbe der Navbar in Twitter Bootstrap zu ändern. Ich benutze Version 2.3.2. Ich habe alles getan, was von tapme in diesem Beitrag beschrieben Change navbar color in twitter bootstrap 2.0.4. Hier ist das CSS, das ich verwende, um die ursprüngliche bootstrap.css-Datei zu überschreiben.

.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;} 

Das einzige, was sich ändert, wenn ich dies ausgeführt ist, dass die aktive „Heimat“ Link, um die # c79810 Hintergrundfarbe hat. Alles andere hat immer noch die standardmäßige schwarze Hintergrundfarbe.

Auch ist mir wirklich egal, einen Gradienten zu haben, wenn es nicht erforderlich ist. Nur eine solide Hintergrundfarbe ist in Ordnung.

Irgendwelche Ideen, was ich falsch mache? Vielen Dank!

Answer 1

(für Bootstrap Twitter-3 finden Sie unter: Change navbar color in Twitter Bootstrap 3)

der die Steigung nicht Vergessen Sie entfernen, indem Sie background-image: none; Einstellung

Beispiel CSS-Code: (siehe: 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; 
} 

Fügen Sie diesen Code nach dem CSS-Code des Bootstrap hinzu

Verwenden Sie weniger

Sie könnten auch überlegen, Ihre eigene Version zu kompilieren. Versuchen Sie http://twitter.github.io/bootstrap/customize.html (die einen separaten Abschnitt für die Navbar-Einstellung hat) oder laden Sie Ihre eigene Kopie von: https://github.com/twitter/bootstrap. Sie finden die Einstellung für die Navigationsleiste in variables.less. navbar.less wird verwendet, um die Navigationsleiste zu kompilieren (hängt von variables.less und mixins.less ab).

die Einstellung unten verwenden werden Ihnen die gleichen Farbänderungen geben wie zuvor, aber stabile und mit Steigungen:

// 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 

HINWEIS gibt es keine Variable, die die Hintergrundfarbe der Marke zu setzen. Um diese Hintergrundfarbe zu ändern Sie hinzufügen haben so etwas wie:

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

See: http://bootply.com/66399

Answer 2

Sie müssen überschreiben sie mit einigen CSS. Achten Sie darauf, diese Lasten unter Bootstrap css Dies wird in der Navigationsleiste braun

.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; 
}