I have two css file.I have a class following in one css below
input[type="submit"], input[type="button"], .butLink {
padding: 3px 9px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: bold;
cursor: pointer;
color: #FFFFFF;
background: #A5BD24;
background: -moz-linear-gradient(top, #A5BD24 0%, #7DAC38 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A5BD24), color-stop(100%,#7DAC38));
background: -webkit-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
background: -o-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
background: -ms-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5bd24', endColorstr='#7DAC38',GradientType=0 );
background: linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #781;
}
Now I want to change this style from another css file.I tried following below which isnt working -
input[type="submit"], input[type="button"], .butLink
{
background-color:#000 !important;
}
Any Idea?
Writing background will override previously defined properties.
Write:
input[type="submit"], input[type="button"], .butLink{
background:#000;
}
Try using the background rule instead of background-color, and make sure that your stylesheets are in the correct order in the <head> of your HTML. If they are in the correct order, the rule should not need the !important.
You can do it easily.
Option one: If you apply this css rule for the particular page so use internal css .Add this rule within the header tag like this
<style>
input[type="submit"], input[type="button"], .butLink
{
background-color:#000 !important;
}
</style>
It will perfectly works because internal css overwrite the external css rule.
Option two: If you apply this css rule for the all pages so use external css .Add this rule after the last css property:value;like this
color: #FFFFFF;
background: #A5BD24;
background:#000;/* This will overwrite with the previous background property value #A5BD24;
Hope the answer!
Related
Edit : added Codepen
I have a small issue with my css, there us a weird space between border-image and linear background on the top and the left of a button. Could you help me to remove it please? Thank you for your help.
Here is the codepen. The problem is on the button "text". I seems like the problem appears only on certain levels of zoom on Chrome : https://codepen.io/zamehan/pen/ZMXWeg
Here is the associated css, the button has the class .special-button :
.special-button{
background: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) no-repeat ;
color:#616060;
border: 1px solid transparent;
border-image: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) 5 !important;
}
.color-button {
font-family: "Noxa";
flex: 1 100%;
margin: 6px;
font-weight: 700;
letter-spacing: 0.8px;
}
button {
color:white;
border: none;
text-align: center;
text-decoration: none;
padding: 6px 11px;
font-size: 12px;
margin: 4px 5px;
background-position: center;
cursor: pointer;
&[data-color="dark"] {
$color: #616060;
color: $color !important;
&[data-selected="true"] {
color: lighten($color, 10%) !important;
}
}
border: 1px solid transparent;
}
I ran into this problem too, and found the following article:
https://css-tricks.com/the-backgound-clip-property-and-use-cases/
I set the background-clip property of the element with the linear-gradient to "padding-box" and the line/space went away.
I'm trying to make interactive cart buttons using CSS stylings. I want my "add to cart" button to invert colors (black n white only) on hover to enhance user experience.
CSS style:
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
ryanAddButton:hover {
background-color:white;
color:black;
}
HTML snippet of the button:
<p class ="ryanAddButton">Add to Cart</p>
Your original background shorthand uses a gradient which is interpreted as a background-image and so your hover declaration does not override that property.
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
/*
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
*/
background: black;
color: #fff;
font: normal 700 20px/1"Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
background-color: white;
color: black;
}
<p class="ryanAddButton">Add to Cart</p>
First of all, there's a slight typo in your CSS.
Solution 1 : (A simple one - a layman's solution) :
Secondly, Paulie_D's answer is correct. However, just as another viewpoint, if you apply the background property, why not change the same property on hover :
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1"Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
background:white;
color:black;
border: 1px solid #ccc;
}
<p class="ryanAddButton">Add to Cart</p>
Solution 2 : (A better solution - a designer/programmer's solution) :
Your background property makes use of linear gradient. However, since both the colors are same, the use of linear gradient becomes redundant. Instead, you can get the color by making use of the background-color property. This is beneficial since you wouldn't need to use vendor prefix and at the same time the browser support would be much better on older browsers.
At the same time, it reduces several lines of code by just one :
background-color : black;
Hope this helps!!!
Change the background gradient in the ".ryanAddButton" for black, and you miss the dot for class in "ryanAddButton:hover", should be ".ryanAddButton:hover"
Your background uses a gradient, which overlays the background colour. So even if you change the background colour behind the gradient, you won't see the change. You can override it by setting the entire background property, which will remove the gradient while also setting the background colour.
.ryanAddButton:hover{
background:white; /* overrides all background properties */
color:black;
}
You're also missing a . in your hover selector.
.ryanAddButton{
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover{
background:white;
color:black;
}
<p class ="ryanAddButton"> Add to Cart</p>
I've got a PIE folder in my libraries directory, and css3pie module folder in my modules directory.
I've got the following css in my layout.css:
#block-block-1, #block-block-7, #triptych, #block-block-8 {
border: 1px solid #EEEEEE;
padding: 10px 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEEEEE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEEEEE), to(#FFFFFF));
background: -webkit-linear-gradient(#EEEEEE, #FFFFFF);
background: -moz-linear-gradient(#EEEEEE, #FFFFFF);
background: -ms-linear-gradient(#EEEEEE, #FFFFFF);
background: -o-linear-gradient(#EEEEEE, #FFFFFF);
background: linear-gradient(#EEEEEE, #FFFFFF);
-pie-background: linear-gradient(#EEEEEE, #FFFFFF);
behavior: url(/../libraries/pie/PIE.htc);
}
I've enabled the module and have the following option selected: Use theme settings
Use selector settings from theme info file.
The rounded corners are not working in IE, but they are working in Firefox. What am I missing?
This site uses css3pie and it's meant to be working, but for me, on IE8 the corners are not rounded.
Perhaps try removing the first forward slash in your behavior line and see if that helps.
Try adding a position: relative into you CSS statement. I've had that issue a couple of times and it's normally resolved by doing that. Further information can be found at: http://css3pie.com/documentation/known-issues/.
Okay first the code..
<td class="btnSaveBooking">
<div class="btnSaveBookingContainder">
<div id="save">
<span class="btnImage"></span><span class="btnsavebookingspan">
<input type="submit" style="color:White;background-color:#6086AC;border-color:White;border-width:2px;border-style:Solid;font-family:Verdana;font-size:10pt;font-weight:bold;" id="btnSaveBooking" value="" name="btnSaveBooking">
(F8)</span></div>
</div>![enter image description here][1]
</td>
The images
Normal
OnMouseOver at the button
OnMouseOver at the imaage
As you can see, when user hovers exactly over the image, then only is the background of image changing, what I want is, when user even hovers over this button, the image should change.
Here's the css
.btnSaveBooking {
border-top: 1px solid #7abbde;
background: #1776a6;
background: -webkit-gradient(linear, left top, left bottom, from(#7ec5e8), to(#1776a6));
background: -webkit-linear-gradient(top, #7ec5e8, #1776a6);
background: -moz-linear-gradient(top, #7ec5e8, #1776a6);
background: -ms-linear-gradient(top, #7ec5e8, #1776a6);
background: -o-linear-gradient(top, #7ec5e8, #1776a6);
padding: 2px 20px 3px 4px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-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: #f7f7f7;
font-size: 17px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.btnSaveBooking:hover {
border-top-color: #000000;
background: #7288c9;
color: #ffffff;
}
.btnSaveBooking:active {
border-top-color: #3c637d;
background: #3c637d;
}
#save .btnImage
{
background: url("../images/save.png") no-repeat scroll 2px 5px transparent !important;
border-color: transparent !important;
height: 24px;
position: relative;
width: 28px;
margin: 1px 1px 1px 10px;
padding: 4px 2px 0 20px;
}
#save .btnImage:hover
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor: pointer;
}
You just need to change where the text ':hover' appears in your rule. As it stands, the img itself needs to be hovered. Change the rule so that when it's parent is hovered it changes.
I.e
#save .btnImage:hover
becomes
.btnSaveBooking:hover .btnSaveBookingContainder .btnImage
This way, the image changes as the button's background does. The answer already given gives you a 'two-stage' approach to the change.
Please try this:
.btnSaveBookingContainder:hover .btnImage
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor:pointer;
width:28px;
height:31px;
}
remove the #save .btnImage:hover css from your existing css, and try with the following style format,
.btnSaveBooking:hover{
/* over border, background & text color */
}
.btnSaveBooking:active
{
/* active border, background & text color */
}
.btnSaveBooking:hover #save .btnImage{
/* provide your hover image style */
}
.btnSaveBooking:active #save .btnImage{
/* provide your active image style */
}
I'm using javascript to dynamically add spans to the html on my page, and giving those spans the class "query_error" and a dynamic title based on the value of err_msg, e.g,
"<span class=query_error title='" + err_msg + "'>" + replacement + "</span>"
(where "replacement" is simply the piece of text that has the query error). All this works fine, and I can apply css to the span with
.query_error{
font-family: "Monaco", "Inconsolata", Courier, monospace;
font-size: 15px;
font-weight: bold;
color: red;
}
But I can't figure out how to add css to the title itself so I can change the font color, size, etc. Is this possible (without using a plugin)?
TIA
With CSS3 you can now target the [title] attribute but as to a real world solution i don't see any. I would rather suggest you used a plugin such as tipsy for that task, as it is more cross browser supported and less fuss.
This is a demo of a styled [title] attribute:
CSS
span:hover {
color: red;
position: relative;
}
span[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
Demo: http://jsfiddle.net/BvGHS/
Short answer, nop. The title attribute is that, a title and can't be styled.
Long answer, you probably need a tooltip plugin for this which replaces the title with an html element.
The tooltip which appears when you move your cursor over an element with the optional title attribute is a browser feature and can, as far as I know, not be styled using CSS.
You can create your own custom tooltips using JavaScript. There are a couple of plug-ins and tutorials on the web.