Problem rebooting Bootstrap CSS

Question

Problem rebooting Bootstrap CSS

I was looking for a network to override boot CSS, but I still need it to work for me. I am trying to change the default color navbarwithout editing the file bootstrap.css.
I tried putting the following into my head after loading bootstrap.css:

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

This did not work, so I tried putting it in my own CSS file and then loaded this stylesheet like this:

bootstrapOverload.css

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

_Layout.cshtml

<link rel="stylesheet" href="Content/bootstrap.css">
<link rel="stylesheet" href="Content/bootstrapOverload.css">

If this did not work, I tried adding a custom class to the element

_Layout.cshtml

<div class="navbar-inner navbar-override"> <!-- added navbar-override -->

bootstrapOverload.css

.navbar-override {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0);
}

Am I doing something wrong? I would really like to know how to do this, if possible.

+5

css twitter bootstrap

Jeff Sep 29 '12 at 23:23

source share

6 answers

MitulP91 · Answer 1 · 2013-08-18T16:02:51+0000

!important CSS, ?

- :

.navbar-override {
    background-color: #006633 !important;
    background-image: -moz-linear-gradient(top, #006633, #006633) !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)) !important;
    background-image: -webkit-linear-gradient(top, #006633, #006633) !important;
    background-image: -o-linear-gradient(top, #006633, #006633) !important;
    background-image: linear-gradient(to bottom, #006633, #006633) !important;
    border-color: #006633 !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0) !important;
}

, , , .

Mark · Answer 2 · 2012-09-29T23:29:42+0000

CSS :

background-image: -mox-linear-gradient(top, #006633, #006633);

, :

background-image: -moz-linear-gradient(top, #006633, #006633);

CSS, , .

Willy Nilley · Answer 3 · 2013-03-16T06:12:28+0000

, : [

, .navbar-inverse

.css - , :

.navbar-inverse .navbar-inner {
background-color: #586214;
background-image: none;
}

Krycke · Answer 4 · 2012-09-29T23:29:22+0000

css, , , css, .

, body .navbar-inner, body .navbar-inner , , , , div.navbar-inner, .

, bootstrap.css, , css , . , , Chromes firebug Firefox.

actraub · Answer 5 · 2013-08-18T15:44:51+0000

, LESS-.

http://bootstrap.lesscss.ru/less.html

//Navbar

@navbarBackground: @Color1;
@navbarBackgroundHighlight: @Color1;
@navbarBrandColor: #FFFFFF;
@navbarLinkColor: #FFFFFF;
@navbarLinkColorHover: #FFFFFF;
@navbarLinkColorActive: #FFFFFF;
@navbarInverseBackground: #FFFFFF;
@navbarInverseBackgroundHighlight: #FFFFFF;
@navbarInverseBorder: #FFFFFF;
@navbarInverseLinkColorHover: @Color7;
@navbarInverseLinkColorActive: @Color11;
@navbarInverseLinkColor: @Color1;

Dxg125 · Answer 6 · 2018-02-15T10:44:10+0000

Solve your problem by copying the CSS class and renaming it. Then use this class :)

I know it is boosted, but watch it work

Example:

.drop-down {...}     /* is from bootstrap */
.drop-down-new {...} /* Your new Class that works*/

Problem rebooting Bootstrap CSS

More articles: