Hi I am trying to override the css for the bootstrap nav btn in my css, I want to change the colour and thickness of the 3 white lins but I have had trouble finding where to change I know it is to do with the span icon-bar but not sure where in the css.
Try this...
.navbar-inverse .navbar-toggle .icon-bar {
width: 20px;
height: 4px;
background-color: #cc0000;
display: block;
}
Demo: http://bootply.com/79822
The class you are looking for is "icon-bar"
This controls the bars.
Look for the below code in the css file:
.navbar .btn-navbar .icon-bar {
display: block;
width: 18px;
height: 2px;
background-color: #f5f5f5;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
Modify this as you see fit.
Good luck!
Related
Hi im trying to style my jquery autocomplete, all is well but when i tried to hover on the items its displaying on a bottom left side of my page, any suggestions to fix this? here is my css code.
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
When i hover over the items on autocomplete dropdown, background-color is not changing, it's still white.
I am using this styling in site.css:
.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
background-color: #DDD;
}
.ui-helper-hidden-accessible {
display: none;
}
BundleConfig code:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"
));
Note: I am using this widget on a Bootstrap input text
How do I make the design of this box better? Making its header and footer 3D, better choice colors, ...
I've tried this:
Here is its related code:
.boxfooter {
display: block;
border: 1px solid #eee;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #fbfcfa;
margin:0 0 0 0;
padding: 1px;
color:#8EA2AA;
}
.boxheader{
margin:6px 0 0 0;
font-size:20px;
display: block;
border: 1px solid #eee;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: #fbfcfa;
margin:0 0 0 0;
padding:4px;
}
.box {
background-color:#fbfcfa;
overflow-y:scroll;
display: block;
margin:0 0 0 0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 10px;
color: #333;
}
if you want it to stand out more, go for something like a box-shadow.
box-shadow:0 0 10px #000000;
and as for colours, that's totally up to you, just experiment, and look up HEX colour codes
Check the demo below.
Fiddle
I used the gradient generator to have this effect.
Also if you want to have effect, wrap them up then add this code to the wrapper.
.box-wrapper {
box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
}
For engraved effect you can try the css below.
.box-wrapper {
box-shadow:-1px -1px 1px rgba(0, 0, 0, 0.5);
}
To adjust the lightness/darkness of the shadow. Just replace the rgba's 0.5 and chooose a number from the range of 0.1 to 1.0.
0.1 - lightest 1.0 - darkest
I'm trying to make a couple of css circles with text inside in one line. When I use circle class to img, circles are inline, but I cannot add any text. When I use circle class to div, I can add text, but they don't display inline, even when I add display:inline to circle class.
CSS
img.galeria{
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 12%;
height: 75.825%;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0,0,0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0,0,0, .8);
margin-right: 2%;
}
HTML for the first option (img)
<img class="galeria" src="../images/backgrounds/light-blue.png"/>
HTML for the second option (div)
<div class="galeria"/>text
What am I doing wrong?
In your style, replace display: inline; with display:inline-block;. It worked for me!
Try this
.galeria {
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 50px;
height: 50px;
text-align:center;
line-height:50px;
background:url('...imgsrc.jpg');
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
You say that you tried display: inline, but it isn't in your code.
If you try it, it works
.galeria{
border-style: solid;
border-width: 3px;
border-color: yellow;
width: 12%;
height: 75.825%;
border-radius: 50%;
box-shadow: 0 0 8px rgba(0,0,0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0,0,0, .8);
margin-right: 2%;
display: inline;
}
demo
How to add bootstrap focus glow to Bootstrap Tags Input (for Bootstrap 3)?
bootstrap-tagsinput.css file:
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
Is it possible to vertically align labels?
Thanks.
It is currently impossible in pure CSS as there is no parent selector but you can do it in JavaScript:
$('.bootstrap-tagsinput').focusin(function() {
$(this).addClass('focus');
});
$('.bootstrap-tagsinput').focusout(function() {
$(this).removeClass('focus');
});
and CSS:
.focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
}
Straight from Bootstrap site. If you look at their focus CSS it looks like this.
#focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
What you might want to try is add the above onto your class from your code above. It would look like this.
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
I have not tried this on anything. But I think this might help you.