I bought a website template which used -- in their CSS property value. This gives the errors property value expected and at-rule or selector expected. I know of -- being used in for CSS property but never for property value. What does the -- used here mean?
.my-sm-nn1 {
margin-top: --0.25rem !important;
}
The use is absolutely useless. If you try run your code you will see the browser ignores it, it looks like:
Sorry to say, but unfortunately you bought a template which is not perfectly clean. This can happen. Maybe it was just a typo by the developer, maybe he didn't care. Hopefully the rest of your template works as expected.
You can run the code and try yourself. The line margin-top: --0.25rem !important; will just be ignored by any browser.
.outer {
background-color: orange;
border: solid 1px black;
}
.inner {
background-color: yellow;
border: solid 1px fuchsia;
margin-top: --0.25rem !important;
}
<div class="outer">
<div class="inner">
</div>
</div>
Note: if you wonder why is there now more CSS then in your question: I like to add background-colors and borders to elements to be 100% sure that some rules do or do not effect any styling of the elements.
Related
I enjoy using css custom properties, but there's this thing that I often find that I wish I could do.
I wish to be able to apply some styles conditionally based on the value of a css custom property. Here's some pseudo-code:
.something {
border: var(--is-dark-theme) ? 1px solid : none;
}
I understand that custom properties do not work like this. But may be there is some other way that I'm not aware of that could help me achieve a similar result?
Or perhaps there is some spec proposal that would this possible in the future?
Here is another idea similar to Ori Drori answer where I rely on the use of an invalid value inside border to remove the border. This can be useful in case you want to use keywords like false/true/yes/no
.something {
border: var(--is-dark-theme,2px) solid black;
}
<div class="something">Dark theme</div>
<div class="something" style="--is-dark-theme: false">Light theme</div>
You can sometimes use calc() to get roughly similar results. In this case if --is-dark-theme is 0 or 1, you can multiply it by the width of border, to show or hide it:
.something {
border: calc(var(--is-dark-theme) * 1px) solid black;
}
<div class="something" style="--is-dark-theme: 1">Dark theme</div>
<div class="something" style="--is-dark-theme: 0">Light theme</div>
In cases where you have something like "condition xyz is on or off" (like in the light theme vs dark theme example) you can use the following CSS trick (I know this looks completely weird if you see this trick for the first time, but in contrast to the tricks presented in the other answers, this one will work for all CSS properties):
For each on/off condition define two custom properties, one for the 'on' case, one for the 'off' case. Instead of on use the value initial, instead of off use value (space character).
.light-theme {
--is-light-theme: initial;
--is-dark-theme: ;
}
.dark-theme {
--is-light-theme: ;
--is-dark-theme: initial;
}
div {
font-family: Helvetica, Arial, sans-serif;
padding: 1rem;
color:
var(--is-light-theme, black)
var(--is-dark-theme, white);
background-color:
var(--is-light-theme, white)
var(--is-dark-theme, black);
border:
var(--is-light-theme, none)
var(--is-dark-theme, 5px solid #aaa);
}
<div class="light-theme">
light theme
</div>
<div class="dark-theme">
dark theme
</div>
Just FYI: The following is not working today (2023-02-06), but someday in future there might be this very nice CSS feature called "CSS style container queries":
/* not working today (2023-02-06), maybe in future */
#container style(--theme: dark) {
.box {
border: 1px solid #aaa;
}
}
I'm in the process of creating a website with the aid of plugins and WordPress, the plugins are LearnDash, BuddyBoss and BuddyPanel, and I'm having trouble keeping the top navigation bar to stay the same before and after someone logs in, it's how I'd like it when I log in, but not before hand.
So I got help off support staff from BuddyBoss about this and they gave me some code which contains an warning that I've never come across before, the line of code that it is, is.
color: #012243!important;
There is no other lines of code inside the {}, the warning is Use of !important.
How do I fix this?
Using of important! modifier is somewhat discouraged, but also, in most cases of prebuilt themes, the most appropriate way to override default settings. So, in your case, that's probably the only way you can override default color. Just use it if it works.
Also, I would write that rule as:
color: #012243 !important;
So, put a space between color code and !important.
The recommended way is to either increase the specificity
div#higher {
color: yellow;
background: lightgray;
}
#higher {
color: blue;
background: lightgray;
}
div.high {
color: lime;
background: lightgray;
}
.high {
color: red;
background: lightgray;
}
<div id="higher" class="high">Hey there</div>
Or copy the existing rule and add it to a custom CSS, loaded after the theme's CSS.
/* theme CSS rule */
.parent .child {
color: red;
background: blue;
}
/* custom CSS rule - loaded/ordered after */
.parent .child {
color: yellow;
background: lightgray;
}
<div class="parent">
<div class="child">
Hey there
</div>
</div>
If the above is not possible, then one need to use !important, added after a property value, e.g.
property: value !important;
When an important rule is used on a style declaration, this
declaration overrides any other declarations. Although technically
!important has nothing to do with specificity, it interacts directly
with it. Using !important, however, is bad practice and should be
avoided because it makes debugging more difficult by breaking the
natural cascading in your stylesheets. When two conflicting
declarations with the !important rule are applied to the same element,
the declaration with a greater specificity will be applied.
Src: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception
Is it possible to change the layout of a checkbox without adding the label tag in CSS?
Things like this do not have any effect:
input[type=checkbox][disabled] {
background-color: green;
border: 10px solid red;
}
The only thing I found so far is how to change the opacity.
I'm not sure if this will be much use to you, but it does allow you to "style up" a checkbox without the need for a label. I've remove the disabled flag so you can swap between the different styles. Shouldn't be difficult to add it back in if this will work for you.
Fiddle is here.
input[type=checkbox]:checked:before {
background-color: green;
border: 10px solid red;
}
input[type=checkbox]:before {
content:'';
display:block;
height:100%;
width:100%;
border: 10px solid green;
background-color: red;
}
The above only works on Chrome, however, it seems like Chrome is in the wrong where the specification is concerned.
A fuller answer here: CSS content generation before or after 'input' elements
As of today there is no solution, if we assume a cross browser functional styling, to style the <input type="checkbox" > alone, other than a few properties like opacity, width, height, outline (and maybe a few more).
Using a label (or other content elements) is what you need to do that and here is a good (which this question is likely a duplicate of) post with lots of options: How to style checkbox using CSS?
Note: If you know more properties, feel free to update this answer.
I've got a CSS conflict that's preventing me to set the width of a div and I'm really struggling to see where it is.
Can someone give me a hand?
It's this div here:
body.node-type-campaign #com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
A link to the page: http://www.wdm.org.uk/test-campaign
Thanks!
Remove the inline-style width:auto; from <div id="com_col_two">
Have you tried just:
#com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
And remove all the added properties on the <div> tag?
You have a lot of classes applied to the elements in your page.
Also, have you tried using Firefox with Firebug. I'm sure a lot of people would recommend using that.
Check out FF's Web Developer Toolbar or Chrome's Developer Tools: both have a CSS view which shows you which style definition affects this specific element (it is triggered by rightclick->Inspect element).
Why does the following anchor tag has text underlined?
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none;
}
<a class="pagerLink" href="#">test</a>
Probably because another style block has better precedence than your pagerLink class. Try:
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}
use text-decoration:none for a in your styles
Ex:
<head>
<style>
.pagerLink
{
background-color: #E4F5F8;
border:1px solid #C0DEED;
}
.pagerLink a
{
text-decoration:none !important;
}
</style>
</head>
<body>
<div class="pagerLink">
test
</div>
</body>
You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition
http://getfirebug.com/
I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:
text-decoration: none !important;
You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.
Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.
To remove underline you need to follow following style code snippet.
.pagerLink{
background-color: #E4F5F8;
border:1px solid #C0DEED;
text-decoration:none !important;
}