How to modify background color of a button

[magicmicah (Micah Magruder)]

Hello. I’m just starting out to learn GTK as I want to get into GUI development. I’m starting with a simple app with buttons and some of the buttons I’d like to have a different color so I assumed this would be the background-color css property but it doesn’t seem to be. I know my css is working because other properties like font-size and border-color work. Below is some sample code I’m working with in testing. Line 12 describes the problem in a comment. Any suggestions?

#include <gtk/gtk.h>

static void activate (GApplication *app, gpointer user_data)
{
  GtkWidget *window;
  GtkWidget *box;
  GtkWidget *button;
  GtkCssProvider *provider;
  window = gtk_application_window_new (GTK_APPLICATION (app));
  gtk_window_set_default_size (GTK_WINDOW (window), 400, 400);
  provider = gtk_css_provider_new ();
  // Problem code. The font-size and border does change when hovering, but the background-color property does not change.
  gtk_css_provider_load_from_data (provider, "button.highlight:hover {background-color: red; font-size:25px; border-color: yellow; border-width: 1px;}"
                                             "button.highlight {background-color: blue; font-size:15px; border-color: black; border-width: 1px;}", -1);
  gtk_style_context_add_provider_for_display (gdk_display_get_default (), GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
  box = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 1);
  button = gtk_button_new_with_label("Hello World");
  gtk_window_set_child (GTK_WINDOW (window), box);
  gtk_box_append(GTK_BOX(box), button);
  gtk_widget_add_css_class (button, "highlight");
  gtk_window_present (GTK_WINDOW (window));
}

int main (int argc, char **argv) 
{
  GtkApplication *app;
  int stat;
  app = gtk_application_new ("org.example", G_APPLICATION_DEFAULT_FLAGS);
  g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
  stat = g_application_run (G_APPLICATION (app), argc, argv);
  g_object_unref (app);
  return stat;
  
}

[dboles]

In the Default/Adwaita theme, buttons have gradient background-images by default, and background-images are drawn over background-colors. You’ll need to remove that, if you are only wanting the color:

#YourButtonSelector {
  background-image: none;
  background-color: /*whatever*/ ;
}

Or set background-image instead of -color, perhaps advisable if you want the buttons to look more like normal ones in the theme(s) you target.

[magicmicah (Micah Magruder)]

Thank you! Setting background-image: none worked. For this demo app, I just want some color differences between buttons but as I get more into development I’ll look at how to integrate well with different themes. Thank you again.

[dboles]

Glad it worked! If that solved the problem, you can mark it as the solution