I have searched the net for a way to override bootstraps CSS but have yet to have it work for me. I am trying to change the default navbar
color without editing the bootstrap.css
file.
I have tried putting the following in the 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 its own CSS file and then loading that stylesheet like so:
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">
When that didn't work I tried adding a custom class to 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 love to learn how to do this the right way if possible.
Have you tried adding the !important
tag on each CSS line in order to tell the element to override bootstrap?
Something like this:
.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;
}
Typically not the best way to do this, but I think it should work.
To overload css you need to either be later in the code, or more specific then the css you are trying to overload.
It may be possible to just add body
in front of .navbar-inner
so that it states body .navbar-inner
just so that it is more specific, or maybe div.navbar-inner
, the best would be to have an id there somewhere.
If you are selecting it as specific as is in the bootstrap.css, then I think you css is not loaded after the bootstrap as you think. Verify what is selected with a tool like Chromes development tool or Firefox's firebug.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With