I want to target some woocommerce elements on my website and change color and make some css changes. When using the inspector on my website I find:
<div class="woocommerce-form-coupon-toggle">
and assume I could write the following as a css code in wordpress
.woocommerce-form-coupon-toggle {
background-color #000000 !important;
}
When doing this, nothing happens.
The property and value in CSS should be separated by a colon :. Like the following:
.woocommerce-form-coupon-toggle {
background-color: #000000 !important;
}
Try to check for the whole tree, class by class. it should become a larger property, but would work.
body class1 class2 .woocommerce-form-coupon-toggle {
background-color: #000000 !important;
};
I assume you are styling the toggle coupon form in the checkout form. See image
You should be styling the .woocommerce-form-coupon-toggle .woocommerce-info not the .woocommerce-form-coupon-toggle alone.
To do this try this code.
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info{
background-color: #000000 !important;
}
Related
This is a minor-but-annoying issue (typical web design) with color styling on my submit button. I'm using the page builder Elementor with OceanWP theme in WordPress. Site URL is http://catalystweb.design (under construction, of course)
The issue is that the colors seems to be "muted" on :active and :focus states. They are being applied, but not with full vibrancy.
I am linking to a brief screencast (12 seconds) of the issue, and including the custom CSS I've inserted into that page specifically. FYI the !important flags seem to be required to override some of the theme/builder styles, which makes it even more baffling as to why they are not fully applied in this case.
You'll see that the hover state of the button delivers the colors I've set; but on :focus (using tab) they are muted, and the same on :active (when clicking).
button[type=submit]:focus {
border: 2px solid #63C1FF !important;
background: #ffffff !important;
color: #63C1FF !important;
}
button[type=submit]:active {
border: 2px solid #ffffff !important;
background: #63C1FF !important;
color: #ffffff !important;
}
Thanks, any insights appreciated!
Your stylesheet here: http://catalystweb.design/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=1.8.8
has an opacity setting on hover:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
color: #fff;
opacity: .9;
}
How you want to approach fixing that is up to you, while I don't recommend using !important; if you can avoid it:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
opacity: 1 !important;
}
would work, or a slightly better approach such
button.elementor-button:focus,
button.elementor-button:hover,
button.elementor-button:visited {
opacity: 1;
}
would work. You can put this in your main stylesheet or in the Additional CSS are of the customizer, or wherever you've been adding custom CSS.
I already set textfield background colour into transparent but not working in Ionic.
.item .item-input {
background-color: transparent;
}
I already read the Ionic documentation but it's not working. It's still white colour.
http://ionicframework.com/docs/components/#forms-inline-labels
Are you sure your css rule matches the correct element?
Your rule:
.item .item-input {
background-color: transparent;
}
Matches an element with class item-input, which is a descendant of an element with class item. Perhaps you meant the following?:
.item.item-input {
background-color: transparent;
}
This rule matches an element with class item and item-input.
In Angular (as your question has an Angular tag), the answer is to use --background
--background: transparent !important; // example
see https://ionicframework.com/docs/api/input#css-custom-properties (select : Angular from the list to see Angular related docs)
Maybe a bit of a hack, but could you put the text inside another div and give the div a special background colour.
So, something like this:
.text {
background-colour: red; // or colour: red; I don't know
}
and then put the text between this div. Hope it helps.
.label {
background-color: reba(255, 255, 255, 0.0);
}
Then put the CSS rule on the ion-item element like this:
<ion-item class="label">
I would like to change the home icon of the Primefaces Breadcrumb with another icon but I can't find how.
I tried with CSS but it is not working for the icon:
.ui-breadcrumb {
background: none !important;
border: none !important;
icon: url('resources/images/look/bandeau.png')
}
It should be enough with:
.ui-breadcrumb .ui-icon-home {
background-image: url("#{resource['images/look/bandeau.png']}");
background-position: 0; /* asuming bandeau.png is a single image */
}
But you have to make sure two things:
First, that you are overriding primefaces css correctly, you shouldn't need !important. See this. If you are doing it right, at least you will see that the default image dissapear.
Second, you have to make sure that you are referring to the image correctly. In my code, I show how I do it myself, but it depends on your configuration so you should also check this.
Try to target that specific icon by doing so:
.ui-breadcrumb ul li .ui-menuitem-link.ui-home {
background: none !important;
border: none !important;
background-image: url('resources/images/look/bandeau.png') !important;
}
Also check if the background image hyperlink is correct.
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've a blog hosted on WordPress.com, and i purchased the "Custom CSS" update to modify CSS. Now I want to change some CSS options of Syntax Highlighting provided by Wordpress.com. For example, i want that
[code lang="C"] int main() { } [/code]
will be displayed with a black background instead of standard white one. I've added in Wordpress.com Appareance > Modify CSS the following code:
.syntaxhighlighter
{
background-color: black !important;
}
As explained here, but it doesn't works.
Any idea?
The solution is to not only change the background of the whole syntaxhighlighter, but also of each line, similar to this:
.syntaxhighlighter
{
background-color: black !important;
}
.syntaxhighlighter .line .number
{
color: white !important;
background-color: black !important;
}
/* First line */
.syntaxhighlighter .line.alt1
{
background-color: black !important;
}
/* Second line */
.syntaxhighlighter .line.alt2
{
background-color: black !important;
}
As you're using black as a background-color, i advise you to ensure that color has enough contrast compared to it.
Also, using the firebug plugin for firefox you can see exactly which CSS rule gets applied where, and which classes are availble for styling. (a must when working on hosted systems.)
BTW: I found the soluion at the second link you gave