The Godot Q&A is currently undergoing maintenance!

Your ability to ask and answer questions is temporarily disabled. You can browse existing threads in read-only mode.

We are working on bringing this community platform back to its full functionality, stay tuned for updates. | Twitter

+4 votes


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:

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.

in Engine by (35 points)

2 Answers

+5 votes
Best answer

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 =

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.)

by (338 points)
selected by


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 =
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.

0 votes


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):

button hover 1
button hover 2

Configuration of buttons:

button signals

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!!!

by (115 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.