Customize TUniProgressBar colors

[Tim]

Hello,

 

I would like to be able to change the colors used in the TUniProgressBar component. After a bit of googling and experimentation, i found that the following code in UniServerModule.CustomCSS allows me to customize the border color and the color of the right-hand portion of the progress bar:

.x-progress-default {
 background-image: none;
 background-color: #ddffdd;
 border-color:#000000;
}

But i haven't been able to figure out how to change the color of the left-hand portion (i.e. the portion whose width corresponds to the current percentage completion - by default this is blue). Any suggestions?

 

 

Many thanks,

Tim

 

[Sherzod]

Hi Tim,

 

If I understand correctly, try:

 

just add this: .x-progress-bar

.x-progress-default .x-progress-bar {
 background-image: none;
 background-color: #ddffdd;
 border-color:#000000;
}

Best regards.

[Tim]

Thanks a lot for the tip!

 

I experimented a bit more and came up with the following code which allows me to control the border, left- and right-hand portion of the scrollbar independently:

.x-progress-default .x-progress-bar {
 background-image: none;
 background-color: #ff0000;
}
.x-progress-default {
 border-color:#00ff00;
 background-color: #0000ff;
}

So the left-hand portion gets the color #ff0000 (red), the border gets the color #00ff00 (green), and the right-hand portion gets the color #0000ff (blue).