CSS reset overriden background color - css

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!

Related

Editing Bootstrap default styles

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

CSS deactivate a hover of a parent class

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.

Select2 hover color with CSS

I've been trying to change the default blue hover color to something different in the Select2 elements in the website I'm designing, but no success so far. What's the correct, working css selector which would allow me to change the background color and font color of the hovered choice in the Select2 elements?
Thank you in advance!
Edit:
.select2-drop:hover {
background-color: #efefef;
}
I've tried .select2-container, choice but no success. The added code changes the whole dropdown color on hover, but I need it to only change the hovered option.
Try this
.select2-results .select2-highlighted {
background: #f00;
color: #fff;
}
You can use this to change the hover color, works for the Select2 V4.0.1
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #F0F1F2;
color: #393A3B;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: red;
color:white
}

Changing the background color on focused select box option does not work

This is specifically with the selectBoxIt jQuery plug-in, using the jQueryUI theme.
I have this set up for the hover action:
/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
That works fine. When I hover my mouse over the options, I get a red background with white text.
However, when I do this...
.selectboxit-option:focus .selectboxit-option-anchor:focus {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
...nothing changes.
I see that all the demos on selectBoxIt's main web page DO have changing background colors with keyboard focus...so what am I missing?
Technically, each option doesn't use the focus event, which is why the focus pseudo selector is not working for you. For the jQueryUI theme, the "active" option adds the ui-state-focus class, so to change the "focus" CSS style, you could have a rule like this:
.selectboxit-option.ui-state-focus {
background: #CCC;
}

format dojo DataGrid header row

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;
}

Resources