I want to change the styling of paper-icon-buttons, specifically the padding that is defined on paper-icon-button via :host. However, I think this is not possible according to the specs?
So in order to change the styling, one would have to actually change the Polymer element itself, right? Which is a problem though if I want to get updates of the element via bower. Is there a way to change the :host styling with CSS outside of the Polymer element? This is not working.
paper-icon-button:host {
padding: 4px;
}
You can specify styling directly on an instance of the element or with css on the element's name - http://jsbin.com/mohifu/3/edit
Just apply the css directly to element
paper-icon-button{
padding: 4px;
}
Related
I need to style a component based on the class attached to the <body>.
The logo-placeholder is contained inside a shadow root.
The body is outside, of course.
This is what I would like to achieve:
.logo-placeholder {
background: url(logo_LIGHT.png);
}
body.dark .logo-placeholder {
background: url(logo_DARK.png);
}
A huge point with shadow dom that is self-contained. That goes with the CSS as well. Think of each component as a HTML document of its own.
If you want to style an element inside a placeholder, you need to do something like this.
<body>
<custom-element class="dark-background"></custom-element>
</body>
Then inside the custom-element, style your div based on the host's class.
:host(.dark-background) .logo-placeholder {
background: url(logo_DARK.png);
}
Another way would be to use CSS properties.
body custom-element {
--logo-placeholder-background: 'logo_LIGHT.png';
}
body.dark custom-element {
--logo-placeholder-background: 'logo_DARK.png';
}
Then declare the following inside your custom-element
.logo-placeholder {
--background-fallback: 'logo_LIGHT.png';
background: url(var(--logo-placeholder-background, --background-fallback);
}
A complete solution would be as follows:
:host-context(body.dark) .logo-placeholder {
background: url(logo_DARK.png);
}
:host-context(body.dark) means that the selector body.dark must be evaluated in the context of the host container, not based on the shadow-DOM. This is the reason it works.
Whenever we want a custom element to be styled based on its position in the DOM rather than obeying to the shadow-DOM rules, we can use the :host-context() selector.
[:host-context()] allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.
Another typical use would be to allow inner elements to react to classes or attributes on any ancestor elements - for example, applying a different text color when a .dark-theme class is applied to <body>.
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.
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
This demo demonstrates my problem: http://jsbin.com/kuxuqa/3/edit?html,output
The background is being applied to both buttons, however the mixin is not being applied to the button that is part of a custom element. How can I declare a mixin that will apply to Button 2?
For some reason I was thinking I had to target paper-button in my selector. The solution to my example was:
#test {
--paper-button {
color: red;
}
}
The key is to avoid use of /deep/ and ::shadow (since those will reportedly be deprecated). You should target only light dom with your selectors, using mixins to apply custom styling for elements in shadow dom.
I am trying to override the following found in the bootstrap class of "modal-footer"
margin-top: 15px;
I have the following HTML code that does this:
<div class="modal-footer my-modal-footer-override"></div>
and the following custom css :
.my-modal-footer-override {
margin-top: 0px
}
But this does not work.
Any suggestions ?
You could try a more specific selector. This could do the trick
.modal-footer.my-modal-footer-override {
margin-top: 0px;
}
Multiple class selectors should work in everything newer than IE6. Please note the absence of whitespace between the classes: this means that both classes are applied on the same element.
If this still does not cut it, you could put .modal before this selector, so: .modal .modal-footer.my-modal-footer-override.
The important! declaration could be used as a dirty hack, but I would advise against it.
Check your CSS import order. Make sure your custom css is loaded after Bootstrap. Use firebug or chrome dev tools to see if your styling is being overriden because of something imported laterin the html.
Have you tried this?
.my-modal-footer-override {
margin-top: 0px !important;
}
Using !important before the ";" will give this rule more weight than the bootstrap css.
You can add that inside yout HTML using ..css.. in the head, or in a new css document.