I want to alter the css in a Wordpress theme. I am adding the following custom css in style.css in Wordpress. However, the style I add does not show up on the website. I am overwriting:
#media screen and (max-width: 830px)
.masthead .top-bar, .masthead .hide-on-mobile {
display: none !important;
}
to
#media screen and (max-width: 830px)
.masthead .top-bar, .masthead .hide-on-mobile {
display: inline !important;
}
Right now the first !important is overriding your second I suppose. But you can override !important statements quite simple
Taken from: How to override !important?
Give the selector a higher specificity (adding an additional tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
Some examples with a higher specificity:
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Or add the same selector after the existing one:
td {height: 50px !important;}
Disclaimer:
It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.
But, it's useful to know how to override it, if you sometimes have to.
Related
I have created a custom style sheet that overrides the original CSS for my Wordpress template. However, on my calendar page, the original CSS has the height of each table cell set with the !important declaration:
td {height: 100px !important}
Is there some way I can override this?
Overriding the !important modifier
Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
Some examples with a higher specificity (first is highest/overrides, third is lowest):
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Or add the same selector after the existing one:
td {height: 50px !important;}
Disclaimer:
It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.
But, it's useful to know how to override it, if you sometimes have to.
Apart from overriding a style set by the style attribute, the !important should only be used when you have selectors in your style sheet with conflicting specificity.
But even when you have conflicting specificity, it is better to create a more specific selector for the exception. In your case it's better to have a class in your HTML which you can use to create a more specific selector which doesn't need the !important rule.
td.a-semantic-class-name { height: 100px; }
I personally never use !important in my style sheets. Remember that the C in CSS is for cascading. Using !important will break this.
Disclaimer: Avoid !important at all cost.
This is a dirty, dirty hack, but you can override an !important, without an !important, by using an (infinitely looping or very long lasting) animation on the property you're trying to override the importants on.
#keyframes forceYellow {
from {
background-color: yellow;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
margin: 0 auto;
background: red !important;
animation: 1s linear infinite forceYellow;
}
<div></div>
Every part of the styles name has a weight, so the more elements you have that relate to that style the more important it is. For example
#P1 .Page {height:100px;}
is more important than:
.Page {height:100px;}
So when using important, ideally this should only ever be used, when really really needed. So to override the declaration, make the style more specific, but also with an override. See below:
td {width:100px !important;}
table tr td .override {width:150px !important;}
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Worked for me.
This can help too
td[style] {height: 50px !important;}
This will override any inline style
In any case, you can override height with max-height.
You can use higher specificity by going up in selectors.
td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}
I wrote a detailed article on how to override CSS here.
I found really cool trick with :not.
If nothing from above helped you, then try this:
.page-width:not(.anything) {
}
If you're trying to override an !important tag that is defined in a class. Simply specify your property in a id tag. id has higher precedence than class.
There are a couple of modern approaches that weren't available when this question was first asked.
Use :is() to set an arbitrarily high specificity to your selector
:is(td, #A#A#A:not(*)) {height: 200px !important}
The second parameter to the :is() sets the specificity of the whole selector but the :not(*) part means that the parameter will never match any element itself. #A#A#A gives a specificity of (3,0,0) but you can safely choose whatever selector is sufficient to override the other !important setting. However, this is still something of a hack.
A better way is to use cascade layers. Layered !important declarations override non-layered !important declarations so you can just do:
#layer {
td {height: 200px !important}
}
By using named layers you can further override this to arbitrary levels.
Note that neither approach will allow you to override a !important setting in an HTML style attribute.
I would like to add an answer to this that hasn't been mentioned, as I have tried all of the above to no avail. My specific situation is that I am using semantic-ui, which has built in !important attributes on elements (extremely annoying). I tried everything to override it, only in the end did one thing work (using jquery). It is as follows:
$('.active').css('cssText', 'border-radius: 0px !important');
I use jQuery to animate my page - a function called slideToggle(). I can view this in the debugger and see the styles applied to my <nav> element.
The problem I'm facing, is that after I call slideToggle ( a second time ) it sets display:none to <nav> as it correctly should.
However, If I expand the screen again, the menu does not re-appear in its normal state as it should.
I set it in the media query but it is ignored.
#media screen and (max-width: 1000px){
/* This does nothing but I want it to turn the display on.
*/
nav {
display: block;
}
}
To answer the question can I override inline-css? ... Yes, by using !important.
Your real question:
By adding !important to your media query when the screen is big again. see following snippet (run in full screen and make screen smaller/bigger)
(function(){
$('button').on('click', function(e){
$('#test').slideToggle();
});
})();
#media screen and (min-width: 1000px) {
ul {
height:50px;
background-color: red;
width: 100%;
}
li {
display: inline-block;
height: 50px;
line-height: 50px;
float:left;
margin-left: 50px;
}
#test {
display: block !important;
}
button {
display: none !important;
}
}
#media screen and (max-width: 1000px) {
ul {
background-color: red;
width: 100%;
}
li {
display: block;
height: 50px;
line-height: 50px;
}
#test {
display: none;
}
button {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<ul>
<li>This</li>
<li>Is</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
<button >Toggle menu</button>
Media queries are irrelevant here. They don't affect the cascade at all.
Inline rules always trump rule-set rules unless the rule-set rule is !important and the inline rule is not.
In general, the most specific CSS selector will be applied to an element. The cascading order is defined as follows (highlight by me):
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the
associated selector matches the element in question and the target
medium matches the media list on all #media rules containing the
declaration and on all links on the path through which the style sheet
was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones.
Pseudo-elements and pseudo-classes are counted as normal elements and
classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.
Furthermore, you can forcefully apply a style using the !important keyword. You should not use the declaration, however, unless it is absolutely necessary after all other avenues have been exhausted. I recommend reading this article if you want to learn more about the !important keyword, when to use it and why to avoid it.
You can add a class in the media query and call addClass in your function.
By the way
You set display: block; for nav when max-width: 1000px
It should be MIN-width if you want to display the nav when the screen widens.
this will work 100%;
#media screen and (min-width: 1001px){
/* This does nothing but I want it to turn the display on.
*/
nav {
display: static !important;
}
}
Making responsive website,
I wrote this, it doesn't work.
#media (max-width: 767px) {
#nav { display:block; }
}
but, I wrote this, it works!
#media (max-width: 767px) {
#nav { display:block !important; }
}
Why? :(
Check your css code , something with higher specificity is changing your #nav element.
This is a little concept:
!important after the style attribute gives high priority to that style. That is why your css is working then.
!important override the existing stylesheet attribute defined in same context.
!important will override any inline style, or more specific style that may be taking precedence on your page.
For example, you can override the style on this element...
<div style='background-color:white'></div>
by adding this in your stylesheet...
div { background-color: black !important }
But!, if you add !important to the inline style, it will then take precedence, for example...
<div style='background-color:white !important'></div>
here is a good stackoverflow answer explaining the concept in a bit more detail.
I'm trying to hide my menu by default in screens less than 760px wide. For some reason though, my display:none rule is not taking effect. It's being overridden by a previous rule, as follows:
media="all"
#mainmenu {
display:inline-block;
}
#media screen and (max-width: 760px)
.btncontent {
display:none;
}
It's also worth noting that I have a button that jQuery reveals the menu by adding an inline style. The above code is before the button is pressed though, with no inline styles.
I'm sure I'm missing something really simple here but not sure what. Thanks in advance.
EDIT: I've solved this issue by adding the ID selector to the Media Query but I'm going to leave this question open as I don't really understand why it worked.
Are #mainmenu and .btncontent the same element? If so, then the reason is simply because the ID selector is more specific than the class selector.
#media rules do not influence rule precedence in any way; they are transparent to the cascade, so style resolution takes place as if the enclosing #media rule wasn't there. In your example, when the media query is fulfilled, browsers see this, which makes it clear that the rule with the ID should take precedence:
#mainmenu {
display:inline-block;
}
.btncontent {
display:none;
}
Depending on how you added the ID selector to the second rule, you either balance or tip the specificity, allowing it to override as expected:
/* More specific */
#mainmenu.btncontent {
display:none;
}
/* Equally specific */
#mainmenu, .btncontent {
display:none;
}
Because the id is important.
Right way:
media="all"
#mainmenu {
display:inline-block;
}
#media screen and (max-width: 760px)
#mainmenu {
display:none;
}
I have created a custom style sheet that overrides the original CSS for my Wordpress template. However, on my calendar page, the original CSS has the height of each table cell set with the !important declaration:
td {height: 100px !important}
Is there some way I can override this?
Overriding the !important modifier
Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
Some examples with a higher specificity (first is highest/overrides, third is lowest):
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Or add the same selector after the existing one:
td {height: 50px !important;}
Disclaimer:
It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.
But, it's useful to know how to override it, if you sometimes have to.
Apart from overriding a style set by the style attribute, the !important should only be used when you have selectors in your style sheet with conflicting specificity.
But even when you have conflicting specificity, it is better to create a more specific selector for the exception. In your case it's better to have a class in your HTML which you can use to create a more specific selector which doesn't need the !important rule.
td.a-semantic-class-name { height: 100px; }
I personally never use !important in my style sheets. Remember that the C in CSS is for cascading. Using !important will break this.
Disclaimer: Avoid !important at all cost.
This is a dirty, dirty hack, but you can override an !important, without an !important, by using an (infinitely looping or very long lasting) animation on the property you're trying to override the importants on.
#keyframes forceYellow {
from {
background-color: yellow;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
margin: 0 auto;
background: red !important;
animation: 1s linear infinite forceYellow;
}
<div></div>
Every part of the styles name has a weight, so the more elements you have that relate to that style the more important it is. For example
#P1 .Page {height:100px;}
is more important than:
.Page {height:100px;}
So when using important, ideally this should only ever be used, when really really needed. So to override the declaration, make the style more specific, but also with an override. See below:
td {width:100px !important;}
table tr td .override {width:150px !important;}
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Worked for me.
This can help too
td[style] {height: 50px !important;}
This will override any inline style
In any case, you can override height with max-height.
You can use higher specificity by going up in selectors.
td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}
I wrote a detailed article on how to override CSS here.
I found really cool trick with :not.
If nothing from above helped you, then try this:
.page-width:not(.anything) {
}
There are a couple of modern approaches that weren't available when this question was first asked.
Use :is() to set an arbitrarily high specificity to your selector
:is(td, #A#A#A:not(*)) {height: 200px !important}
The second parameter to the :is() sets the specificity of the whole selector but the :not(*) part means that the parameter will never match any element itself. #A#A#A gives a specificity of (3,0,0) but you can safely choose whatever selector is sufficient to override the other !important setting. However, this is still something of a hack.
A better way is to use cascade layers. Layered !important declarations override non-layered !important declarations so you can just do:
#layer {
td {height: 200px !important}
}
By using named layers you can further override this to arbitrary levels.
Note that neither approach will allow you to override a !important setting in an HTML style attribute.
If you're trying to override an !important tag that is defined in a class. Simply specify your property in a id tag. id has higher precedence than class.
I would like to add an answer to this that hasn't been mentioned, as I have tried all of the above to no avail. My specific situation is that I am using semantic-ui, which has built in !important attributes on elements (extremely annoying). I tried everything to override it, only in the end did one thing work (using jquery). It is as follows:
$('.active').css('cssText', 'border-radius: 0px !important');