Sorry for such a simple question, but google gives me mostly results for older versions of unity which do not use the UI Builder.
I want to change the scroller low and high button and the slider width.
I see the elements in the hierarchy but they are greyed out for some reason (see image).
They are greyed out because the Scroller instantiates them as sub-controls. They are not visible in your UXML file hierarchy, but here in the builder to show they are created.
When you select these readonly elements in the Builder, you can see in the Inspector, under StyleSheet, what style classes are matching/applied to them. You can use these classes in your stylesheets to override any default styling.
In the case of low/high buttons, you could for example use the classes named .unity-scroller__slider .unity-scroller__low-button and .unity-scroller__high-button. You can also use the name of the element in your stylesheet, ex. #unity-low-button
Perfect - Thank-you
Hi!
I was wondering how we can have several different styles for scrollers.
We want several scrollers with different looking in our game.
We can overide the default selector’s styling, but it applies to all scrollers in game because they are all using the the default selector.
However, the settings are all greyed out and we can’t apply our own selectors to it.
It would be awesome if anyone could help!
I’d say the descendant selector should work in your case but you need to give a name to your ScrollView
Exactly, the descendant or child selector should work.
Names would work, or you can have different class names to add to your ScrollView, for the various scroller types, and use descendant or child selector to reach the scroller styling in uss.
Hi, thank you for your reply!
It would be wonderful if you would help elaborate or share some examples.
This is what i’ve tried: I add the code below in my uss file
In the Builder window, I still can’t apply my class to it
Then I’ve also tried highBtn.AddToClassList("my-scroller__high-button"); but it didn’t work either.
I think I am somewhat missing some basic understanding of how it works:(
#ScrollView1 .unity-scroller__high-button {
name of the scrollview (the point in giving it a name was to use it :))
space for the descendant selector
class of the item you want to edit
If you want to modify two things, you can do this I think (I’m not sure)
#ScrollView1 .unity-scroller__high-button, #ScrollView1 .unity-scroller__low-button {
Thank you very much!!!
Finally I figured it out!
Say I have a Scrollview called #test-scrollview, and I want to change the style of its horizontal scroller’s dragger.
I can use descendant selector (“Any descendants of the first selector, at any level, that also match the second selector.”) to achieve that.
Since .unity-scroller–horizontal and .unity-base-slider__dragger are already the dragger’s selector,
I can use the code below in .USS to control its style, without affecting other scrollviews’ draggers in my game.
#test-scrollview .unity-scroller--horizontal .unity-base-slider__dragger {
width: 45%;
align-self: center;
background-color: rgba(159, 159, 225, 0.8);
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
Damn , the old canvas system was so much easier to use. This UI.toolkits is way more time consuming and complex to use, for marginal improvements
I am web developer, but USS in Unity is real nightmare to styling. It only looks like normal web elements and CSS but in reality it much harder to use, most of the time behavior of Unity VisualElements unpredictable, usual tricks from web dev are not working.
Hi @dmitro1982 ,
Thank you for your message. Did you reply to this specific thread because you had an issue with styling the scrollbar? Were you able to style it?
Yes, all my attempts to apply USS to the scroll bar failed, for example if make UP/DOWN buttons smaller, the bar is still the same size and scrollbar got gaps. Such behavior is not expected, all web components will expand and fill gaps, but not in Unity.
Not related to scroll bar behavior:
Hello! That’s strange, these cases (empty class, wrong property) in a USS file should only produce warnings. I cannot reproduce on the latest version. Which version are you using?