Change progress bar color in Primeng - css

How could we change the progress bar colour in Primeng. In the progress bar documentation it lists down
ui-progressbar-value
as the Element whose width changes according to value.
But when in the CSS when I set
.ui-progressbar-value {
background-color: #ef5439;
}
It does not change anything. Infact I don't see any color.
Any help would be appreciated.

First add your own unique class in your progress bar like below
class="customProgress" and then try to override it in your scss or css file.
Hope it will work
<p-progressBar class="customProgress" [value]="value"></p-progressBar>
.customProgress .ui-progressbar .ui-progressbar-label {
color: yellow;
}
.customProgress .ui-progressbar .ui-progressbar-value {
background: red;
}

I achieved the result with the following configuration:
HTML
<p-progressBar [value]="progressValue"
[ngClass]="'customProgress'">
</p-progressBar>
In the CSS file, this is what you have to add:
::ng-deep .customProgress .ui-progressbar .ui-progressbar-value {
background: #ef5439;
}

The above solutions did not work for with primeng 11. I achieved the result in this way
`<p-progressBar [value]="progressValue" class="customProgress"></p-progressBar> `
and with theming property CSS
::ng-deep .customProgress .p-progressbar-label {
background: #ef5439;
color: #fff;
}

In angular prime ng components use below method of style to change progress bar color
<p-progressBar [style]="{'background':'red'}"></p-progressBar>

Related

Conditional css on hover based on class of row of Vuetify simple table

I have a Vuetify v-simple-table where I need to render row css differently depending on whether a task is complete or not.
I can conditionally render the background color with the following code.
<tr :class="[done? 'greenBG' : 'whiteBG']">
The css is straight forward.
.greenBG {
background-color: #79ecc5;
}
.whiteBG {
background-color: white;
}
However, I cannot seem to disable the defualt :hover css. I tried connecting it to the class with this css.
tr.greenBG:hover { background-color: green }
If anyone can help me achieve this I'd be grateful.
Try with the !important property to ensure you override any conflicting vuetify CSS
tr.greenBG:hover {
background-color: green !important
}
if you really want to avoid using !important you need to be as specific as vuetify's CSS selector:
.v-data-table__wrapper
table
tbody
tr.greenBG:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
background: green;
}

how to change simplebar color in angular

I implemented a simplebar in my angular application like the one in this demo.
I tried to change the color following the documentation:
.simplebar-scrollbar::before {
background-color: red;
}
But it did not work, is there any other way to change to color ?
You're trying to change a component style from another component.
Or you change the global style or you change the component style like this:
::ng-deep .simplebar-scrollbar::before {
background-color: red !important;
}
A working example (changing from global style): https://stackblitz.com/edit/simplebar-angular-demo-2hcxnj?file=src/styles.css
Use simple css like this:
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
background-color: 'orange"
}
One of the samples uses a yellow/red gradient. You can achieve something similar like this:
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
background-image: linear-gradient( yellow , red);
}
For more details, you can read this link
https://github.com/Grsmto/simplebar/issues/431

ngx-charts-gauge title color is unable to modify

I'm trying to add ngx-charts-gauge on angular5 app page.
Following these : https://swimlane.gitbooks.io/ngx-charts/content/charts/gauge.html
Everything works fine except I don't find any way or attribute or info to change Big center title color...It stills black !
I tried to override css class...with no chance.
.chart-container {
color: white;
}
Any help would be appreciated.
Thanks.
Change your css as below it will work
:host /deep/ .chart-container {
color: white;
}
OR
:host ::ng-deep .chart-container {
color: white;
}
Reason: Component style only applies to the html in component.
To force a style down to the child component use /deep/
documentation, another reference

Polymer - Disable gray background on click

I am learning Polymer. The app I'm building to learn Polymer uses the paper-item element. I've chosen the paper-item for its look. However, when I click the paper-item, the background changes to a dark gray. How do I remove this behavior? I want the background of the paper-item to always be white. Yet, cannot figure out how to set the background color when the paper-item is clicked or selected.
Thank you for your help and have a great holiday season!
I think it's the focused behavior that needs to be changed by redefining the mixin:
<template>
<style>
:root /* or paper-item */ {
--paper-item-focused: {
background-color: white;
}
}
</style>
<paper-item></paper-item>
</template>
If this doesn't work try --paper-item-selected instead of --paper-item-focused.
I think you looking for this :
paper-item:focus::before,
paper-item:focus::after {
color: white;
opacity: 0;
}
This rule override rules from "bower_components/paper-item/paper-item-shared-styles.html" :
:host(:focus):before, .paper-item:focus:before {
#apply(--layout-fit);
background: currentColor;
content: '';
opacity: var(--dark-divider-opacity);
pointer-events: none;
#apply(--paper-item-focused-before);
}
I don't know where is import the rule on "paper-item:focus::after" but in my Chrome Developper Console I see this and I need to override it to get the behavior you want.
Regards

How to change Polymer(1.0) paper-toolbar background colour?

Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!

Resources