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)
Related
I have been modifying the gtk.css file and managed to change the look of mi windows. For the most part i have been able to figure what certain components i must modify to change the look of certain things. however I have not been able to find a way to modify the window's minimize, maximize, and close buttons certain properties and I have been trying for a good while now.
I was able to modify the background-image of the search button in my terminal as you can see in the picture to make it blend in into the headerbar color.
I was able to modify the color of the minimize, maximize, and close buttons color but I can't seem to figure out two remove the background color for these three buttons.
I used the following to modify the regular buttons properties.
button{
/* min-height: 0px;
min-width: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;*/
/* border: 1px pink; */
/*border-radius: 0px; */
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: blue;
outline-color: rgba(229, 112, 132, 0.7);
border-color: pink;
background-image: image(pink);
text-shadow: 0 1px rgba(255, 255, 255, 0.769231);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
I used the following to change the close and others buttons colors as well, But i can't make the background color disappear.
button.minimize, button.maximize, button.close{
color: blue;
border:0px;
border-radius: 0px;
border-color: pink;
background-image: image(pink);
background-color: pink;
border-radius: 0px;
}
I used all the following components but i just can't seem to make it work, I used one by one, they are not all active at once. These modify the color but won't modify the background color like it did with the search button or menu button from the terminal.
headerbar .close{
color:yellow;
}
.tab-close-button{
color:red;
}
button.titlebutton.minimize{
color: red;
background-color: pink;
background-image: :image(pink);
}
button.headerbutton.minimize{
color: red;
background-color: pink;
background-image: image(pink);
}
button.header.minimize{
color: yellow;
background-color: pink;
background-image: :image(pink);
}
I know its been 3 months since this post but I have an answer.
Even if you had already found it, might as well send it for those coming from google.
windowcontrols button image:not(:hover) {
background-color: transparent;
}
I'm trying to make some CSS changes to a website.
When I inspect the elements with Firebug, I find a class bordered that I need to make some changes to for example. Firebug tells me this class is in a file called Desktop.css. These are the style rules that Firebug displays for class bordered:
.bordered {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color #d9d9d9 #d9d9d9;
border-image: none;
border-radius: 5px;
border-style: none solid solid;
border-width: medium 1px 1px;
}
But when I look in the actual Desktop.css file, the style rules I see for class bordered are:
.bordered {
border: 1px solid #d9d9d9;
border-top: none;
border-radius: 5px;
}
I must be doing something stupid! Why might I be seeing such differences in Firebug and in the actual CSS file?
Firebug will parse your CSS rules into their full form.
A good example with less clutter is the background property.
background is actually a shorthand method of writing
background-color
background-image
background-repeat
background-attachment
background-position
So if we write background: #f00; we'll get a red background, and all the other properties for background will be set to their defaults.
Firebug will show the full value including defaults, which in this case would be:
background: #ff0000 none repeat scroll 0 0;
I need button which has more bling than a standard browser rendering, and because I am not a designer, I thought I'd use an existing solution. So, I went to a button maker I found on the Internet, and it made me a button which looks good. I copied the CSS, and my own button looks differently in my browser. On Inspect Element, the CSS is the same.
Their button looks like this:
And it has following rules applied:
My button looks uglier, because it gets a large border on all sides:
But when I look at the CSS, there is no difference to the applied rules. And while my element is an input, I also have "real" buttons on my page, and they show the same behavior.
I tried running my page with or without a resetting CSS, but this made no difference. I always get the ugly look.
When I run their code in a fiddle, I get the same ugly result.
This happens in two different tabs of the same browser on the same machine, a Firefox 29.
Here again the problematic code:
button {
border-top: 1px solid #bfd1ed;
background: #5987d1;
background: -webkit-gradient(linear, left top, left bottom, from(#2662c3), to(#5987d1));
background: -webkit-linear-gradient(top, #2662c3, #5987d1);
background: -moz-linear-gradient(top, #2662c3, #5987d1);
background: -ms-linear-gradient(top, #2662c3, #5987d1);
background: -o-linear-gradient(top, #2662c3, #5987d1);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
button:hover {
border-top-color: #2662c3;
background: #2662c3;
color: #bdbdbd;
}
button:active {
border-top-color: #2662c3;
background: #2662c3;
}
body {
background-color: #555555;
}
The difference is you're using a button element.
Us a span element and you'll get the same result.
Demonstration
You might also take the opposite approach and try to reset the button's style but in my opinion it's easier to style a span than to remove those styles.
Just put border: none; on your button:
http://jsfiddle.net/wn7vh/
Hope that helps.
Thats because you use the wrong HTML tag
the css in your example is for an element with the class "button"
and if you look at the example in the button builder, you will see that they don't use:
<button name="My button"> A button! </button>
but they use a link tag and style it like a button:
<a class="button" name="My button" href="#">A button!</a>
so if you use the second version for the button, it will look like the example in the button builder
How do I change the color of -webkit-focus-ring-color? Chrome has a light blue that clashes with my CSS, I'd like to change it to another color hex but keep the rest of the style (faded edge, width) the same.
Also, is there an important reason this is a bad idea? Thanks?
The following css should do for Chrome (changing just the colour of the outline):
.thing:focus {
outline-color: [MY_COLOUR];
}
If you want consistent css across browsers, you'd be better off writing your own complete style and probably also including a css reset before that.
If you're happy with the browser focus style and just want to change the colour, the above should do. You might also want to do some quick research to see what the default focus style is for other browsers (maybe some use border?) and set those colours as well.
If you want to emulate the chrome style across all browsers, try this (from the chrome user-agent stylesheet):
.thing:focus {
outline: [My_COLOUR] auto 5px;
}
http://jsfiddle.net/jmysiak/fpqp1zv3/2/
input {
border: 1px solid #c4c4c4;
width: 200px;
height: 20px;
font-size: 16px;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
transition: all ease-in-out 0.15s;
-webkit-transition: all ease-in-out 0.15s;
-o-transition: all ease-in-out 0.15s;}
input:focus {
outline: none;
border-color: #df9eed;
box-shadow: 0 0 10px #df9eed;}
Yes. You just style it. It's an outline. But you should put something cool looking that still denotes focus so that people who use it, can still see where they are on the page. They might be assisted by other devices besides the standard mouse.
a fiddle
HTML
<button class="thing">Something</button>
or
<input class="thing" type="text" />
CSS
.thing {
border: 1px solid red;
}
.thing:focus {
outline: 0;
border: 1px solid blue;
}
I am trying to create input text like below Image :
First I used CSS3 with some help like this fiddle . because of problems with old browsers I reached to don't use CSS3.
Now I coded like this :
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('Pictures/Input-BG.png');
background-repeat: repeat-x;
}
<input id="txtScrictAddress" value="Your Adress (required)" type="text" />
Input-BG.png is this image :
and here is the result.
Did I slice input image right ?
Input has a left border color , How should style the input in css like the image?
You just need to set a border radius and border to none. And edit your image so the dark thing is on the left side also.
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('http://i.stack.imgur.com/pbpVI.png');
background-repeat: repeat-x;
border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/
border: 0;
}
http://jsfiddle.net/TGzng/8/
if you want to use images to get something where both ends differ, you will at least need 2 images to get that. try to search for "sliding doors input css". maybe this topic on SO helps you out (but there are a million other examples out in the web and on Stackoverflow).
You need to add a border-radius to round the edges. This won't work pre-IE8 though.
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('http://i.stack.imgur.com/pbpVI.png');
background-repeat: repeat-x;
border:1px solid #777;
border-radius:5px
}
As for image slicing, easy way to get the left shadow part means you need to have a very wide image for the background. Or do that sliding doors thing the other person suggested.