I have a custom element that I want to use when I am waiting for ajax requests to complete. It consists of a <paper-spinner>, but it also has the Polymer.IronOverlayBehavior .behavior. It is driven by a waiting property, on which I have an observer, so when it's set, the overlay opens.
Operationally this is working fine. Just the background color is wrong for my site.
I am attempting to style the overlay as per the docs with the following in my template
<style >
:host{
--iron-overlay-backdrop-background-color: #fff;
}
</style>
But all I get is the default style of black, rather than the white I am attempting to set.
How should I set the style so that I get a semi transparent white, rather than the semi transparent black that I am getting at the moment.
The thing with iron-overlay-backdrop is that it's a singleton that's not appended to an element's local DOM but to the main DOM.
So to set its custom css properties or mixins you should do it on a custom-style tha applies to the main DOM like this:
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-background-color: #fff;
--iron-overlay-backdrop-opacity: 0.9;
}
</style>
Here's a jsfiddle showing it in action
Related
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
For some reason I am unable to set the background color by simple using
body {
background-color: red;
}
Inside off my App.vue file.
I can change the background color by using page-content:
.page-content {
background-color: red;
}
But this is a bad hack because it also messes up my panels and other components.
Is there a sure-fire way to set background color for F7+Vue apps?
Set a classname to your page element as <f7-page class="bg" ..
and css
.bg.page {
background-color: red;
}
it depends on how you are creating your app, if you want to change a single page but no the others then probably you are either using components or having them in separate files, either way you can use a scoped style bracket to specify some css to apply only to a specific component
<style scoped>
your css here...
probably...
.page-content{
background-color:red;
}
</style>
also a good idea is when you are creating a new page give it an id so you can define styles easier and without some unexpected behaviors using the easier method above (scoped style) then you just style that specific content using
#yourID
Can anyone please explain to me what is going on over here, I am trying to override the background color to dodgerblue but for some reason the white background color is also being rendered underneath it.
I have the following snippet inside my css file.
.modal-content {
color: $dropdown-text;
background-color: dodgerblue ;
opacity: 0.9;
}
I have an angular 2 project and for some reason I cannot override the background color.
Here are the outputs with and without the white background color.
Here is the other one.
Any help with is will be much appreciated.
It's simple. You use opacity. Set opacity: 1 to modal-content
It looks like your opacity needs to be set to 1 not 0.9.
Also check that your css rule is the last one to be run by the browser. If you're trying to overwrite a rule, you need to load your libraries' css files in the header first, then your style.css last so you're changes overwrite the base library styles.
Why second time opacity show 0.5 it should be as in first 0.9. and also modal content should not be with opacity, it should be hard without opacity.
Set below property to modal instead of modalContent.
Also try with important property for back-color;
.modal, modal {
color: #7d7d7d;
background-color: dodgerblue !important ;
opacity: 1;
}
I have this bootstrap and custom css that generates nice "books on shelves". When I use the code itself it works. But when I insert the code in the div:
<div class="panel panel-default">....code from the link...</div>
suddenly the shelves disappear. I noticed that somehow pseudo elements (:before, :after) stop working when I use them in panels. Do you have an idea what is going on? Please help :)
bootstraps panel has a background color of white that overrides your :before and :after css.
.panel {
background-color: #fff; /*GET RID OF THIS*/
}
(you can choose to do this in different ways:
you can change the native bootstrap (not recommended, and you cant if you're using cdn).
add a different class on the panel and put this code in:
.newClass { background-color: none !important; }
(you can use none or transparent) either one will get your shelves css back