I have two style sheets in page.html:
parent.css and child.css
In parent.css I have:
#MAINTable tr:hover
{
background:#C0C0C0;
}
I need to deactivate this from child.css
I'm doing:
#MAINTable tr:hover{text-decoration: none !important;}
But this is not working. What am I doing wrong?
Thanks a lot!
PD: Sorry if the question was too simple, learning CSS here
You can try this to overwrite the background:
#MAINTable tr:hover {
background: transparent;
}
Parent.css defines the background, but child.css only sets the text decoration. They both stay, due to the nature of CSS. You need to override it manually.
In child.css:
#MAINTable tr:hover{
text-decoration: none !important;
background: none transparent !important;
}
If child.css is after parent.css you don't need the second !important. I used none transparent so that it also overrides any background images.
Related
I want to modify the color and the border in a Bootstrap nav bar but when I write this on my SCSS nothing happens:
.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
When I inspect the element in Chrome my code is dismissed, It only takes into account the Bootstrap default style.
Image
Any help will be welcomed.
Thanks.
For a CSS rule to be overriden, you have a lot of options. The cleanest would be to be more specific (by at least one rule) than the one you want to override.
If I follow your example:
.nav-tabs li.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
You'll find more informations here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I am working on a wordpress template. I need my menubar to be transparent, but it is giving me quite a hard time.
Until now I added the following css code in the "Custom CSS". But I keep getting a grey colored background. Does anybody knows how I can make a transparent background in the CSS?
.fixed-header #header {
background-color: rgba(1,1,1,0.0) !important;
}
.fixed-header #header {
background-color: transparent;
}
Try this:
.fixed-header #header {
background-color: rgba(1,1,1,0.0) !important;
opacity: 0.5 !important;
background-color: transparent !important;
}
you need to add style in your style.css file
#header {
background-color: rgba(1,1,1,0.0) !important;
}
Install this plugin for including custom css and js
Try this:
.fixed-header #header {
background-color: transparent;
}
You might be editing wrong css file. Or your website is cached. Try pressing CTRL + F5 to refresh page.
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 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 want to assign a background color to my programmatically created Dojo DataGrid's header row. I've tried to override the defaults by adding .dojoxGridHeader or .dojoxGrid-Header to my style sheet, but these have no effect.
Is there another way, such as with a Dojo event or property? If my style sheet is the only way to go, am I using the wrong class?
Thanks!
Alan
With the help of Internet Explorer's "Developer Tools," I discovered which CSS classes controlled the styling of the Dojo DataGrid header row.
I needed to add ".tundra" in front of .dojoxGridHeader because the .tundra stylesheet is at the top of the hierarchy.
This worked for me:
.tundra .dojoxGridHeader, .tundra .dojoxGridHeader .dojoxGridCell {
vertical-align: bottom;
color: #FFFFFF !important;
background: #530619;
border-color: #ECE2D8;
font-weight: bold;
}
Add both styles:
.dojoxGridHeader .dojoxGridCell {
background-image: none !important;
background-color: #A6BB3F !important;
}
.dojoxGridHeader .dojoxGridCell div {
color: black;
}