I've seen a number of questions and answers about changing the background color of the default Twitter Bootstrap Primary Navbar, but they seem to deal with the top-most layer (the navbar-inner class), masking a number of other colors and options underneath.
I'm looking to create a transparent navbar, and after adding "background-color:transparent;" to each layer I can find, I still have a stock white bar across the top of my screen. Currently my app.css has these few lines:
.navbar-inner{
background-color:transparent;
}
.navbar-inner container{
background-color:transparent;
}
.navbar{
background-color:transparent;
}
#nav-main{
background-color:transparent;
}
#banner{
background-color:transparent;
}
I'm running out of guesses here, and my scatter-shot method seems to be failing me. Is there a rule I just haven't seen (and modified) yet, or am I going about this the wrong way altogether?
The problem is they are using an image on the background. So by setting the background-color, you are only setting the color behind the image. Try something along these lines:
.navbar-inner{
background:transparent !important;
}
.navbar-inner container{
background:transparent !important;
}
.navbar{
background:transparent !important;
}
#nav-main{
background:transparent !important;
}
#banner{
background:transparent !important;
}
Got this result in Bootstrap 3 using:
body { background: transparent }
Related
Is there any way to reduce the height of the navigation bar in this?
http://www.bootply.com/render/1dopQbJEMd. I am using exactly the same css properties in the link.I tried with the height property in css. But its not getting reduced.
after inspecting that code, i saw that
.navbar has min-height:50px , change it to min-height:0 so it will inherit the height from it's contents
.navbar-brand has padding:15px 15px, reduce the top and bottom padding how you want, for example padding:5px 15px
.navbar-nav>li>a has padding-top:15px;padding-bottom:15px reduce them as well to 5px as you did on point 2
.navbar-text has margin-top:15px;margin-bottom:15px , reduce it also to 5px as you did on point 2 and 3
in the end you will have CSS :
.navbar {
min-height:0;
}
.navbar-brand {
padding:5px 15px;
}
.navbar-nav>li>a {
padding-top:5px;
padding-bottom:5px;
}
.navbar-text {
margin-top:5px;
margin-bottom:5px;
}
the height of your .navbar will be 30px, with 20px less than before
Take a look at this link:
http://getbootstrap.com/customize/#navbar
There you can see the variables you can change. One of them is the height of the navbar. Change that variable and download the CSS and JS files at the bottom of the page. Use the new files instead of default Bootstrap files.
You can also try changing the CSS, but I find it way harder.
I work on PrimeFaces and I am trying to edit css properties of components. while working on growl, I am trying to change closing icon color but I just can't. I tried a lot and a lot and still couldn't figure out.
You can see at the top-right corner, Its background color yellow which I set it that but I cant change icon color. Its always that blue. Here are my codes about growl;
.ui-growl{
position:fixed;
top:20%;
left:38%;
width: 23%;
}
.ui-growl .ui-state-highlight{
background: #d2524f;
border: #d2524f;
}
.ui-growl-message{
float: left;
font-size: 15px;
margin: 2% 0 0 22%;
}
.ui-growl .ui-growl-icon-close{
background-color:yellow;
}
The closing icon is drawn with background-image attribute via the following CSS selector:
.ui-state-highlight .ui-icon {
background-image: url("/showcase/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-omega");
}
Changing the color attribute will have no effect. To change the icon color you have to modify the image url. This answer gives some hints on that topic.
Tested with PrimeFaces ShowCase.
I want to create horizontal line as shown in below image using css. but unable to create so, i have never seen such line before using css.
Can anyone who are export in css can help me with this?
I know basic like this
Update
Note: Actually, i have to put this in my email template, so i am avoiding images. Just pure css
The only CSS I can think of, is a stretched (transformed) dotted border:
div {
border-bottom: 1px dotted black;
transform: scale(1,10);
}
<div></div>
If it's for an email (see comments section):
use <img src="bars_300x10.png" style="display:block; width:300px; height:10px;">
with an image exactly cut as the expected email design.
Using simply a 3x1 px background base64 .gif:
hr{
border:0;
background: url('data:image/gif;base64,R0lGODlhAwABAIAAAAAAAP///yH5BAAAAAAALAAAAAADAAEAAAICRFIAOw==');
height:10px;
}
<hr>
One posibility that gives you absolute control about the results is a gradient
div {
width: 300px;
height: 40px;
background: linear-gradient(to right, black 0px, black 5px, white 5px, white 30px);
background-size: 30px 100%;
}
fiddle
You can adjust the size of the pattern, the width of the black strip, the color ...
I commented but, seems like it would work to use vertical pipes (|) and then to control their size/color/spacing using css font techniques. I'll post some examples. It's not clear to me if using pure css is a requirement for you or not.
span {display:block;}
.a { color:blue; font-size:2em; letter-spacing:.2em; }
.b { color:red; font-size:1em; letter-spacing:2px; }
.c { color:green; font-size:8px; letter-spacing:1px; }
<span class="a">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="b">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="c">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
Another option, if you don't need much variance in the appearance would be to create a single bar "image", then set it as the background-image of a <div/>, and finally apply repeat-x on it.
So currently, I have two styles.
.wrapper-style1
{
background-image:url(../images/river.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
color: #eee;
color: rgba(255,255,255,0.75);
}
.wrapper-style1 .title
{
background-image:url(../images/river.jpg);
color: #fff;
}
My problem is for some reason the colours don't seem to match within the background.
The wrapper-style1 is fine, but wrapper-style1 .title seems to be darker =S
Any advice?
Site is: www.s1magazine.co.uk
The 'ABOUT S1' background should be same colour as the background below it.
I made a screenshot and copied the part from about s1 and copied it above the other part. And it is exactly the same image. So you need to adjust the background position
background-position: top center;
I'm using Adam Shaw's fullcalendar jquery plugin and it works really well, after speaking to the graphic designer he wishes to use images instead of fullcalendar's prev,next,today and the three view icons (month, week, day).
Using firebug I've isolated that the "prev" icon, for instance, is using the span class
fc-button-prev
However, when I go to the css and create the class applying a background image:
.fc-button-prev {
background-image: url('../images/prev.png');
}
Nothing happens.
Any ideas would be appreciated
May be you have to define display:block in your class like this:
.fc-button-prev {
background-image: url('../images/prev.png');
display:block;
width:50px;
height:50px;
}
because span is an inline element. So, inline element is not take width , height, vertical margin & padding in it.
In fullcalendar 2.x I had to use the following CSS to change "previous" button image:
.fc-prev-button {
background-image: url(../img/icon_arrow_left.png) !important;
background-size: 100% 100%;
width: 50px !important;
height: 50px !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fc-prev-button span {
display: none;
}