I know this is a simple thing, but I've tried everything (including googling and even hiring another programmer for an hour) and can't seem to make this work. The theme I'm working with has a specific color on the wordpress search box submit button, and I just need to change the color.
Looking at it with google development tools, the css looks like this:
.search-button, .submit_btn {
background-color: #ffa025;
background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%);
background-image: linear-gradient(#ffa025 0%,#dc7214 100%);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #f7b559 #e67e22 #e67e22 #e67e22;
color: #fff;
font-family: FontAwesome;
float: left;
height: 45px;
width: 16%;
}
screenshot of style from google dev tools
What I'd like to do is just turn off the background-image attributes with the gradient and have the background color just be red. I've tried using the above selector, and then tried the selector: .search-button sBn, and put the code into the additional CSS field for theme. Nothing's working. Thanks for any help
As you have identified, the linear gradient set in background-image is overriding the background-color style. To reset the background-image to allow the background-color property be used instead, do the following:
background-image: none;
This will then reset the background colour to the background-color set in the theme css (i.e. #ffa025).
Now to change the color, you can set the background-color to whatever you want, e.g.
background-color: #ffa025;
You could also just use the background property, but that could have knock-on effects for other rules you have set up, so I'd suggest overriding the existing properties.
Working snippet:
/* THEME CSS */
.search-button, .submit_btn {
background-color: #ffa025;
background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%);
background-image: linear-gradient(#ffa025 0%,#dc7214 100%);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #f7b559 #e67e22 #e67e22 #e67e22;
color: #fff;
font-family: FontAwesome;
float: left;
height: 45px;
width: 16%;
}
/* YOUR CSS TO OVERRIDE THEME */
.search-button, .submit_btn {
/* remove the gradient */
background-image: none;
/* change the background colour to red */
background-color: #ff0000;
}
<button type="submit" class="search-button">Search</button>
Finally, don't forget to make sure that either your custom CSS is loaded after the theme CSS, or it uses a more specific selector than the theme CSS e.g.
.search-button.sBn {background-color: #ffa025;}
(FYI, what you are trying to do is quite trivial so I'd be very concerned about the programmer you hired - this should have taken them no more than a couple of minutes)
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).
I have the following CSS:
.point.active,
.point:active {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
Example: http://jsfiddle.net/7zmjvaxL/
This is working. But when the element is active and I hover over it, it loses the CSS colors. How I can keep the color if the element is active and if I hover over it?
Thanks.
Bootstrap comes with a number of default settings for certain elements.
In your case it is forcing this rule:
.btn-default.active:hover {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
Which is overriding your own rule set.
The best bet is to remove the class btn-default, because its not really a default button, its a customised one, and then add CSS rules for your element.
For example, this jsfiddle demo:
.btn-point {
color: #333;
background-color: #fff;
border-color: #ccc;
}
Try this :
.point.active,
.point:active,
.point:active:hover{
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
Do you have .point:hover{} somewhere ?
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
I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button onclick?
.btn-success {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #1F2838;
border-color: #494F57;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #161617;
border-color: #494F57;
}
.btn-success .badge {
color: #161617;
background-color: #ffffff;
}
The :active selector is what you need for the click.
.btn-sample:active {
// click styles here
}
It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:
.btn-sample:active {
box-shadow: none;
}
Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:
.btn-success:active:focus {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}
Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.
You have to use the !important declaration to do that correcly.
.btn-success:hover, .btn-success:active, .btn-success:focus {
color: #ffffff !important;
background-color: #1F2838 !important;
border-color: #494F57 !important;
}
I fixed this behaviour with this css code:
.btn-primary {
background-color: #8ed3cc;
border: 0 !important;
padding: 1rem 5rem;
border-radius: 0;
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
box-shadow: none !important;
}
.btn-primary:hover {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
.btn-primary:focus {
background-color: #69aca5 !important;
border: 0 !important;
box-shadow: none !important;
}
Some inspiration from the bootstrap source for overriding these various button states where $off-white and $brand-black are defined by us:
.btn-success {
&:hover,
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
&:active,
&.active,
&.disabled,
&:disabled {
color: $off-white;
background-color: $brand-black;
&:focus,
&.focus {
color: $off-white;
background-color: $brand-black;
}
}
}
That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
Just add the following code in your CSS
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617;
border-color: #494F57;
}
If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:
.btn-success {
color: #ffffff !important;
background-color: #161617 !important;
border-color: #494F57 !important;
}
Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).
If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.
Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.
There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).
if you want remove the box-shadow just add box-shadown:none and make it important or if you want add box-shadows just add color values.
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: none !important;
}
or
.btn-primary:not(:disabled):not(.disabled):active{
color: #fff;
background-color: #5b5fc6;
border-color: #5b5fc6;
box-shadow: 0 0 0 0.2rem #c9cbfa !important
}
to trigger any class whenever a button is clicked, you need :active selector and to fix the default behavior of the bootstrap button on click, you need to set the background-color to any color you want to along with !important. It will then override the default styling of the bootstrap class.
.btn-outline-primary:active{ background-color: [your color] !important}