Newbie question. I'm trying to use a background image for my site which is built with Bootstrap.
I've added additional body CSS in a separate css file in my asset pipeline, and added a background-image:
body {
font-size: 16px;
padding-top: 10px;
background-image: url("../assets/back14.gif");
}
This changes the background fine but also applies it to other elements like nav units etc that I want to leave with default colours.
Can I fix this behaviour or apply the background in a better way?
Sorry to say, but I think you are correct: those backgrounds are transparent by default. As you can see from the Customize page, although there are variables for the backgrounds of active and hover links in the Navbar section, there is no variable for the background of plain old regular Navbar links. :/
Otherwise, not that hard of an override:
.nav-stacked > li > a {
background-color:#ffffff;
}
But still seems like something that should be in there as an option.
JSFiddle
Related
I'm new to CSS. I've got a deceptively simple problem. This is a fiddle of a simple page.
http://liveweave.com/c6j68I
The objective is to show a fixed 900px white div centered against a coral background.
I've tried to achieve this using two divs maked #outerWrapper and #wrapper.
However, the whole page still seems to have a white background, which seems to be connected to the body tag. (Please use the fullscreen mode to see it).
If I give the body the background color of the #outerWrapper, again, the color appears on the top and bottom of the page too, which is undesired. (Please uncomment the CSS of body to see this.)
I've tried using the article tag; using negative margins; and changing dimesions of the body tag. Nothing seems to work.
In simple terms, a want a 'columned' look: coral-white-coral; instead of the 'boxed' look I currently have.
Please help.
Just add a style for the body in your CSS and set the margin to 0px, like so:
body {
margin: 0px;
}
Because most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
If you want to change it, you can just do this, add it on your css
* {
padding:0;
margin:0;
}
Want to be more complete?
use normalize.css. It resets a lot of default values to be consistent across browsers.
Try adding the following
<style>
body,html {height:100vh; width:100vw; padding:0; margin:0;}
</style>
Body has default margins set by the browser (most browsers set default styles to different elements and they can vary depending on the browser) as seen below in developer console.
Note: In most browsers you can open the developer console by pressing F12 on your keyboard:
Just set the following css to avoid it:
html, body {
margin: 0;
padding: 0;
}
Demo: http://liveweave.com/EzWH0o
What I'm looking for might be very basic if someone is using bootstrap for a while.
I'm looking for a way to style the body background let say #ebebeb and the container background #fff with a padding of 10px, if you go search something on m.Google.com you will see exactly what I'm talking about.
Somehow I cannot figure out how to do it with Twitter Bootstrap 3.0.2
Could you please edit your question and provide your code? There could be more than one issue causing the problem, and it'll be easier to help you if I can see your code.
If I had to guess, I'd say the easiest way achieve what you want would be something like this:
body {
background: #ebebeb;
}
.container {
background: #fff;
}
Make sure that you're including this CSS after you've included bootstrap.css, otherwise it won't override the default styles set by Bootstrap. Here's a the fiddle that shows this: http://jsfiddle.net/5KwP3/1/
One thing to be aware of however, is that anything that isn't in the container div won't have any padding by default.
I'm attempting to style the jQuery UI tabs as vertical tabs, but styled slightly differently to the Vertical Tab Demo that they provide.
I'm trying to achieve this:
But the best I can get is this:
You'll notice that the color of the bottom border of the tabs matches the text color, but I really want the border to be consistent around the entire tab.
I could just add a css line in like this:
.ui-tabs-vertical > .ui-tabs-nav li {
border-bottom-color: #C5DBEC !important;
}
But I don't want to hard-code any colors as they are provided by the jQuery UI theme roller, so if I decide to change the theme, or have different themes for different branding of my website, then this will become a nightmare to maintain.
Looking a bit deeper into the problem, it seems that the standard jQuery UI theme css does this:
.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }
And this is because the whole thing is setup normally for horizontal tabs, which need the bottom border removed. I can't remove this because it's part of the generated theme roller css. I don't think that this should change the border-color property because only the first two of the shorthand border are specified (i.e. width and style). So I would expect the border-color to not be overridden here, but in fact it is, and it's setting it to the font color.
What I've done to attempt to revert this css line is this:
.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }
Note that again, I'm not touching the border-bottom-color here.
The result of this, at least in firefox, is this taken from firebug:
For some reason, it looks like the color is being set back to the default browser color, even though nothing touches border-bottom-color. I just want the color from .ui-widget-content .ui-state-default to come through, but I can't work out how to do it.
Using inherit doesn't work because I don't want to take the color from a parent element in the DOM.
Here's a jsFiddle showing my problem. Can anyone help me get a maintainable, solution?
Use #hexblot's answer and get the color dynamically.
To do this create a faux item, apply the jQuery class you want and after that use .css() to get the color. Simple as that.
+1 for trying to find a clean solution, without hardcoded stuff.
just add
.ui-state-active { color: #2E6E9E !important; }
and you should be ok. updated the fiddle with this line in the CSS (last line).
I am making a stupid site in the vein of sites on theuselessweb.com. (Warning: strange audio on pages for every link henceforth.) However, I am running into an issue: I have a vignette effect on the site that serves as a background, and in this jsFiddle, where I did all my work, it looks perfect. However, when I upload it to my webserver to test for real, it doesn't behave in either Chrome or Firefox: There is an unwanted space between the background color and the vignette effect on the top and left sides of the page. What is causing this? How can I get rid of it?
Edit: Since I received an answer, this has been resolved. As such, the link to my webserver above no longer has the issue.
Each browser defines some different margins or paddings to elements by default. In your case, there is a margin to the body-element.
Change this in your css and you are fine.
body {
width: 100%;
height: 100%;
background: #666666;
margin:0;
}
try checking your css for something like this:
*{
margin:0px;
padding:0px;
}
if the problem persist, probably is because some of your lower classes in CSS are overriding the style
I have a css file that have following css element:
.ms-webpart-chrome {
background-color: white;
}
I want to make it transparent instead of white and same time I want to have this css element like it is beacuse its a global css and some pages are using it.
So I was thinking that I could use inherance it.
This is how it looks in html and this div classes are generated automaticly which means I cant change or do anything.
<div class="ms-searchCenter-main">
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ1" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
So basicly I need to have this one like it is beacuse i dont want to change it or remove it:
.ms-webpart-chrome {
background-color: white;
}
And I need to create a new one and use !important with the inherance.
Any kind of help is appreciated
Note: I tried following:
.ms-searchCenter-main .ms-webpart-chrome
{
background-color: transparent !important;
}
but it didnt work
You can certainly specify a background color to be "transparent," as this is the default value in the CSS specification (see reference page at w3schools.com).
If your goal is to make the background color transparent across all elements with class "ms-webpart-chrome" then try adding more selectors to increase the weight of your new rule:
body div.ms-webpart-chrome {
background-color: transparent !important;
}
Setting "background: none;" is also an option. You could try adding both.
It would be better if your new rule followed the other rule (not directly, just after it in the order). Also, check to see if any of the sub elements are picking up a background.
While IE has developer tools, I strongly recommend Firefox + Firebug + DOM Inspector + Web Developer Toolbar as a standard testing suite. You can easily traverse the DOM to see if any sub elements have backgrounds applied, as well as test different CSS rules live on the page.
You can't specify a background colour to be transparent, as transparent isn't a colour. However, you can achieve it with background: none !important;. Element's don't have background colours by default, so just restore it to the default (none) and it will be transparent.
Look at this demo here. I've set the background to red at the top, but then over-written it with background: none; lower down. This makes it transparent. The red border shows where the element is