Hi I'm experimenting with Polymer and trying to style some polymer paper modules... In Polymer 1.0 they added this new properties in the CSS internal to shadow DOM's module... I am trying to change a color that is dependent on one of this properties --paper-input-container-focus-color for the paper-input-container module but I could not find any clear documentation or guide on how to actually access that property from...
I can style it overriding the CSS property via /deep/ or ::shadow but from my understanding this new method is supposed to avoid using those 2...
Can anyone point me in the right direction???
CLARIFICATION:
I am interested in the mixins Google introduced in polymer... that make use of #apply(--foo-bar)
As usual I answer my own question... But I really hope it can help others not wasting days like I do..
to take advantage of this new mixins to customize your shadow-element externally you need to add a style tag with the attribute is="custom-style" in your page before placing the custom-tag.
<style is="custom-style">
my-custom-module{
--my-custom-property-color: yellow;
}
</style>
<my-custom-module></my-custom-module>
Related
I need some help on CSS since my CSS is very rusty. So I am working on a project which has a couple of global CSS files and they have properties defined for various tags (ex-> .btn). I am using an external library called Form.io in my project but those global CSS files are messing up the CSS files from the library Form.io since some of the classes are already defined in the global CSS file. Is there a way to override those specific classes so that the Form.io library uses its own CSS-defined properties and not the global CSS properties?
I tried using the :not() in the global CSS file for certain classes that I think are affecting the Form.io library but doing so affects other pages and their style so that is something I don't want. Any help or suggestions would be great.
Add !important in the end of your CSS rule to ovverride global styles.
Example:
.btn {
background-color: red !important;
}
Hope this helped.
I have a problem with styling deep shadow trees. How can i apply some styles into shadow-dom ?
Here is i tried:
<link rel="import" href="../../bower_components/polymer/lib/elements/custom-style.html">
<custom-style>
<style is="custom-style">
vaadin-text-field [part='input-field']{
display: none;
}
</style>
</custom-style>
But its not working. Any advice ?
My understanding is that you can't, see:
https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom
"The HTML elements in your template become children in your custom element's shadow DOM. Shadow DOM provides a mechanism for encapsulation, meaning that elements inside the shadow DOM don't match selectors outside the shadow DOM."
Instead you need to extend the webcomponent, making custom version of it with your styles, the linked documentation gives information on that too.
you can use vaadin-themable-mixin to style parts elements.
But please note that once theme is loaded, it's will become global, so that all vaadin control in your website is styled by your theam.
read more at:
https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes
We have to include CSS file for forge-viewer, but it breaks our own site styles. For example:
- forge CSS contains Alertify styles (they overrides our own custom Alertify styles)
- forge CSS has style for "#close" - this breaks our close buttons
- etc
That can you suggest to solve this critical problem?
CSS collisions can easily be solved by scoping your own css or the viewer one. It is hard to tell you exactly how to fix it as there are many different ways to handle it and without knowing exactly how your css/html is structured I can't tell you the best approach.
If you are using LESS or SASS, it is pretty easy: Easily scope CSS using LESS or SASS. You can scope the viewer styles by adding the viewer div id or class to its styles.
Another approach is to adapt your own css, for example your #close button must be a direct child of a specific class:
// instead of using:
#close { ...}
// add a parent class:
button#close.my-app { ... }
Hope that helps
I've found that my ng-class is overwritten when used inside an ng-repeat by the Foundation framework that I'm using. The code is relatively simple:
<tr ng-repeat="goal in goals" ng-class="goal.difficulty">
I can see the class being applied in chrome dev tools, but it is overwritten by the tables.scss styles of
tables tr:nth-of-type(even)
I have my CSS after the foundation one, so I'm somewhat at a loss as to how this happens.
Edit:
Since people don't believe it's being overwritten here is an image (you can also check out the project from Github)
http://imgur.com/BtQjInF
https://github.com/OrganicCat/goal-tracker
Try putting !important at the end of your class style definitions so that they override foundation.
That is not a solution, but it indicates that your styling is clashing with zurb. The correct answer then would be to remove the default table styling from zurb using sass, in particular:
// These control the background color for the table and even rows
$table-bg: $white;
$table-even-row-bg: $snow;
http://foundation.zurb.com/docs/components/tables.html
I do not believe the class is not being applied to the element (unless you post up some rendered html showing otherwise).
I am using Prime Faces tool tip. I want to know can i change the look and feel of the prime Faces tooltip by applying css or skinning. Like make bigger box and change the color and font of the Tooltip etc.
I am using Prime Faces 2.2
Thanks
You can change the style by adding CSS to style or styleClass attributes.
Also, I strongly recommend to upgrade to 3.0.M4 or 3.0.RC1-Snapshot!
EDIT:
I've found this piece, regarding tooltips styling: http://code.google.com/p/primefaces/source/browse/examples/trunk/prime-showcase/src/main/webapp/ui/tooltipStyling.xhtml?r=1434
As you can see there, you can apply some styling by using some css classes.
Also this is the migration guide for 3.0.M4(RC1): http://wiki.primefaces.org/display/General/Migration+Guide+to+3.0
I know this is old, but you can also go the way of overriding certain CSS properties by using style definitions with higher precedence in your general CSS file. I described this in more detail here. Colors, borders and paddings are no problem, however, the position is rather tricky as PrimeFaces places the tooltips as divs outside the normal structure and the apparently uses some computed absolute positioning to place them.