Global CSS Limitations

Ask the community
, , , ,
1

Topic:
Let’s get some global customization innovations added :slight_smile:

Product:
Wix Studio

What are you trying to achieve:
I want to change some global css aspects to the website like you can in custom web applications like React or Angular. For example, I would like to add webkits to change the scrollbar color and design.

What have you already tried:

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar {
  /* right: 0; */
  width: 6px;
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #2A8A9D;
  border-radius: 40px;
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar:hover {
  display: inherit;
}

Additional information:
For anyone who’s wondering, it’s not possible to change the color of the scrollbar in Wix using Velo or any other method provided by Wix. The CSS I provided above is correct (and works in custom web applications) for changing the scrollbar appearance in a standard HTML/CSS context, but Wix does not allow direct access to the site’s global CSS or the CSS of the scrollbar.

The reason for this is that Wix operates within a closed development environment, which means that users are not allowed to modify certain aspects of the site’s design and functionality, including the scrollbar’s appearance. I’m sure this is done to ensure the consistency and stability of the platform.

The only solution for this context
If you want to have a custom scrollbar, you might consider creating a custom component that mimics the behavior of a scrollbar. However, this would be a complex task and would not affect the main scrollbar of the browser window, only the specific component where you implement it.

Why the heck would we do that?

TLDR
My hopes in creating this thread is so that I can express how us developers like more control into the global settings of Wix. Perhaps even peak a few developers interest who would like to do the same thing. Currently, there is no way of customizing certain global settings due to Wix’s closed development environment. Of course I (and we) appreciate security first but it’s a nice wishlist.

Other ideas
Along the same lines, it would be nice to add some easier logic for light/dark mode. Last time I attempted it, it was not possible to do for sections, just boxes. Seems like a way more complex task in Wix than it is in web apps. Nonethless, this is a nice to have feature.

2

Thanks for all the feedback, and in most cases you’re right.

That being said, using custom elements does allow you to apply styles in other places, and there are a few apps available for customizing various parts of the site. Albeit this one requires purchase, but allows for customising your scrollbar - https://www.wix.com/app-market/scrollbar-design-customize

1 Like