cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

I want to change the scrollbar style

BR_10233040
4-Participant

I want to change the scrollbar style

Hey everyone !
I am design a good loking ui interface, anyone know if it's possible to change the color/style of the scrollbar in the mashup ?

here is a screen of my front-end application :

 

1 ACCEPTED SOLUTION

Accepted Solutions

Hello,

I did tried to add the following code in the custom CSS:

body * ::-webkit-scrollbar {
width:5px;
height:10px;
}
/* Track */
body * ::-webkit-scrollbar-track {
background:#3c6380;
}
/* Handle */
body * ::-webkit-scrollbar-thumb {
background: #12243a;
}

 but I got no change from it. I did noticed however when running the application on firefox, all the scrollbar were actually dark (I don't know why) so as it is not meant to be a deployed app but more like a demo project, I'll use firefox for it instead of Chrome.

For user that wants to make dark ui, it would be very appreciated to be able t change scrollbar easily through Thingworx.

View solution in original post

8 REPLIES 8

Hey thanks for your reply !

I checked the documentation already but what i want is "change the color/style" of a scrollbar, no removing it or disabling it which is what your link is referring about.

Thanks again,

 

B.

just saw that:
body * ::-webkit-scrollbar {
width:5px;
height:10px;
}
/* Track */
body * ::-webkit-scrollbar-track {
background:#3c6380;
}
/* Handle */
body * ::-webkit-scrollbar-thumb {
background: #12243a;
}

will test it, ty !

Hi @BR_10233040 ,

 

pls let me know if this works for you.

 

Regards

Bhawna

So I tried to add the code mentioned above in the custom CSS section in my style name called DarkTheme but it doesn't work.

However; I noticed  by switching from chrome to firefox that the scrollbar appears in darkmode in firefox even without code (the built in darkmode of firefox has nothing to do with it) .

From what I understood the webkit-scrollbar is not directly related to thingworx so I don't know if something must be done to apply it in a thingworx mashup.

 

I have a half-working solution - using firefox but I still would like to know if someone knows exactly what to set to change the color of scrollbar.

B.

Hello @BR_10233040 ,

 

Pls check the given link:

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

 

Also you can only change in the Chrome browser only.

P.S. It is NOT advisable to use such features on PROD environment as it is not a standard supported feature.

 

Regards

Bhawna

Hello,

I did tried to add the following code in the custom CSS:

body * ::-webkit-scrollbar {
width:5px;
height:10px;
}
/* Track */
body * ::-webkit-scrollbar-track {
background:#3c6380;
}
/* Handle */
body * ::-webkit-scrollbar-thumb {
background: #12243a;
}

 but I got no change from it. I did noticed however when running the application on firefox, all the scrollbar were actually dark (I don't know why) so as it is not meant to be a deployed app but more like a demo project, I'll use firefox for it instead of Chrome.

For user that wants to make dark ui, it would be very appreciated to be able t change scrollbar easily through Thingworx.

Hey @bchaudhary 

 

What you did for changing the color of dropdown scrollbar? Which CSS have you used?

Can you please tell me.

 

 

Thanks and regards,

Nilam

Top Tags