WordPress/WooCommerce question: enter image description hereAnyone have good CSS for changing the hover color behind an Add to Cart field? (See pics--cursor hover changes one field's background to grey.)
Without being able to see the code on your website, generally the process is:
Target the element that you want to change the color for
Set a new color on hover
You'll need to find the class or ID that's being used on the element that surrounds your Add to Cart button. You can do that by right-clicking on it, and choosing Inspect.
Your CSS will look something like:
.class:hover {
background-color: #333; /* whatever color you want */
}
Here's more on the CSS hover selector: https://www.w3schools.com/cssref/sel_hover.asp
Related
This class .elementor-kit-8 input[type="submit"] sets the button's color and background color the same essentially making the text look invisible any idea how I can fix this?
Seems to be a typical Elementor glitch.. My usual workaround is simply adding custom CSS by (potentially adding a class or ID) and then selecting the class/ID and adding the respective hex code.
If you want the text color to be white, for instance, your code would look something like this:
.password-submit {
color: #fff;
}
I am trying to change a default focus border color in my ExtJS app. At the moment I use ExtJS 6 and its default Theme-Triton...
Is there a way to modify CSS property to affect all elements and change focus border color from blue to red (for example)?
You can create your own custom theme that extends to "theme-triton" then you can create a SCSS file with your custom colors, like $form-field-focus-border-color: #ff1744 to change the border color of the focused items in a form
Checkout on how to create the custom theme here
Otherwise, if you don't want to create your own theme, you can try to edit the css classes that are applied to the element you want to edit:
.x-form-trigger-wrap-focus{
border-color:#ff1744 !important;
}
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
I have a bootstrap popover kicking in when a user clicks on the Contact link. I managed to style the popover itself, but can't figure out how style the little arrow that points to the link.
What is that element? What is the class? I can't catch it in the F12 tools because it always goes away when I try to inspect the element.
Basically I want the background color of the arrow to match the popover.
Just like it is indicated in this possible duplicate, you want to use this css rule :
.popover.top > .arrow:after{
/*stuff here*/
}
I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);