Why doesn't this work? The text color changes, but the opacity does not.
<style>
.button:hover{
color: #FFFF00;
opacity: 0;
}
</style>
https://jsfiddle.net/tmgordon/veL0n4g2/2/
Inline styles override CSS. So get rid of that HTML style attribute or you'll have to use JavaScript. Style everything with external CSS, so it gets cached into the users Browser as well. Make sure you change the src if you change your CSS, or the Clients Browser may remember the old CSS.
You can try this.
<style>
.button {
opacity: 0.3;
}
.button:hover{
color: #FFFF00;
opacity: 0;
}
</style>
Related
Is there any way to revert the default styling of button:disabled WIHTOUT using all: unset? I don't know what is being changed because if I do something like this:
button:disabled {
opacity: 1;
}
it still dosent work
Try styling the background-color instead of opacity
button:disabled {
background-color: #ccc;
color: black;
}
<button disabled>Button Disabled</button>
<button>Button</button>
I'm using AdminLTE 2.3.8. It overrides buttons background on it's box header buttons when hovered, but I want to keep original colors when hovered over any buttons. Eg.:
AdminLTE CSS:
.btn-default {
background-color: #f4f4f4;
}
.box.box-solid>.box-header .btn.btn-default {
background: transparent;
}
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
background-color: #e7e7e7;
}
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
background: rgba(0,0,0,0.1);
}
I just want to get rid of these .box.box-solid>... rules without editing vendor's CSS. Is there any way to achieve this without copying every button style (there are different colors)? If there is, solution would be very welcome.
Use !important within your styles, so that any other vendor styles doesn't conflict with these buttons.
Example:
.btn.btn-default:hover {
background-color: blue !important;
}
Hope this helps!
I need to override css style for a particular element with another css file's style in gwt.
I have tried by the following code
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.addStyleName("butt");
The alert is coming. but the style has not been overridden. the css code is
.sendButton {
display: block;
font-size: 16pt;
color:red;
}
.butt{
font-size:32pt;
visible:false;
color:green;
}
the button font is in red colour only it is not changed to green. i have included this css in html file as well.
so please tell me how to override one css style by another css file's style in gwt.
Thanks in advance
Try this
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.setStyleName("butt");
setStyleName Clears all of the object's style names and sets it to the given style.
If this is the style that you want applied to all buttons, you can override the style the GWT applies to all buttons: gwt-Button.
Alternatively, try:
color: red !important;
or be more specific with your CSS selector so that other CSS rules do not take precedence.
I am assuming the .gwt-button and .gwt-Button-selected are the default style names(provided by GWT) of you button.
You can do sth like below. Here I have removed some css properties(all properties are random here). You should write these css properties in your UIBinder.
#external .gwt-Button;
.gwt-Button {
cursor: pointer;
cursor: hand;
color: #3e3e3e;
font-weight: bold;
text-align: center;
background: white;
margin-top: -6px;
margin-top: -33px;
margin-left: -1px;
}
#external .gwt-Button-selected;
.gwt-Button .gwt-Button-selected {
cursor: default;
background: white;
}
I am working with this page.
The stylesheet-files and most of the design are written by another programmer.
In frogn.css the background-color is set that should be used for the outside area of the page (in which there is no information). E.g. like here.
In the page I am working with, the background-color is overwritten by the color from bootstrap.less
I prefer not to change the settings of the bootstrap-files, since it can affect other pages.
How do I enforce the background-color of frogn.css to be displayed ?
I tried using !important after the colour-attribute, but it didn't help.
*Update:
I am noticing that setting !important after background-color actually worked. I did only a ordinary refresh, so I got the cached version of the page.
in frogn.css i can see that the body background already has !important
body { background-color: #eaeaea !important; color: #333; }
and there's also a more specific rule applied:
#front { background-color: #EAEAEA !important; }
To overwrite these rules, you've to provide an even more specific selector, for example:
html #front { background-color: #FFF !important; }
this will be "heavier" and should overwrite the default values.
Doing this did solve the problem:
body { background-color: #eaeaea !important; color: #333; }
I'm new to CSS. Ive created a Drupal site and playing with the theme.
I have some breadcrumb stuff that I would like to theme. If I go into Firebug and turn off the CSS properties
background
border-color
border-style
in the below code
.breadcrumbs .inner {
background: none repeat scroll 0 0 #EFEFEF;
border-color: #929292 #E2E2E2 #FFFFFF;
border-style: solid;
border-width: 1px;
color: #8E8E8E;
}
I get the text looking exactly how I want it.
If I now go into my style.css which is inheriting the code and post
.breadcrumbs .inner {
border-width: 1px;
color: #8E8E8E;
}
The formatting I don't want is retained. If I specify .breadcrumbs .inner in the style.css does that not set it up again and override what was specified higher up the cascade?
If that is not the case how do I stop the inheritance without changing the other style sheet?
Thanks,
Andrew
Additional Info
Here is what I have at the moment
This is what I want to have
You're overriding CSS does not replace the 3 styles you want to change, so the original ones are maintained. What you likely want to do is have your style.css set something like this:
.breadcrumbs .inner {
background: none;
border-color: transparent;
border-style: none;
}
If you specify the CSS styles for same classes twice the resulting style is a union of the attributes defined in both classes. To remove the previous styles you have to redefine the attributes.
If for example you have these css attached to your html document
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/posts.css">
if you have the same class say .color defined in the both default.css and posts.css files, you would imagine that that last css file will be used, but it can be ignored if you write it like so:
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green;
}
// In this example the colour would be blue.
Using !important on inherited style forces inherited style to be used, if you want to override the inherited style then you can simply add !important to post.css
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green !important;
}
// In this example the colour would be green.
Now both are viewed as important and the last one will be used.