How to replicate SettingsScreen uss proprerty to my project?

[tiagofoil]

Hello!
Im trying to make almost the same SettingsScreen in my project. Using the Dragon Crashers UI Toolkit example. I was able to do almost everything but the slider.
The slider background img is broken.
I found where it was defined. It was in SettingsScreen.uss

In this section:

#unity-dragger {
background-image: url(‘project://database/Assets/UI/Textures/UI_atlas.psd?fileID=-3395496807846359274&guid=68de98d899585b7469e0fb40a0fcbc56&type=3#bt_05’);

I have copied the UI_atlas.psd to my UI/Textures folder but I couldnt manage to make the url to access the sprite bt_05 in it.

I have tried:

1. /Assets/UI/Textures/UI_atlas.psd?bt_05
2. /Assets/UI/Textures/UI_atlas.psd?#bt_05
3. /Assets/UI/Textures/UI_atlas.psd?type=3#bt_05
4. Many other options, and nothing works.

Anyone, please, can help?

Here is what I have got so far:

[dlorre]

Just do it from the UI Builder? Here’s one of my sprites:

.pc-f11 {
    background-image: url('project://database/Assets/Textures/Icons/function-keys.png?fileID=-996593261&guid=2e08f7057cacd7e40b6d6508d65a9e88&type=3#PC_F11');
}

You load the style sheet in UI Builder and then create the uss class and select the sprite, it will do the job for you.

[tiagofoil]

Hello, dlorre!

It didnt work for the specific case of the slider. Because I can’t edit the VisualElements under the slider called “settings__slider1”. Look:

So, I think I should edit the USS file directly. And I could do it if I had the sliders images separated as .png files. But I have it in an Atlas called “UI_atlas.psd” . My question is, how I can access it inside an UI atlas in .psd?
And I know there is a way to do that because in the example they used this URL command:
url(‘project://database/Assets/UI/Textures/UI_atlas.psd?fileID=-3395496807846359274&guid=68de98d899585b7469e0fb40a0fcbc56&type=3#bt_05’);

[dlorre]

First make sure that the class is correct by checking it on a standard Visual element, second you need to find the right selector to assign. It should be fine with the debugger but if you can’t find it then the older versions of Unity have UI Toolkit as a separate package so if you get this you can check the theme code to help you find the selector.

[dlorre]

Actually I’ve done this didn’t realize yesterday:

#video-scroll > .unity-slider__input > .unity-base-slider__drag-container {
    background-color: black;
}

#video-scroll > .unity-slider__input > .unity-base-slider__drag-container > .unity-base-slider__tracker {
    background-color: white;
}

#video-scroll > .unity-slider__input > .unity-base-slider__drag-container > .unity-base-slider__dragger_border {
    background-color: pink;
}

#video-scroll > .unity-slider__input > .unity-base-slider__drag-container > .unity-base-slider__dragger {
    background-color: white;
    -unity-background-scale-mode: scale-to-fit;
    height: 69%;
}

Naturally you should replace #video-scroll with your slider name, probably #settings__slider1

[tiagofoil]

Thank you @dlorre , for your help. But I have found the solution.

The problem was in the file ID and guid in the img file, and my url.

So I have created a new Visual Element in my builder and asign the bt_05 as background img. And I copied the url() from the uxml file and pasted it in my USS.

The url that fixed the slider for me was:

#unity-dragger {
background-image: url(‘project://database/Assets/Foil/UI/Textures/UI_atlas.psd?fileID=-6223216866055834395&guid=366eba7eb9b68784bb9b41bf4e591a18&type=3#bt_05’);

As you can see, it bacame almost the same as the original, but with my personal folder in the path (Foil) and the new file id and guid.

And I had to use this project://database thing as well. I think its necessary to open inside the Atlas.psd.

Anyways, thank you so much for the help!

[dlorre]

Yep, I have an empty UIDocument that I use for editing styles, UI Builder knows best what to do: