How To Edit a StyleBoxFlat Background Colour assigned to a Panel - GDScript

Question

Hi,

I'm having problems editing the background colour of a Panel that uses the StyleBoxFlat node to assign a background via GDScript.

Currently, the StyleBoxFlat is like this:
http://postimg.org/image/xcln0q0qp/

I want to change the Background Color (Bg Color) of the StyleBoxFlat? So, how would I do this?

Iv tried to get the StyleBox using:

var panel = get_node("Panel"); //Get Panel Node.
panel.get_stylebox("panel",""); //Get StyleBox?

But I'm not sure how to get the StyleBoxFlat from a Panel.

Thanks for your time.

Answer 1

This looks like something that should be doable via code, but isn't (at least not yet) - you may want to file an issue on the godot github page about it. That said, there are a few things you can try.

Depending on how many different background colors you want to have available, you can either create them in advance and save them as resources (ie, multiple .tres or .xml stylebox files, each with their own bg color) or instance them in code:

# From an external resource - I haven't tested but this should work:
var new_style = load("path/to/bada55-stylebox.tres")

# In code:
var new_style = StyleBoxFlat.new()
new_style.set_bg_color(Color("#bada55"))

In theory, you should then be able to set that on the panel with add_style_override - but for some reason that isn't working in this scenario. So you can get the desired effect with this instead:

var panel = get_node("Panel")
panel.set('custom_styles/panel', new_style)

This actually works out well, because now that you've defined new_style, you don't have to keep instancing new styleboxes; you can update that one at any time and the panel will reflect the change.

new_style.set_bg_color(Color("#bada55"))    # green
panel.set('custom_styles/panel', new_style) # panel is now green
new_style.set_bg_color(Color("#ffaa00")     # panel is now orange

(Note that in this example, you'd only ever see the panel as orange; if you wanted to see it green, then orange, you'd have to put in a timeout or something in between lines 2 and 3.)

Comments

Hi,

Thanks for the detailed response and sorry for getting back to you really late.
I'v tried this and this is not working. Please, is it possible you can create a basic sample project of this for me that works?
I'm currently not able to get this working. The background colour stays the same.

I'm trying to do this, like you have mentioned:

var new_style = StyleBoxFlat.new()
new_style.set_bg_color(Color("#bada55"))
var button1 = get_node("Button")
button1.set('custom_styles/button', new_style)

Is this a bug with Godot?

Thanks for your time and help.

---

I think the problem's with the name of the stylebox you're trying to override. To make sure you get the right one, go to the Inspector pane in the editor, find the Custom Styles section, and hover over the name of the style (Hover, Pressed, Focus, etc). That's what you'll want to set. In the case of Button nodes, the name referencing the default style is custom-styles/normal, not custom-styles/button.

Here's a demo scene - this was made with the latest Godot, compiled from source, so let me know if you run into any issues with it.

---

Amazing! Changing it to "custom_styles/normal" has done the trick!
Thanks for your help. Really appreciate it.

---

I know this is old but is it possible to do this in C#? It doesn't look like "SetBgColor" is exposed, and trying "set("bg_color", ...) didn't work either.

Answer 2

Hello,

I'm quite new to godot (4th day of using it :)), so i don't if the issue is fixed, but I had some success in managing the background manually via script:

• set the backgrounds color to transparent on all buttons on hover, for instance
• add a sprite below the buttons
• bind buttons' signal onmouseenter & onmouseexit to a script
• resize and position the sprite depending on the button size and position
• and that's it :)

In my main menu, the button background is varying constantly, here is the result (the 3 blocks on the right are huge buttons):

Configuration of buttons:

Code linked to buttons:

btn_bg = get_node( "btn_bg" )
btn_og = get_node( "btn_og" )
func _on_btn_og_mouse_enter():
>> btn_bg.set_pos( btn_og.get_pos() )
func _fixed_process(delta):
>> btn_bg.set_modulate( Color( red, green, blue, 1 ) )

I hope this will help :)

All the best, godot rocks!!!