Problems while using gtk+3 and Css

Question

I am using C language to create a GUI with GTK+3 and I want to make the style of the app with CSS. The problem is that the widget doesn't accept the style that I gave to them, unless I use the * selector in my CSS file. At first time I try to make a single CSS file for all the app using gtk_style_context_add_provider_for_screen() but that didn't work. So I tried to set the style widget by widget using a function :

  void SetStyleWidget (GtkCssProvider *CssProvider, char *Path, GtkWidget *Widget)
{
    gtk_css_provider_load_from_path (CssProvider, Path, NULL);
                                                                   
    gtk_style_context_add_provider (gtk_widget_get_style_context(Widget), GTK_STYLE_PROVIDER(CssProvider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION); 
                                  
    gtk_style_context_save (gtk_widget_get_style_context(Widget));
}

This don't work either. I also see that it could be a priority problem but no matter what priority I add it doesn't work. Do someone got an answer to my problem?

Here's my c file and my css :

#include <stdlib.h>
#include <gtk/gtk.h>
#include <gmodule.h>
#include <gdk-pixbuf/gdk-pixbuf.h>
#include "RandFuncGTK.h"

int main(int argc, char **argv)
{
    GtkWidget *pWindow;
    GtkWidget *pBoxLevel0;
    GtkWidget *pTitreImg;
    GtkWidget *pBoiteTitreImage;
    GtkWidget *pLabTest;
    GtkCssProvider *CssProvider;

    gtk_init(&argc, &argv);

    CssProvider = gtk_css_provider_new ();

    pWindow = CreateWindow(pWindow, "Test", 1000, 1000);

    pBoxLevel0 = gtk_box_new(GTK_ORIENTATION_VERTICAL, 100);
    gtk_container_add(GTK_CONTAINER(pWindow), pBoxLevel0);

    pLabTest = gtk_label_new("Test");
    SetStyleWidget(CssProvider, "css/labstyle.css", pLabTest);
    gtk_container_add(GTK_CONTAINER(pBoxLevel0), pLabTest);

    gtk_widget_show_all(pWindow);

    g_signal_connect(G_OBJECT(pWindow), "destroy", G_CALLBACK(gtk_main_quit), NULL);

    gtk_main();
    return EXIT_SUCCESS;

}

Here's my css file

GtkLabel {
    color: blue;
}

You should add the provider to the StyleContext for the display. CSS added to individual widgets doesn't work in expected or very useful ways. If that "didn't work", then show what you did (widget code _and_ CSS), and explain what happened and why that was wrong - because that's the correct approach for 99.999% of users and the one worth salvaging. — underscore_d, Jul 10 '20 at 14:53
The text correctly display but without any style , unless i use the * selector in my css file — blablu, Jul 10 '20 at 15:26
There is a good reason why we have [Object Hierarchy](https://developer.gnome.org/gtk3/stable/ch02.html) from where you can choose the needed object like in your case de [GtkLabel](https://developer.gnome.org/gtk3/stable/GtkLabel.html). If you select your Object and [You scroll to its Description](https://developer.gnome.org/gtk3/stable/GtkLabel.html#GtkLabel.description) you get all the answers you need. — Michi, Jul 11 '20 at 06:59

underscore_d · Accepted Answer · 2020-07-10T16:05:34.877

GTK stopped using widget type names as CSS node names in version 3.18 or so, and from then on, you have to check the C class documentation to see what node names, classes, and so on are available to theme. In this case, it would be

label { [...] }

I also recommend loading the StyleContext to the Display, not individual widgets. So, basically, use a modern version of GTK (ideally latest point 3.24.x, but at least 3.22) and the documented CSS selectors, and you're good to go.

Once doing that, if you only want to affect individual widgets, then just add CSS classes to them and select on those classes:

gtk_style_context_add_class(my_label_style_context, "the-precious");

and then select in CSS on

label.the-precious { [...] }

or just

.the-precious { [...] }

A fuller example is available in this other answer.

That is better than adding StyleContexts to individual widgets because doing that tends not to work how users expect (in terms of inheritance and such).

You can also set CSS IDs on widgets (like #the-precious), but that is less often used and IMO not really needed in GTK and more of a faff to set up IMO.

Note that the default GTK theme, Adwaita, was refreshed during 3.24 - so if you want to theme your application against that, it's best to do so from the latest available version of 3.24 - and hope it doesn't change again in 3.x...

Problems while using gtk+3 and Css

1 Answers1