I am using bootstrap to have shading when the mouse hovers over a table row. But when I introduce scrolling into the picture, all the even rows are set to background-color: white. These are over riding the bootstrap rules.
So the first thing I did was to check what order I was loading the CSS, assuming that cascading style sheets were subject to the order they are loaded, with later ones overwriting previous rules.
<link href="/DataTables/datatables.css" rel="stylesheet" type="text/css">
<link href="/css/bootstrap.min.css" rel="stylesheet" media="all">
This didn't change anything. The datatables rule is still overriding bootstrap.
I then tried adding a rule inline:
<style>
div.DTS tbody tr.even:hover {
background-color: inherit;
}
</style>
but this just inherits DataTable's rule. Changing color to transparent likewise fails.
So, I'm left with two different hacks that will work, but neither of them is (IMO) a good way to do it.
I can overwrite the rule overwriting bootstrap, trusting that bootstrap will never change the hover color:
/* overwrite the overwriting of bootstrap hover shading. */
div.DTS tbody tr.even:hover {
background-color: #f5f5f5;
}
Simply comment out the offending rule in datatables.css, and have it break if/when I next upgrade DataTables:
/*
div.DTS tbody tr.even {
background-color: white;
}
*/
Is there a more flexible way to undo the "helpful" stylings that I don't want?
Related
On my layout page, in the <head>, I have the following styles:
<link rel="stylesheet" href="/dist/vendor.css">
<style>
.bg-dark {
background-color: #240000;
}
</style>
I have added the link to my layout page. The style block is added dynamically by Angular & webpack. From what I know about CSS, that last .bg-dark class should win over any .bg-dark class declared in `vendor.css. Yet I see the following:
Is this something caused by the magical pre-rendering of Angular? Is there some way to prevent this?
The background-color attribute in vendor.css has the !important flag, which elevates its priority:
background-color: #222222 !important;
To override that setting, you should set the !important flag in your layout page CSS:
<style>
.bg-dark {
background-color: #240000 !important;
}
</style>
or remove that flag in vendor.css, if your can.
I have an HTML that loads two stylesheet:
Bootstrap style (bootstrap.css)
Custom app style (site.css)
I have the following code in bootstrap.css
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
What do I need to insert into my site.css so I give priority to site.css style without modifying bootstrap.css:
.modal-open .modal {
overflow-x: hidden;
overflow-y: scroll;
background-color: #D5D5D5
}
Rather than adding !important, you can just add the custom style sheet after the bootstrap stylesheet in the <head> section of your site:
<link href="bootstrap.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">
This way, for any duplicate CSS selectors/properties the site.css will override the bootstrap.css
First, you should load the site.css file after bootstrap.css like #luka suggests. This doesn't always guarantee success because the specificity Bootstrap gives some of it's rulesets are really high. It appears in your specific situation, you shouldn't have any problem. But Bootstrap's rulesets intertwine sometimes and there may be something you're not aware of or can't locate that might be preventing your ruleset from succeeding.
In the case of you loading site.css after bootstrap.css doesn't work, do not use !important. Instead, double up on your selector:
.modal-open.modal-open .modal.modal {
overflow-x: hidden;
overflow-y: scroll;
background-color: #D5D5D5
}
According to this online tool, the selector above CSS specificity score is 4, while Bootstrap's is a 2. This technique has been 100% for me for years.
Try adding !important :
.modal-open .modal {
overflow-x: hidden !important;
overflow-y: scroll !important;
background-color: #D5D5D5 !important;
}
You have several options:
If the rule is exactly the same - the last rule that exists will take over (so if you link first to the bootstrap.css and after it to the site.css - the style inside the site.css will take.
You can add the !important (not the best option, but you can do it).
You can duplicate the selectors: .modal-open.modal-open .modal.modal {...}
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I am using Bootstrap CSS on my site and am loading in the <head> element. Just below I load the boostrap I have a <style> element where I am trying to override some CSS from the bootstrap, but it is not overriding it when I look at the Chrome Dev Inspector. I thought elements in element should cascade the previous ?
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Women's Transit</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/javascript" />-->
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap.css" type="text/css" />
<style type="text/css">
/* Global elements */
input {
height:30px;
padding:8px;
}
</style>
</head>
You probably want !important.
input {
height: 30px !important;
padding: 8px !important;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.
Important:
When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.
So !important is the easiest way to override styles, because it is more "specific" than other styles. Please note that overriding styles is very bad practice, especially with !important.
The actual solution: Don't override styles.
The internal or embedded style you created would have a higher "order of importance" than Bootstrap's and cascade over their styles ONLY if the same selector was used in Bootstrap's sheet with the same weight and selectivity. That's not likely the case because they use classes to modify most styles. The "input" element has a weight of 1, so if they use classes with those properties they would easily cascade over your element style (a plain class generally has a weight of 10).
Bootstrap does use an "input" style in their reboot element style sheet, so your sheet would likely cascade over that one style. But I don't see them changing height or padding there so your styles would apply until their custom class changes its property styles further. In addition, their input style changes things you don't, like "margin" and "line-height" which might be affecting your layout further.
My advice is to NOT use "input" or "!important" and instead create a custom class and add the class to your element. Make it more selective than Bootstrap's with a full set of properties so you cascade over Bootstrap's input and class styles but inherit some things you like. This gives you full control now over what you like and don't like in Bootstrap:
body form .myinput{
width:100px
height: 30px;
padding: 8px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
<input class="myinput ..." />
The downfall of most young web developers with CSS is they do not add enough style properties to their styles and rely on either inherited or unknown changes to be cascading down into their elements. Adding a full set of properties gives you total control over how that element looks and what it inherits.
The mystery is gone :)
I like to have the navbar-inner element in my Bootstrap Layout to be customizable by the jQuery UI framework.
<div class="navbar-inner ui-widget-header">
</div>
But the background of the navbar is always black.
How can overwrite the Bootstrap Background with the background from the ui-widget-header class without changing the bootstrap css file?
Create your own CSS file which you will use to overwrite styles from the bootstrap.css and add its reference to your HTML after the reference to bootstrap.css. Also, to ensure that your styles overwrite the bootstrap ones you can use the !important keyword in your css.
So, create a CSS file and call it something like bootstrap-overwrite.css.
Add the bootstrap class you want to overwrite -
.navbar-inner
{
background: none !important;
}
Add the reference to your HTML after the bootstrap reference -
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" />
Twitter Bootstrap is a framework that is supposed to be restyled so you shouldn't be afraid of overwriting the default styling.
Make the ui-widget-header selector more specific, so that it overrides navbar-inner in the cascade. For example,
#pageid .navbar .ui-widget-header {
background: red;
}
Is more specific than simply...
.ui-widget-header {
background: red;
}