Customizing AIO Reviews Widget Scrollbar

Ask the Community Customization
1

image
image247×1265 10.2 KB

I am trying to change the scrollbar track color but can not find the CSS that controls the scrollbar/scrollbar track.

Is this possible to do/change?

3 Likes
3

Hi there, @Sam_S :waving_hand:

I’ve forwarded your request to the devs. I’ll update you once I hear back from them :slightly_smiling_face:

1 Like
4

Thank you for waiting!

We’ve checked your widget and see that this scrollbar and see that it’s not displayed there anymore.

However, our devs still prepared a CSS code for you in case you’d like to get it back:

.global-styles,
.es-layout-sidebar-background-container {
  --scroll-track-color: #af0;
  --scroll-thumb-color: #f0a;
  --scroll-thumb-color-hover: #a09;
  
  overflow: auto scroll;
  scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
}

.global-styles,
.es-layout-sidebar-background-container::-webkit-scrollbar {
  width: 17px;
}

.global-styles,
.es-layout-sidebar-background-container::-webkit-scrollbar-track {
  background: var(--scroll-track-color);
}

.global-styles,
.es-layout-sidebar-background-container::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-color);
  border-radius: 10px;
  border: 4px solid var(--scroll-track-color);
}

.global-styles,
.es-layout-sidebar-background-container::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-color-hover);
}

The colors are set here :slightly_smiling_face:

image
image629×480 30.3 KB

1 Like
5

Thanks for the update - the CSS works

2 Likes
6

Perfect, you’re very welcome :wink: