GTK3 GtkCssProvider not working - gtk3

Question

Configuration is Ubunutu Server 18.04 LTS / Xorg / openbox / GTK3
I have been struggling to figure out why I can't get GtkCssProvider to work on even the most basic item. If have been working with different examples but here is one similar to another post.
Here is the app code that will display the label.
#include <gtk/gtk.h>
int main(int argc, char *argv[])
{
gtk_init(&argc, &argv);
GtkWidget * window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
GtkWidget * label = gtk_label_new("Label 0123456789");
GtkCssProvider * cssProvider = gtk_css_provider_new();
g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
if( gtk_css_provider_load_from_path(cssProvider, "csstest.css", NULL) )
{
gtk_style_context_add_provider(gtk_widget_get_style_context(label),
GTK_STYLE_PROVIDER(cssProvider),
GTK_STYLE_PROVIDER_PRIORITY_USER);
gtk_container_add(GTK_CONTAINER(window), label);
gtk_widget_show_all(window);
gtk_main();
}
return 0;
}
The .CSS file is simple:
GtkLabel {
color: green;
}
The one post indicated that the gtk_style_context_add_provider() should be replaced with the gtk_style_context_add_provider_for_screen() call. Neither seems to have any effect. The label is appearing in the default style black on gray. So what is the trick to getting the Css style to be applied to the widget.
My requirement is to have different styles I can set to different widgets. I assume I can create some type of class construct in the Css that will allow me to apply different themes to the same widget via the gtk_style_context_add_provider() call. However I have not been able to figure that out either. I see how I can set a style in the Css for a specific named widget (via ID) but this appears to be only a predefined statc definition. Any suggestions on this would be helpful.

Answer 1

The CSS selector for a label is label, not GtkLabel:
label {
color: green;
}
See the GtkLabel API reference which lists the valid selectors.
You should also use the GTK Inspector to test CSS fragments.
You may also want to read the API reference for CSS handling in GTK, as well as the GtkStyleContext documentation.

Answer 2

Thanks ebassi for the clarification on the change to css. I shouldn't have started with an older example. Here was the completed example working in GTK 3.22 I ended up with to demonstrate the dynamic change in appearance using CSS styles:
#include <gtk/gtk.h>
GtkWidget * label1;
GtkWidget * label2;
GtkWidget * label3;
// Handler to change the appearance of the widgets from their original
void button_clicked (GtkButton * button, gpointer user_data)
{
// names are defined in the .CSS
gtk_widget_set_name( GTK_WIDGET(label1) , "" );
gtk_widget_set_name( GTK_WIDGET(label2) , "white-widget" );
gtk_widget_set_name( GTK_WIDGET(label3) , "red-widget" );
}
// Set the style provider for the widgets
static void apply_css_provider (GtkWidget * widget, GtkCssProvider * cssstyleProvider)
{
gtk_style_context_add_provider ( gtk_widget_get_style_context(widget), GTK_STYLE_PROVIDER(cssstyleProvider) , GTK_STYLE_PROVIDER_PRIORITY_USER );
// For container widgets, apply to every child widget on the container
if (GTK_IS_CONTAINER (widget))
{
gtk_container_forall( GTK_CONTAINER (widget), (GtkCallback)apply_css_provider , cssstyleProvider);
}
}
int main(int argc, char *argv[])
{
gtk_init(&argc, &argv);
GtkWidget * window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
GtkCssProvider * cssProvider = gtk_css_provider_new();
GtkWidget * fixed = gtk_fixed_new();
GtkWidget * button = gtk_button_new_with_label ("Change");
//create the labels for this test
label1 = gtk_label_new("Label 0001");
label2 = gtk_label_new("Label 23456789");
label3 = gtk_label_new("Label 3");
//setup container and add widgets
gtk_container_add (GTK_CONTAINER (window), fixed);
gtk_fixed_put( GTK_FIXED(fixed), label1 , 30 , 30 );
gtk_fixed_put( GTK_FIXED(fixed), label2 , 30 , 50 );
gtk_fixed_put( GTK_FIXED(fixed), label3 , 30 , 70 );
gtk_fixed_put( GTK_FIXED(fixed), button , 30 , 110 );
//register the handlers
g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
g_signal_connect(button, "clicked", G_CALLBACK(button_clicked), NULL );
if( gtk_css_provider_load_from_path(cssProvider, "csstest.css", NULL) )
{
apply_css_provider( window , cssProvider );
// set a default style - name is defined in .CSS file
gtk_widget_set_name( GTK_WIDGET(label1) , "red-widget" );
gtk_widget_show_all(window);
gtk_main();
}
return 0;
}
csstest.css:
/* default coloring of widgets */
* {
background-color: #00ee00;
}
#red-widget {
color: white;
background-color: red;
}
#white-widget {
color: red;
background-color: white;
}
button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-image: none;
}