GTK3 : How to add background color for GTKButton

[harshith_raj]

Hi,

I’m working on GTK3 application in cpp. I’m trying to add background to GTKButtton. Im using css to do so.

css = g_strjoin (nullptr, "* { color:#0000FF;\n background-color: #0000FF;\n   font-style: normal;\n  font-weight: bold;\n  font-size: 16px;\n}\n", nullptr);
provider = gtk_css_provider_new ();
gtk_css_provider_load_from_data (provider, css, -1, NULL);
context = gtk_widget_get_style_context (button);
gtk_style_context_add_provider (context, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

With this I was able to set color, font-size, font-weight, font-style for GTKButton. But the backgrpund color is not set!

And with the same set of code i was able to set backgroung color for GTKEntry. But not able to set background color for button.

What did i miss here, how to fix this?

Thank You
harshithraj p

[gwillems]

Hi,

Some theme will add a CSS background-image property to buttons, that will override the background color. Try adding background-image = none; to your CSS.

You can start your program with the GTK inspector to see what CSS properties are actually applied:

GTK_DEBUG=interactive your_application

[gwillems]

Also, on a side note, try to avoid applying CSS providers to specific widgets. That may cause unexpected behavior.

Better apply CSS providers to the whole application:

  provider = gtk_css_provider_new ();
  gtk_css_provider_load_from_data (provider, css, -1, NULL);
  gtk_style_context_add_provider_for_screen (gdk_screen_get_default (), GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

Then add specific CSS classes to your widgets.

[harshith_raj]

Thank you for the response @gwillems , this was helpful.

After adding CSS providers to the whole application, how to add CSS class for GTKWidget?

I tried this but it did not work, and also gtk_widget_add_css_class is not part of GTK3

css = g_strjoin (nullptr, "#button {background-image: none; \n background-color: #0000FF}\n", nullptr);

provider = gtk_css_provider_new ();
gtk_css_provider_load_from_data (provider, css, -1, NULL);
gtk_style_context_add_provider_for_screen (gdk_screen_get_default (), GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
context = gtk_widget_get_style_context (textedit);
gtk_style_context_add_class (context, "button");

What did i miss here?

[gwillems]

gtk_widget_add_css_class() is the API for gtk4. For gtk+3 use gtk_style_context_add_class() instead.

The syntax #button is for named widgets, i don’t think it’s what you need here. For specifying a class style, use .myclass, or button.myclass for restricting to buttons only. (see CSS doc here)

What about this?

css = g_strjoin (nullptr, ".bluebackground {background-image: none; \n background-color: #0000FF}\n", nullptr);

provider = gtk_css_provider_new ();
gtk_css_provider_load_from_data (provider, css, -1, NULL);
gtk_style_context_add_provider_for_screen (gdk_screen_get_default (), GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
context = gtk_widget_get_style_context (textedit);
gtk_style_context_add_class (context, "bluebackground");