CODEWITHSUNDEEP
csscgtk
blablu
blablu

Reputation: 47

Problems while using gtk+3 and Css

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;
}

Upvotes: 1

Views: 723

Answers (1)

underscore_d
underscore_d

Reputation: 6791

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...

Upvotes: 2

Related Questions