Everyone,
I am a newbie in WordPress (working on localhost). I want to change the hover color of WooCommerce mini cart widget button.
I have written the following code:
.widget_shopping_cart .button {
margin:0.5em 0 0;
width:100%;
background: white !important;
}
.widget_shopping_cart .button:hover {
width:100%;
background: white !important;
}
It works, though when I hover over the button (background color set to white) though I get the grey overlay on top (regardless my selected hover background color). This is totally bugging me as it ruins my selected color by making it dirtier (darker). How can I get rid of it? I am using flat some theme.
.widget_shopping_cart .button:hover {
width:100%;
background: white !important;
box-shadow: none !important;
}
set the css property box-shadow to none and you are good
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I'm really stuck with finding where I can override the bootstrap control for auto-complete background color of a form-control to something other than white as it does not look good for my dark theme.
Input Control - Background color goes white after entering a input value using auto complete:
This is no good, needs to the gray colour
I was also getting a similar behavior for a select (dropdown box), after selecting an item from the list, the background was going white as you see in the image below:
I did find a solutoon for the select dropdown list which is to overrride Bootstrap with custom CSS, see below:
select.form-control:focus::-ms-value {
color: #ffffff; /* Set text to white for selected item */
background-color: transparent; /* remove background color for selected item*/
}
I am still however looking for a solution in changing the default background color for autocomplete from white to the gray color of my theme, thx
The background on autocomplete in chrome is inherited from Webkit. To address this field try to use:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
-webkit-text-fill-color: green;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
-webkit-text-fill-color: green;
}
You can change white for background color and green for your desired font color.
Testing on Chrome, this is the rule that applies on text inputs when autocompleting:
input:-internal-autofill-selected {
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
You could try changing that to your own styles and see if it works.
I've recently created a menu item in my wordpress menu, that I have styled differently, so that it looks like a call to action button as appose to a navigation item.
I went to menus > then css classes (on the item) and added callout-button
I then added the following to my themes custom CSS,
.callout-button a {
background-color: #8E3D86;
color: #fff !important;
border-radius: 8px;
}
.callout-button a:hover {
background-color: #b8b8b8 !important;
border: 1px solid #8E3D86;
-webkit-transition: all 400ms;
transition: width all 400ms;
}
.callout-button a:after {
display: none !important;
}
Now this does correctly style the button, however the :hover doesn't work properly, the background colour isn't changing and is also adding an extra border (which is part of my normal menus css)
Does anyone have any ideas on how i can make this override the normal menu css?
When I click play button, subttitles button or fullscreen button, That shows a blue border or blue box-shadow, so every video.js player have that, i want to disable that i have try like this but is not working!
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-`big-play-button`,
.vjs-flat-skin .vjs-fullscreen-control,
.vjs-flat-skin .vjs-subtitles-button,
.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button {
border: none !important;
box-shadow: none !important;
}
so this code i think is not corect, so i need an other CSS code to disable all those blue borders, or box-shadows?
Try removing the comma from the selector and back-ticks from "big-play-button"
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-big-play-button,
.vjs-flat-skin .vjs-fullscreen-control,
.vjs-flat-skin .vjs-subtitles-button,
.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button { /*Remove comma from end*/
border: none !important;
box-shadow: none !important;
}
Here is the demo: http://jsfiddle.net/lotusgodkk/0a5u3ew4/834/
Here is the original video: http://jsfiddle.net/bababalcksheep/0a5u3ew4/2/
I work on PrimeFaces and I am trying to edit css properties of components. while working on growl, I am trying to change closing icon color but I just can't. I tried a lot and a lot and still couldn't figure out.
You can see at the top-right corner, Its background color yellow which I set it that but I cant change icon color. Its always that blue. Here are my codes about growl;
.ui-growl{
position:fixed;
top:20%;
left:38%;
width: 23%;
}
.ui-growl .ui-state-highlight{
background: #d2524f;
border: #d2524f;
}
.ui-growl-message{
float: left;
font-size: 15px;
margin: 2% 0 0 22%;
}
.ui-growl .ui-growl-icon-close{
background-color:yellow;
}
The closing icon is drawn with background-image attribute via the following CSS selector:
.ui-state-highlight .ui-icon {
background-image: url("/showcase/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-omega");
}
Changing the color attribute will have no effect. To change the icon color you have to modify the image url. This answer gives some hints on that topic.
Tested with PrimeFaces ShowCase.