I'm using this code to apply some dynamic css to button based on colours chosen by the user. This was working in Loki but not working in Juno Beta. Thanks in advance for any pointers.

1.Create a CSS String (dynamically) with custom colors:

dynamicCSSContent  = "GtkButton.PROFILE_BUTTON_1 { color: #000000; background-color: #fbfbfb; border-color: #B0C4DE; } GtkButton.PROFILE_BUTTON_2 { color: #586e75; background-color: #fdf6e3; border-color: #B0C4DE; } GtkButton.PROFILE_BUTTON_3 { color: #93a1a1; background-color: #002b36; border-color: #B0C4DE; }";
  1. Set the css and load the same. Actual code here.

    cssProvider = new Gtk.CssProvider(); cssProvider.load_from_data(dynamicCSSContent, dynamicCSSContent.length); Gtk.StyleContext.add_provider_for_screen( Gdk.Screen.get_default(), cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION );

  2. Apply the CSS to the buttons. Actual code here.

    profileButton1.get_style_context().add_class ("PROFILE_BUTTON_1");

1 Answer 1


Thanks to @DanielForé for pointing me at the CSS change in GTK 3.22 which is the root cause of the issue.

Selectors for Gtk widgets have changed in GTK 3.22. Instead of “GtkButton”, the selector is now “button”.

So instead of the following CSS (works in Loki):

GtkButton.PROFILE_BUTTON_1 { color: #000000; background-color: #fbfbfb; border-color: #B0C4DE; }

The correct CSS for Juno (which uses GTK 3.22):

button.PROFILE_BUTTON_1 { color: #000000; background-color: #fbfbfb; border-color: #B0C4DE; }

Reference for all widget's selector names are listed here: https://developer.gnome.org/gtk3/stable/index.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.