I am using Twitter Bootstrap with Wordpress.
Bootstrap outputs the following css in bootstrap.css
.navbar-inverse .navbar-inner {
background-color: #1b1b1b;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}
If I want to override this code in my style sheet, do I have to specify every class element?
For example, if i want the nav bar to be totally black - no gradients etc - is there a quick way to do it without copying every class attribute from above and changing every hex value to #000000?
I believe this would be good enough to do the following to override the background properties baked into Twitter Bootstrap:
.navbar-inverse .navbar-inner { background: none }
The background property is considered short hand so that simple declaration should work properly.
The background property's shorthand usage is as such:
.navbar-inverse .navbar-inner { background:#000 url('/path/to/image.png') no-repeat 100px 100px scroll; }
This one simple property can declare and override background-color, background-image, background-repeat, background-position, background-attachment, and background-clip all at once!
Also!! It may be a good idea to make the selector within your stylesheet a bit more specific to ensure that you don't run into specificity issues.
Here's a jsfiddle example: http://jsfiddle.net/f5Yyj/1/
You should be able to overwrite individual background properties by using the combined property of just background. For example background: black; should overwrite all background-related properties above.
But be weary of specificity battles. Your CSS selector should be more specific than this one to ensure that you won't have undesired conflicts.
To overwrite previous CSS, either write an equally strong selector (as you suggest in the question), a stronger selector (IDs take priority over multiple classes), or add !important to the selector.
Example of !important:
.navbar-inner { background: #000 !important; }
While convenient, overusing !important will cause sustainability problems. Try to avoid using it whenever possible.
The absolutely best solution is to change the Bootstrap CSS directly, but if you're unable to do that then I'd recommend writing an equally strong selector.
All these tips will work, avoid using !important this is a better approach.
Include your css (site-specific.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
For example, if this is how you include CSS in your <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
put the property in the site-specific.css
#navbar {
color: #000000;
}
Related
Essentially the footer on many pages of my websites, is 3 buttons. In style.css I've styled them with a background svg. This is problematic because I have multiple images at the top paused by class="lazyload" using <script src="../lazysizes.min.js" async=""></script>, so the browser is now prioritising loading 3 unimportant SVG images at the very bottom.
.button {
background-repeat: no-repeat;background-position: center;background-size: contain}
.button{background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, silver, darkgrey)}
.button:hover {background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, #648DA2, #215c7a)}
I want to inline the svg code in style.css however you can see I use each svg twice, I use it again for the button:hover state. I don't want to bloat out my styles.css with duplicate svg code. Further I read that svgs aren't cached, so whenever the users goes to a new page it loads them again, and it may even load the svgs twice if the user hovers on any page - Good Lord!
I've tried Google, it has information on <use xlink=""/> but that's if you want to reuse an svg in the HTML body, there doesn't appear to be a way to inline SVG for reuse within style.css, or is there?
Thanks to G-Cyrillus comment on css vars I used this:
.buttonLeft{
background-repeat: no-repeat;background-position: center;background-size: contain;
--gem: url("data:image/svg+xml;base64,.....BLOB....");
background-image:var(--gem), linear-gradient(to bottom right, silver, darkgrey)}
.buttonLeft:hover {background-image:var(--gem), linear-gradient(to bottom right, #648DA2, #215c7a)}
It switches the background gradient on a button on hover, but doesn't bloat up the CSS with another background images for the hover state. PERFECT!
(from earlier comment)
You may use the css var() function to avoid repeating the same value and shorten the code .
https://developer.mozilla.org/en-US/docs/Web/CSS/--*
Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.
https://developer.mozilla.org/en-US/docs/Web/CSS/var()
The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
example for a background :
html {
--svg: url(https://upload.wikimedia.org/wikipedia/commons/d/db/Green_circle.svg) no-repeat center;
background: var(--svg) / 50%;
filter : drop-shadow(0 0 5px);
}
body {
margin: 0;
height: 100vh;
background: var(--svg) / 25%;
}
p {
background: var(--svg) / 60%;
padding: 6em 3em;
width:max-content
}
<p>
some more bg here
</p>
I want to have a background image on my site. It comes from the top of the page and is only behind the header. The problem is, my theme forces me to have a background color for the header so you can't see my background image at all. Here is a photo of what I want the site to look like:
And you can see what it actually looks like here. I'm using the Brunch Pro theme on Wordpress.
Is there a way to make the header background transparent or is there a better way to do this?
Add this to the end of the custom.css or style.css of your theme:
.brunch-pro .site-header{
background: transparent;
}
If you can edit the CSS (which I presume you can in WP), look for where .site-header has it's CSS properties set. Remove the background and background-color properties.
You could also just add a new CSS property and apply it to the header. Something like:
header.site-header {
background: none !important;
}
The !important will override already set properties...
If background-color property is required, you could use rgba color and make it transparent. background: rgba(0,0,0,0); makes background-color black, but fully transparent, without opacity and other tricks. Like so:
.black-but-transaprent {
color: red;
height: 100px;
width: 100px;
background: rgba(0,0,0,0);
border: 1px solid black;
}
<div class="black-but-transaprent">Test</div>
I have two style sheets in page.html:
parent.css and child.css
In parent.css I have:
#MAINTable tr:hover
{
background:#C0C0C0;
}
I need to deactivate this from child.css
I'm doing:
#MAINTable tr:hover{text-decoration: none !important;}
But this is not working. What am I doing wrong?
Thanks a lot!
PD: Sorry if the question was too simple, learning CSS here
You can try this to overwrite the background:
#MAINTable tr:hover {
background: transparent;
}
Parent.css defines the background, but child.css only sets the text decoration. They both stay, due to the nature of CSS. You need to override it manually.
In child.css:
#MAINTable tr:hover{
text-decoration: none !important;
background: none transparent !important;
}
If child.css is after parent.css you don't need the second !important. I used none transparent so that it also overrides any background images.
I have an issue with this site in IE: http://www.coachjoelleinc.com/
In all other browsers the JS rotator in the top right gives me correctly styled teal colored buttons. In IE 9 the buttons change to Black and White. Any ideas? I'd love to know if there is something I can do to plan for this in future projects.
It's because you're adding the gradient using Mozilla prefix, which is not understood by IE:
-moz-linear-gradient(#6BA4B4, #26687B);
Therefore, IE will fall back on the background-color:black; that is also defined for the same CSS classes (.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn)
Try setting this instead (as described here):
.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn {
background: -moz-linear-gradient(#6BA4B4, #26687B);
background: -webkit-linear-gradient(#6BA4B4, #26687B);
background: -o-linear-gradient(#6BA4B4, #26687B);
background: -ms-linear-gradient(#6BA4B4, #26687B);
background: linear-gradient(#6BA4B4, #26687B);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6BA4B4', endColorstr='#26687B');
}
possible to use css to have zebra stripe as background without using image?
Yes you can, with something like
ul li {
background-color: #fff;
}
ul li:nth-child(even) {
background-color: #efefef;
}
See:
http://reference.sitepoint.com/css/pseudoclass-nthchild
http://reference.sitepoint.com/css/understandingnthchildexpressions
Edit
You really should've stated clearly what you meant by zebra strips ;)
If you need gradient backgrounds without using images, see:
http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
Basically, the syntax you'll be using will look something like:
background-image: -moz-linear-gradient(left, #fff, #999);
background-image: -webkit-gradient(linear, #fff, #999);
See:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://webkit.org/blog/175/introducing-css-gradients/
For more details
It's a little hard to understand what you're after, but I would suggest maybe looking into Base64 encoded images in css
Base64 Encoding Image
or alternatively using canvas or the svg namespace to draw it yourself
Not really in the context I think you are referring to. You can use CSS3 selectors to target alternating items.
ul li {
background-color:#000;
}
ul li:nth-child(odd) {
background-color:#FFF;
}
Even though you stated no image, the best solution would be to use a 1 pixel wide image with 2 rows that you repeat across x and y axis.