Button CSS not working in Juno

Question

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; }";

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

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

   profileButton1.get_style_context().add_class ("PROFILE_BUTTON_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