So I'm trying to do some quick prototyping with Bootstrap and I'd like to use the purple theme that's in action over on the Bootstrap site, however I can't seem to find where the styles are hidden. For example, .bs-docs-header gets no styling by default. In fact, I can't even find styling for .bs-docs-header in any of the CSS.
This is how it looks over on the Bootstrap site:
And this is how it looks over on my site:
No idea where those styles are coming from, or aren't. Any help getting this to work would be appreciated.
Thanks in advance.
The bootstrap site has a reference to docs.min.css which contains this:
.bs-docs-header {
position: relative;
padding: 30px 15px;
color: #cdbfe3;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
background-color: #6f5499;
background-image: -webkit-gradient(linear,left top,left bottom,from(#563d7c),to(#6f5499));
background-image: -webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);
background-image: -o-linear-gradient(top,#563d7c 0,#6f5499 100%);
background-image: linear-gradient(to bottom,#563d7c 0,#6f5499 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
background-repeat: repeat-x;
}
Related
I'm building a simple site using bootstrap and I was trying to modify the style of a alert box.
In the head I'm linking to the Bootstrap CSS, the Bootstrap optional theme, and then my custom style sheet (in this order). This is the alert box which I'm trying to customize:
<div id="success" class="alert alert-success">Success</div>
In my custom style sheet I have:
#success {
color: white;
background-color: black;
border-color: red;
}
What happens is that the font color and the border color do change to white and red, respectively, but the background does not.
After spending a lot of time searching and trying different approaches I noticed that if I do not use the optional Bootstrap theme then the background color does change to the one I specify. However I don't fully understand why. I have been looking at the optional theme CSS which states for this alert box:
alert-success {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
background-repeat: repeat-x;
border-color: #b2dba1;
}
I see that the color that insists on not changing to black (the green #dff0d8) is mentioned several times here. I think that the reason that I can't change the background color of the alert-success box when using the optional CSS theme is because when using this theme the background is no longer a "solid color" as in "background-color: black;" but becomes a webkit gradient (whatever that is). Am I understanding this correctly? Is there an easy way to override this or turn of this gradient for this particular alert box in my custom CSS sheet.
I'm new to this and I don't yet fully understand the webkit rules in CSS sheets. Thanks in advance.
Update
Thanks to the help of everyone below I was able to understand the problem and correct it. Here it is:
The optional bootstrap theme that I'm using creates the background through "background-image" and not "background-color" like I was trying to do. So even though I am correctly changing the background-color, a background-image is being created on top of it. There are to ways to do what I want here:
- Adding "background-image: none;" in the custom CSS
- Changing "background-color: black;" to "background: black;" in the custom CSS rule
Thanks everyone.
Try removing the background-image property as well as setting the background colour.
#success {
color: white;
background-color: black;
background-image: none;
border-color: red;
}
You could try a messy solution using !important
#success {
color: white;
background-color: black !important;
border-color: red;
}
You could also try to be more specific in your selection:
div#success.alert-success {
color: white;
background-color: black !important;
border-color: red;
}
Try changing background-color: black; to background: black; in your custom CSS rule.
#success {
color: white;
background: black;
border-color: red;
}
.alert-success {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
background-repeat: repeat-x;
border-color: #b2dba1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="success" class="alert alert-success">Success</div>
I have created a small (10px by 16px) .png icon with transparent background and want this to be on the left side of all my asp:Button elements. The button text shall then appear to the right of this icon. The problem is that I'm using a background gradient and don't know if what I want is possible (for me) at all. Maybe you can help me out. Here is an example that I tried to copy, but it didn't work; the background was at first repeated and I didn't see transparency at all; setting background-repeat: no-repeat fixed the repeating but not the transparency (there was neither text nor gradient background to be seen). Here's the code I tried (it's for IE10+ only):
<style type="text/css">
.myButton {
vertical-align: central;
font-family: Consolas;
font-size: 14px;
font-weight: 500;
border-top-right-radius: 5px;
background: -ms-linear-gradient(top, #ff0000 0%,#00ff00 100%);
background-image: url("MyIcon.png");
background-repeat: no-repeat;
color: white;
border: none;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
}
.myButton:hover {
background: -ms-linear-gradient(top, #374a9a 50%,#061671 100%);
}
</style>
As an example of how it's supposed to look, check this. There are some dark blue buttons that have an icon on the left like I need it. Do I maybe have to use an ImageButton instead of a simple Button (which I wouldn't like), or is there an easier solution?
I've figured out how to change background color of things such as the heading in the navbar along with the links but what about the rest of the bar? I'm talking about the area left and right of any links. I assume it's in the following code but I do not know what to edit as it isn't clear. Note: Changing background color has no effect. This is in the bootstrap.css. The color is currently black.
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #8900ff;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
The code below in my style.css has worked to color the background color for the links:
.navbar .navbar-inner .container .nav-collapse > ul > li > a {
background-color: #E89800;
}
Solved: What I had to do was get rid of the background image like so:
.navbar .navbar-inner {
background-color: #e89800;
background-image: none;
}
It set the background image of the navbar to none and I was able to change the background-color for the rest of the bar.
Response was found: Change background color in navbar fixed menu bar Bootstrap
There is a class that ships with bootstrap that is called .navbar-inverse
You can use that class there where you have .navbar (just add on so it looks more or less like navbar navbar-inverse
This will invert the white to black and it's something you can target easily to change as well.
Here is a JS fiddle using only stock bootstrap: Demo
As a final recommendation and to help you understand things better with the CSS in bootstrap. I recommend that you don't modify any bootstrap files and you instead use your own custom.css file (place it after the bootstrap CSS so it weights more) and do your modifications there. Read the bootstrap documentation, it's very short and simple to understand.
You can find the source of this information here: http://twitter.github.io/bootstrap/components.html#navbar , just look for the "Inverted variation" part of the documentation for the navbar and you should be good to go. It's also note worthy to say that there are more things that you can invert, such as buttons with btn-inverse so read the documentation a little more so you can engage in better and simpler programming with bootstrap.
I have few css clases that uses properties like below:
.rfs_left_btn
{
width: 176px;
height: 20px;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #fafafa 48%, #f1f1f1 50%, #e9e9e9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(48%,#fafafa), color-stop(50%,#f1f1f1), color-stop(100%,#e9e9e9));
background: -webkit-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: -o-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: -ms-linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
background: linear-gradient(top, #fefefe 0%,#fafafa 48%,#f1f1f1 50%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e9e9e9',GradientType=0 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* Drop shadow*/
-webkit-box-shadow: 0px 1px 1px #cecece;
-moz-box-shadow: 0px 1px 1px #cecece;
box-shadow: 0px 1px 1px #cecece;
margin-bottom: 5px;
}
When creating a StyleBundle like below:
StyleBundle bundle_cssSession = new StyleBundle("~/Css/bundle_session");
bundle_cssSession.Include("~/Styles/_catalog.css");
The System.Web.Optimization.Styles.Render("~/Css/bundle_session") fails with the following error:
/* Minification failed. Returning unminified contents.
(2196,14): run-time error CSS1036: Expected expression, found '0'
*/
If I remove the multiple 'background' properties (and leave just one of them) the minification works.
Is there a solution to use the StyleBundle with CSS3 properties like the ones above?
Thank you.
There are known bugs in the Optimization namespace that cause it to fail on CSS3. The bug reports are here and here. The only advice I can offer is to either compress them yourself and give the style bundle the .min file to use when serving optimised content or use a different minification method.
Maybe, it can be a wrong mode to do (or a 'gambiarra', like we say in Brasil), but I fixed it moving the gradients tag to inline.
I'm trying to create a form where the background of the input fields are styled with a gradient background. It succeds for all <input> tags, but not for the <select> tag. Can this be done? Am I doing something wrong?
The CSS I'm using:
form#contact input[type="text"], input[type="url"],
input[type="email"], input[type="tel"], textarea, select {
margin: 3px 0 0 0;
padding: 6px;
width: 260px;
font-family: arial, sans-serif;
font-size: 12px;
border: 1px solid #ccc;
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
}
See the image below.
Styling <select> is difficult since browsers try and render the control to match the OS. You could add -webkit-appearance: none; to enable the gradient but that will also remove the arrow.
See Add gradient to select box w/ CSS3 in chrome? and Background Image for Select (dropdown) does not work in Chrome
Or if you can use jQuery or Prototype, I highly recommend the excellent Chosen plugin in which the <select> is replaced by a dropdown that can be styled.
Edit: I have to add the styling form elements is sometimes frowned upon. Eric Meyer's article on the subject is good background reading.
You may have a problem with this due to the operating system and Internet Browser you are using.
One easy way of getting round this is by using a JQuery library called Uniform. It allows you to style form elements how you want and is cross-browser compatible.
You can find more information on this here: http://uniformjs.com/.
I hope that helps.
Have you tried to debug that in firebug?
How about making the backgrounds important?
form#contact input[type="text"], input[type="url"],
input[type="email"], input[type="tel"], textarea, select {
margin: 3px 0 0 0;
padding: 6px;
width: 260px;
font-family: arial, sans-serif;
font-size: 12px;
border: 1px solid #ccc;
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF)) !important;
background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px) !important;
}