Skip to main content
B
BR_102330401-Visitor
1-Visitor
April 7, 2022
Solved

I want to change the scrollbar style

  • April 7, 2022
  • 1 reply
  • 6929 views

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 :

 

Best answer by BR_10233040

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.

1 reply

B
bchaudhary_4480085-Regular Member
5-Regular Member
April 7, 2022

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

B
BR_102330401-VisitorAuthor
1-Visitor
April 7, 2022

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.

B
BR_102330401-VisitorAuthor
1-Visitor
April 7, 2022

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 !

Terms & ConditionsCookie settingsAccessibility statement