Develop Reference

How to edit bootstrap modal inherited CSS

I'm trying to customize the CSS for a modal on my website like background colors, padding etc. The modal seems to inherit the same CSS as it's parent and when I edit the CSS on my webpage, the overrides are working fine, but the override will not extend to the same element displayed in my modal.
The CSS code that I'm trying to edit is (.grid-item-header) and I can simply create an override that works on my webpage, but the exact same (.grid-item-header), which is the same CSS that displays when viewing in developer tools within the modal. The CSS changes are not being applied though.
So far I've tried (.modal .grid-item-header) and (.modal-content .grid-item-header), but I just cannot get it to change.
.grid-item-header {background-color: #000000!important;}
.modal .grid-item-header {background-color: #000000!important;}
.modal-content .grid-item-header {background-color: #000000!important;}
I wanted the modals header background colors to change, which I did not.

You can override modal popup css by using following code, this is work for me try this once.
put this at the top of page or on conman page
#media( min-width: 768px ) {
.modal-header {
background-color: black
}
}

How to Stop Overriding of Bootstrap Css Styles

Problem
I have a stylesheet (bootstrap) that when applied in the header overwrites my personal styles.
I do need these bootstrap styles when the js is invoked otherwise the dialog that pops up is un-styled.
How can I stop my own styles from being overwritten?

I didn't understand your question fully, but here's what I understood:
1- You are using Twitter Bootstrap in your project, and it is overwriting your stylesheets.
2- You need bootstrap for a popup dialog and nothing else.
Well, from the first question, you can:
-Call your hand-made stylesheet AFTER calling Bootstrap's css.
-Change your stylesheet CSS classes and ID's.
-Hierarchize your classes from the ID's, for example:
#foo{
color: black;
}
#foo .bar{
color: white;
}
#foo .bar>li{
margin: 10px;
}
-Add a '!important' after the affected classes (Not recommended at all).
For the second matter, you could:
- Costumize your boostrap, you could pick certain plugins (such as popup), and exclude others that you don't use. (Costumize Bootstrap)

Like Nick R mentioned in the comments - Order is important here. The browser will 'overwrite' styles as stylesheets are loaded. For example, if you have two sheets:
.darkdiv {
color: #fff;
background-color: #000;
}
and then a stylesheet with:
.darkdiv {
color: #888;
}
Any element with class "darkdiv", will keep the original background-color but have the grey (#888) colored text as that style was 'overwritten' by the second stylesheet.

Images not responsive by default in Twitter Bootstrap 3?

It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class names to make the image responsive with all breakpoints.
In version 2 the images CSS properties inherited by default the parent's div properties.
Is this correct?

Bootstrap 4
For Bootstrap 4 use Sass (SCSS):
// make images responisve by default
img {
#extend .img-fluid;
}
answer updated for version 3
Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Note img tag gets by default:
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
So use class="img-responsive" to make your images responsive.
To make all images responsive by default:
css: add the code below under the bootstrap css:
img {
display: block;
height: auto;
max-width: 100%;
}
less: add the code below in your mixins.less:
img {
&:extend(.img-responsive);
}
Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547
Carousel
img tags inside a carousel are responsive by default
Semantic rules
See also the answer of #its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.com/a/4291515/1596547
As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level.
So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.
Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.
Images inside p elements which require inline-block as suggest by #its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.

Excellent suggestion by #BassJobsen, but I'd use display: inline-block; instead of display: block; as that feels more semantic 1 (which means you can be a bit more sure you are not messing up somewhere else).
So, mine would look like this:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Please do let me know if my understanding is flawed. :)
[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.

Got here after trying to figure out if it's safe to apply img-responsive for all images.
The answer by #its_me led me to think that it isn't safe to apply this for images under a p element.
This does not seems to be what the bootstrap team think.
This is why images are not responsive by default in bootstrap3:
The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

Dojo Dijit styling issues

I'm trying to use a dijit/layout/TabContainer with a modified dijit theme. I need to modify some of the styling of the TabContainer tabs such as the padding of the tabs, boldness, etc. However the styling commands specific to the pages that use the TabContainer are not working.
This piece of code is on my home page's CSS file.
.myTheme .homeTabContent
{
font-weight: bold !important;
}
.myTheme .homeTabContent .dijitTab /* The .dijitTab is the original CSS class of the tab*/
{
font-weight: bold !important;
padding-left: 3px !important;
padding-right: 3px !important;
}
The tabs' padding and font-weight remain unchanged despite the !important. Editing the TabContainer CSS file in myTheme isn't a practical solution because I that will just mess up the styling of a different page. What happens is that as I load the page with the styling, my commands appear to be working for a split second, however all of that is undone when the TabContainer finishes loading. Can anyone tell me why or offer me a solution? Thanks in advance!

Here is a working solution. http://jsfiddle.net/oamiamgod/rd58M/
I have included class myTheme to body tag. Like this
<body class="claro myTheme">
I'm not good at english but I will try to explain.
If you write css like this .myTheme .homeTabContent .dijitTab that mean an element of class homeTabContent have to stay inside some element that has class myTheme
Like this
<body class="claro myTheme">
<div class="homeTabContent">
<div class="dijitTab"></div>
</div>
</body>
But if you write css like this .myTheme.homeTabContent.dijitTab (with no space) it will be
<div class="myTheme homeTabContent dijitTab"></div>

Applying css with javascript overrides hover link style?

I have some JavaScript which is changing an image correctly but once it has been called, my a:hover CSS code no longer works.
Looking with firebug the following JavaScript creates this css rule:
element.style {
background-image:url(/content/images/side_partnershipsOver.png);
}
document.getElementById('partnerships').style.backgroundImage = "url(/content/images/side_partnershipsOver.png)";
How can I apply the JavaScript and not have the a:hover code overriden by the element.style rule?

As far as I know setting the element.style.backgroundImage is essentially the same as using an inline style.
<style type="text/css">
a { background: blue; }
a:hover { background:green; }
</style>
<a href="#" style="background:red;">link<a>
Unfortunately the inline style always wins. In the above sample the link will always be red. As Daniel White said jQuery would be very useful here. Although you may be able to get around this issue in two ways.
One, Generate the style using javascript to write a style tag
document.write("<style type='text/css'>#partnerships { background-image:url(/content/images/side_partnershipsOver.png);}</style>");
or two, Manually setup mouseenter/mouseleave events to handle your hover style
Update
or three, as pointed out by KevinUK, use the !important css tag to override the inline style set.
<style type="text/css">
a { background: blue; }
a:hover { background:green !important; }
</style>
<a href="#" style="background:red;">link<a>

I was also frustrated about this CSS js style gap so I build
methods to apply style from js with a CSS string
elm.jCSS(cssText);elm.jCSSPseudo(cssText,pseudoElt)