Jump to content

Customize TUniProgressBar colors


Tim
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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). 

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...