How to make buttons of different colors in Python GTK3 (using gi)?

Question

My last puzzle is to create a small application in Python3 using GTK3 with colors other than the foggy ones on the buttons. The last few days I spent on the Internet searching for how to do this, and so far all that I tried has failed. Not just failed, but failed silently, without error messages, to let me know what was going on.

This is my test application:

from gi.repository import Gtk, Gdk class ButtonWindow(Gtk.Window): def __init__(self): super().__init__(title="Button Test") self.set_border_width(10) hbox = Gtk.Box(spacing=10) self.add(hbox) hbox.set_homogeneous(False) # make the button button = Gtk.Button('Test Button') hbox.pack_start(button, True, True, 0) # try to change its colour .... # button.modify_base(Gtk.StateType.NORMAL, Gdk.color_parse('green')) # button.override_background_color(Gtk.StateType.NORMAL, Gdk.RGBA(0, 1, 0, 1)) # button.override_background_color(Gtk.StateType.NORMAL, Gdk.RGBA(0x00ff00)) # button.modify_bg(Gtk.StateType.NORMAL, Gdk.color_parse("green")) # button.modify_bg(Gtk.StateType.ACTIVE, Gdk.color_parse("green")) # button.modify_bg(Gtk.StateType.SELECTED, Gdk.color_parse("green")) # attempt to change the style .... # style = button.get_style().copy() # style.bg[Gtk.StateType.NORMAL] = Gdk.color_parse('green') # style.bg[Gtk.StateType.ACTIVE] = Gdk.color_parse('red') # style.bg[Gtk.StateType.SELECTED] = Gdk.color_parse('blue') # style.bg[Gtk.StateType.PRELIGHT] = Gdk.color_parse('black') # button.set_style(style) # ok, let try changing the box .... # hbox.modify_base(Gtk.StateType.NORMAL, Gdk.color_parse('green')) # hbox.override_background_color(Gtk.StateType.NORMAL, Gdk.RGBA(0,1,0,1)) # hbox.override_background_color(Gtk.StateType.NORMAL, Gdk.RGBA(0x00ff00ff)) # hbox.modify_bg(Gtk.StateType.NORMAL, Gdk.color_parse('green')) window = ButtonWindow() window.connect("delete-event", Gtk.main_quit) window.show_all() Gtk.main() 

I left my unsuccessful attempts as comments. As noted above, with regard to the application, it seems to have worked because none of the above options generate any error messages. However, none of them seem to work for me, because the buttons remain the color of outdated utensils.

FYI I am using Python 3.2.3 under Ubuntu 12.04 with python3-gi and python3-gi-cairo installed from a standard repository.

Can anyone point me in the right direction?

EDIT: The following is a reuse example based on @mike's answer. This works, but there are some problems with it, perhaps they will be discussed in some subsequent questions. Problems:

• Why should background be used in Ubuntu instead of background-color , and then only for the button?
• I still have problems setting up the fonts, but at least right now I have a working example for the game.
• You can use different styles / colors for different buttons, for example. based on text or some other attribute?

So the code: -

 from gi.repository import Gtk, Gdk class ButtonWindow(Gtk.Window): def __init__(self): super().__init__(title="Button Test") self.set_border_width(10) hbox = Gtk.Box(spacing=10) self.add(hbox) hbox.set_homogeneous(False) # make the button button = Gtk.Button('Test Button') hbox.pack_start(button, True, True, 0) # get the style from the css file and apply it cssProvider = Gtk.CssProvider() cssProvider.load_from_path('gtkStyledButtonTest.css') screen = Gdk.Screen.get_default() styleContext = Gtk.StyleContext() styleContext.add_provider_for_screen(screen, cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_USER) window = ButtonWindow() window.connect("delete-event", Gtk.main_quit) window.show_all() Gtk.main() 

and the css file looks like this: -

 GtkWindow { background-color: #0000ff; } GtkButton { color: #ff0000; background: #00ff00; } 

I hope someone finds this helpful.

Answer 1

GTK3's preferred way is to use CSS for styling. In Ubuntu 12.04, you may need to use a background instead of a background. But I do not know Python, so I will just give a link.

https://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/

Answer 2

Even if this is an old question, I would like to add an answer related to question 3 for reference only.

GTK3 adds the concept of style classes. Thus, to get different colored buttons, you can access them directly with a name or add a style class to your context. All this is explained in the links provided in his answer.

Here is a simple example of using styles to highlight invalid text in posts:

 from gi.repository import Gtk, Gdk class MainWindow(Gtk.Window): def __init__(self): super().__init__() vbox = Gtk.Box(spacing=10,orientation=Gtk.Orientation.VERTICAL) self.add(vbox) self.entries = [ Gtk.Entry() for i in range(3) ] for e in self.entries: vbox.pack_start(e, True, True, 0) e.connect("changed", self.on_entry_changed) e.set_text('123') button=Gtk.Button('ok',name='ok-button') vbox.pack_end(button,True,True,0) def on_entry_changed(self,entry): ctx = entry.get_style_context() if not entry.get_text().isnumeric(): ctx.add_class('invalid') else: ctx.remove_class('invalid') cssProvider = Gtk.CssProvider() cssProvider.load_from_path('style.css') screen = Gdk.Screen.get_default() styleContext = Gtk.StyleContext() styleContext.add_provider_for_screen(screen, cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_USER) window = MainWindow() window.connect("delete-event", Gtk.main_quit) window.show_all() Gtk.main() 

with style.css:

 GtkEntry.invalid { background-color: #ffaaaa; background: #ffaaaa; } GtkButton#ok-button { background-color: green; background: green; } 

Answer 3

Inspired by @boosth, this is a modified code (wrap the button and apply color to the wrapper - see lines commented out with # <---- ).

However, when it changes the color of the event window, the button itself remains unchanged. So this is NOT what I was looking for, but so far this is the best answer.

 from gi.repository import Gtk, Gdk class ButtonWindow(Gtk.Window): def __init__(self): super().__init__(title="Button Test") self.set_border_width(10) hbox = Gtk.Box(spacing=10) self.add(hbox) hbox.set_homogeneous(False) # make the button button = Gtk.Button('Test Button') buttonWrapper = Gtk.EventBox() # <---- buttonWrapper.add(button) # <---- hbox.pack_start(buttonWrapper, True, True, 0) # <---- # change the colour of the wrapper .... buttonWrapper.modify_bg(Gtk.StateType.NORMAL, Gdk.color_parse("green")) buttonWrapper.modify_bg(Gtk.StateType.ACTIVE, Gdk.color_parse("red")) buttonWrapper.modify_bg(Gtk.StateType.SELECTED, Gdk.color_parse("blue")) window = ButtonWindow() window.connect("delete-event", Gtk.main_quit) window.show_all() Gtk.main() 

There must be a way to do this ....