Topic was automatically imported from the old Question2Answer platform.
Asked By
Jams
Does anyone know of a tutorial for adding a custom theme to a slider control? I’d like to completely change the look, but cannot seem to figure out how.
After far too much trial and error, here are the properties I had to set to finally get this to work. I cannot say if it’s the correct way, but I was able to completely alter the look of the HSlider.
With the HSlider selected on the Scene tab after creating a new theme, modify the following properties within the Inspector tab…
Icons
Grabber
— Drag and drop a pre-sized custom image to use for the slider knob here.
Grabber Highlight
— Drag and drop the same pre-sized custom image to use for the slider knob here.
Styles
Grabber Area
— Create a new StyleBoxFlat
— Set desired Bg Color
Slider
— Create a new StyleBoxFlat
— Set desired Bg Color
— Set Content Margin
----- Set a Top value
----- Set a Bottom value (Top and bottom values combined determine overall thickness of the control)
Here’s how I do it programatically inside the slider script, based on the other answer.
I don’t know if there’s a better way to do it.
func set_custom_style():
var mainstyle = StyleBoxFlat.new()
var grstyle = StyleBoxFlat.new()
add_stylebox_override("slider", mainstyle)
add_stylebox_override("grabber_area", grstyle)
#Set Background Color
mainstyle.bg_color = Color(0, 0, 0) #Black
#Set Grabber Area Background Color
grstyle.bg_color = Color(1, 1, 1) #White
#Make both areas expand from the center and fill the rect_size
grstyle.expand_margin_bottom = rect_size.y / 2
grstyle.expand_margin_top = rect_size.y / 2
mainstyle.expand_margin_bottom = rect_size.y / 2
mainstyle.expand_margin_top = rect_size.y / 2
#Fake a fancy grabber using Grabber Area's right border (optional)
grstyle.border_color = Color(0.5, 0, 0) #Dark Red
grstyle.border_width_right = 10
Note: This is for Horizontal Slider, In vertical i guess you only have to change rect_size.y for rect_size.x
Note2: The faked fancy grabber is currently the Grabber Area Texture border, so if you plan to add borders to the slider you won’t be able to set a different color (maybe there are workarounds like padding a bit and using the Main border… whatever, that’s another thing haha)
I’m currently struggling to get rid of the grabber entirely from script (currently setting theme to a theme I saved with all the grabbers textures set to a new image texture) and make a new one (maybe via draw_rect()?) without messing up the borders.