Here's this ridiculous question.
I am trying to apply some color to my css.
.navbar-custom {
background-color: none;
border-color: none;
}
This applies the color to my nav.
But shouldn't the below code just remove all the colors from the navbar If any?
.navbar-custom {
background-color: none;
border-color: none;
}
none is not a valid value for background-color or border-color.
For CSS2.1 and CSS3
You can probably set value to transparent or any other color instead
DEMO using transparent
For CSS3 you can use unset as value for them
DEMO using unset
Related
I am trying to change the color of the outline when an element is active on Safari.
I need to keep all the styling of the default Safari outline, and just change the outline color.
I have tried:
a {
&:focus {
outline: auto red;
}
}
also
a {
&:focus {
outline-color: red;
}
}
when I do this
a {
&:focus {
outline: red solid 2px;
}
}
the color of the outline will change but I loose all the other styling (rounded corners and the fade), I have tried different options with outline, outline-color, outline-style. Nothing seem to work.
Am I missing some basic behavior of Safari?
Thank you!
I have this styling:
#bbpress-forums li.bbp-forum-freshness a:hover, #bbpress-forums li.bbp-topic-freshness a:hover {
text-decoration: underline;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Yet, when I hover over the links:
As you can see they are still showing shadow effects. I have been able to use the aforementioned approach in other classes.
The page:
https://www.publictalksoftware.co.uk/support-forums/
Any advice appreciated. I just want it to be a underline with no shadow.
Try this:
.bbp-forum-title:hover, .bbp-forum-freshness a:hover {
background: transparent!important;
border-top: none!important;
}
Looks like it's a background color, not a box shadow.
Try to add to your class :
background: none;
border: none;
And you dont need to reset box-shadow.
I want to fade in a border on hover. I have the following but it starts off as nothing then goes to a 1px grey line (grey is default color) and then eventually goes to a 2px red line.
What am I going wrong?
a{
border-bottom: none;
transition: border-bottom 1s;
}
a:hover{
border-bottom: 2px solid red;
}
<a href='#'>hover here</a>
When an element has no border, then you add on hover you face a few issues such as page moving, drawing border from scratch etc
Solution: Try setting border to transparent first, so it's there but cannot be seen:
a {
border-bottom: 2px solid transparent; /* <- here */
transition: border-bottom 1s;
text-decoration: none; /* I added this for clarity of effect */
}
a:hover {
border-bottom: 2px solid red;
}
testing border
Edit
Actually, you don't need to declare the whole border again, just change the color:
a:hover {
border-color: red; /* <-- just change the color instead */
}
You need to provide a border by default to the hyperlink, which should be transparent in color. Later on hover, you may modify it's color. Leave the rest on the transition property.
See it yourself.
a {
border-bottom: 2px solid transparent;
transition: border-bottom 1s;
text-decoration: none;
}
a:hover {
border-bottom-color: red;
}
Demo Hyperlink
Cheers!
Why this happens
You get this because of your transition and the initial value of your element. All elements have default values, even when those aren't defined by you. For instance, <div> elements always have display: block per default and <b> elements have font-weight: bold per default.
Similarly, your <a> tag has border-bottom-color: rgb(0, 0, 0). This is true even when the thickness of the border is zero.
In chrome, you can see all of this in the "computed" section of the "Elements" tab:
So when the transition starts, it's going to gradually change the color from black to the red you defined.
How to fix
What you need to do is to override that default values, with your own. This is to prevent it from starting off as black.
a{
border-bottom: 2px solid transparent;
transition: border-bottom 1s;
}
a:hover{
border-bottom: 2px solid red;
}
A tip is to always define the same properties for an element "before" a hover and "during" one. Another thing you should be aware of is that using none as the initial value usually won't give you the behavior you want. Transitions need a numerical value as a start-off point (e.g 0).
So text selection was made stylable trough the ::selection pseudo element in order to override the browser's default selection color. But to me, it seems that white as a selection background color is forbidden in favor of a greyish, opaque color.
::selection { color: black; background: white; }
::-moz-selection { color: black; background: white; }
body {
background: black;
color: white;
}
So selecting me is supposed to invert the text and background colors. But the selected text background color is not white, but grey.
Why does this not create a perfectly white background ? Instead, it shows a grey background (#989898)
Also see this snippet on https://jsfiddle.net/duk3/hzodm1sh/
Ok so following this question I found the answer :
For some reason Chrome forces it to be semi-transparent. However, you
can get around this by setting the background using rgba. I have set
the alpha value to be just 0.01 less than 1.
::selection { color: black; background: rgba(255, 255, 255, 0.996);
; }
body {
background: black;
color: white;
}
Selecting me DOES invert the text and background colors. Well, almost, but it looks like perfect white.
Maybe it's a browser specific problem.
Try this:
Fiddle
::selection {
color: black;
background: white;
}
body {
background: black;
color: white;
}
::-moz-selection {
color: black;
background: white;
}
So selecting me is supposed to invert the text and background colors.
Here is the result in a print:
I have the requirement to format completely the default button in bootstrap 3. I have already changed the default background color in the customizer.
Yet I don't know where to change the formatting for the different button states (active, hover, focus). Does somebody know where I have to do the changes?
The following are the styles responsible for default button hover,active,focus state...change it accordingly.
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.open > .dropdown-toggle.btn-default {
color: #333333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
What exactly happening is that customizer darkens the background color by 10% and border color by 12%.
Less Mixins.
background-color: darken(#background, 10%);
border-color: darken(#border, 12%);
So there is no way for you to change color entirely in the customizer directly.
Using the customizer, the border-radius and border-color, as well as hover and active pseudo-classes are automatically calculated (using LESS), relative to the background color. If that's not what you want, you can change them each independently:
.btn-default:hover{
background-color:#eee;
border-radius: 2px;
border: 1px solid #000;
color:#999;
etc...
}
.btn-defauot:active{
background-color:...etc
}