CSS properties on GTK 3 app

Applications
,
1

Hi,
I’ve developed a Gtk 3 (C) app on my linux laptop and it works great; i set the style of the buttons on my style.css file like this:

#sensor_green {
/* background-color: rgb(0,200,100); */
border-radius: 50px;
background-color: #399622;

}

#sensor_red {
background-color: rgb(173, 0, 0);
border-radius: 50px;
animation:blink 1s linear infinite;
}

In the code:

    GtkCssProvider *cssProvider = gtk_css_provider_new();
    GError *error = NULL;
    gtk_css_provider_load_from_resource(cssProvider, "/css/style.css");
    gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

    if (error)
    {
        // Display a warning if the stylesheet is not loaded
        g_warning("%s", error->message);

        // Free the memory allocated for the error
        // and acknowledge the error has been processed
        g_clear_error(&error);
    }

And change the name of the GtkButton to apply the syle based on the context.
Everything works great!

Now I have to to run my app on a Linux Debian Bullseye 11, Linux Kernel 5.4.142 SOM IMX8 CPU, with Wayland and Weston compositor; i installed the gtk3-dev package and just changed the include from “x86_64” to “aarch64”. The app run, everything seems to works except that the “background-color” properties in the CSS file that is not applied: the buttons are round ( border-radius: 50px; so the css file is loaded and applied) but the color doesn’t change and remain the default button color. I’ve tried to change to a standard color (like red, white), or use a dirrerent color definition (the hex value) but nothing seems to work.

Thank you very much for any suggestions

2

If you’re using the standard GTK theme, then you need to add background-image: none to your style.

Also: do not use identifiers; define CSS classes, and then use gtk_style_context_add_class() and gtk_style_context_remove_class().

The widget name is not unique, and it’s not really meant to be used for styling—that’s just a side effect.

1 Like
3

Thank you very much for you reply, adding background:none do the trick!

But i want to understand better the other approach (Style classes):
I understand that i have to crete classes for buttons like this in my style.css file:

 .sensor_green {
   background-color: rgb(0,200,100);
   border-radius: 50px; 
   background-image: none;}
.sensor_red {
  background-color: rgb(173, 0, 0);
  border-radius: 50px; 
  animation:blink 1s linear infinite;
  background-image: none;}

And in the code do something like:

 if (gtk_style_context_has_class(gtk_widget_get_style_context(widget), "sensor_green") == FALSE) 
 {
        // Remove old/past classes

        gtk_style_context_add_class(gtk_widget_get_style_context(widget), sensor_green);
 }

My biggest concern is that i don’t know how to remove old style classes; my buttons must have just one class at time. Also my gui updater timer run every 500 milliseconds, but most of the time there is no change on the buttons, so it would be good a method that change only when style class is changed; now i get the name from the button and change it only if it’s different from the one that i have to set.
Maybe i can simply call gtk_style_context_remove_class() with all the possible style classes for the button and in the end add the one desired?

Thank you for any reply!!!
Have a nice day