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.
Related
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?
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 {...}
I have a stylesheet which has the following property,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#FFFFFF!important;
}
I can't edit the stylesheet. How do I change the property to
color:#000000!important;
I tried to write the following code in another stylesheet,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#000000!important;
}
but it did not work. Please guide. Thanks.
Other than Emmanuel's answer which talks about this: CSS Specificity, You can also try using two approaches:
Change order of stylesheet
Make sure your other stylesheet order is higher than the current version. That is include the new stylesheet link after the stylesheet which is to be overridden
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css"> <!-- Styles that will overwrite -->
Inline HTML
If you can change your HTML, you can use this:
<span style="color: #000000 !important;">
!important in inline style will have higher priority than in other types of styles.
Did you try using:
.primary-nav .suppa_rwd_button span{
color:#000000!important;
}
Other way could be using JavaScript:
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Cheers!
In order to override an !important rule you have to put a same specific rule after the previous one or to increase specificity of new rule as:
nav.primary-nav li.suppa_rwd_button, nav.primary-nav li.suppa_rwd_button span{
color:#000000!important;
}
* suppose that .primary-nav is a nav element and .suppa_rwd_button a li element, you could change them due to your markup.
In both cases you have to also use !important in your new rule.
Reference: MDN - Specificity
I am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:
[class*="span"] {
float: left;
margin-left: 20px;
min-height: 1px;
}
I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.
Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!
Yes
[class*="span"] {
float: none !important;
margin-left: none !important;
min-height: none !important;
}
But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.
[class*="span"] {
float: none;
margin-left: none;
min-height: none;
}
Example HTML
<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
custom.css rules will override third-party.css rules.
One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:
.mycustomclass [class*="span] {
add properties
}
Example: http://jsfiddle.net/ankitvijay/n4Enb/
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;
}