I want to change the scrollbar style

[BR_10233040]

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 :

[bchaudhary]

Hello @BR_10233040 

pls chek the following links:

https://community.ptc.com/t5/ThingWorx-Developers/How-to-reduce-size-of-scrollbars/m-p/727070#M51852%3F&posno=4&q=scroll%20bar%20color%20in%20mashup&source=search

https://support.ptc.com/help/thingworx/platform/r9/en/index.html#page/ThingWorx/Help/Mashup_Builder/Mashups/ConfiguringContainerScrolling.html

Kindly revert you need anything further.

Regards

Bhawna

[BR_10233040]

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.

[BR_10233040]

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 !

[bchaudhary]

Hi @BR_10233040 ,

pls let me know if this works for you.

Regards

Bhawna

[BR_10233040]

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.

[bchaudhary]

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

[BR_10233040 · Accepted solution]

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.

[NP_10149671]

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