CSS styles are not applied in gtk4 using c language

Question

I am trying to add a custom coloring to the buttons and elements in a gtk4 GUI written in c language, from the docs I found the functions to load and set the css class name for the different widget that i am using but for some reason the styles are not applied and I get a window with a white background containing only a button with a white color

static void activate(GtkApplication * app, gpointer user_data)
{
    GtkWidget * window;
    GtkWidget * box;
    GtkWidget * btn;
    GtkWidget * txt;
    GtkEntryBuffer * text;
    GtkCssProvider * provider;


    // create window
    window = gtk_application_window_new(app);
    gtk_window_set_title(GTK_WINDOW(window), "CSS example");
    gtk_window_set_default_size(GTK_WINDOW(window), 800, 800);


    // load css file 
    provider = gtk_css_provider_new ();
    gtk_css_provider_load_from_file (provider, g_file_new_for_path ("styles.css"));
    gtk_style_context_add_provider_for_display (gtk_widget_get_display (window),
                                                GTK_STYLE_PROVIDER (provider),
                                                GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);



    // create the box and set the height and width 
    box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
    gtk_widget_set_halign(box, GTK_ALIGN_CENTER);
    gtk_widget_set_valign(box, GTK_ALIGN_CENTER);

    // add box to main window
    gtk_window_set_child(GTK_WINDOW(window),box);
    
    // create text 
    text = gtk_entry_buffer_new("hello world", strlen("hello world"));

    // create text widget 
    txt = gtk_text_new();
    gtk_text_set_buffer(GTK_TEXT(txt), text);
    gtk_window_set_child(GTK_WINDOW(window), txt);

    // use css from file 
    gtk_widget_class_set_css_name(GTK_WIDGET_GET_CLASS (txt), "txt");

    // adding button 
    btn = gtk_button_new_with_label("clickme");
    g_signal_connect(btn, "clicked", G_CALLBACK(print_hello), NULL);
    gtk_widget_class_set_css_name(GTK_WIDGET_GET_CLASS (btn), ".btn");
    gtk_window_set_child(GTK_WINDOW(window), btn);


    gtk_window_present(GTK_WINDOW(window));
}

here is styles.css

.txt 
{
    background-color: blue;
    color: black;
}


.btn
{
    color: blueviolet;
}

Why isn't this code applying the css to the GUI application

May be there is some problem with accessing the CSS file, and not with applying styles to a window. Have you considered testing the result of gtk_css_provider_load_from_file()...? — CiaPan
– CiaPan, Commented Feb 3, 2023 at 11:26
@CiaPan how would i do such thing gtk_css_provider_load_from_file does not return anything — binary_psychic
– binary_psychic, Commented Feb 3, 2023 at 12:35
Woops... GTK3 used to provide both a return value of the gboolean type and an option to prepare a struct GError container to receive an error description (doc 3 link), but GTK4 apparently assumes nothing can go wrong (doc 4 link). — CiaPan
– CiaPan, Commented Feb 3, 2023 at 13:24
Possibly you'll have to follow a hint from GTK4 CssProvider doc: 'To track errors while loading CSS, connect to the GtkCssProvider::parsing-error signal.' — CiaPan
– CiaPan, Commented Feb 3, 2023 at 13:29
As no better suggestion appears, I copied my comment above to the answer. — CiaPan
– CiaPan, Commented Feb 23, 2023 at 19:41

CiaPan · Accepted Answer · 2023-02-23 19:40:12Z

1

Possibly you'll have to follow a hint from GTK4 CssProvider doc: 'To track errors while loading CSS, connect to the GtkCssProvider::parsing-error signal.'

answered Feb 23, 2023 at 19:40

CiaPan

9,5802 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cheetaiean · Accepted Answer · 2023-04-14 22:01:16Z

1

Do not use the period in setting the name or referring to it, as that interferes with css functionality. So gtk_widget_class_set_css_name(GTK_WIDGET_GET_CLASS (btn), ".btn"); should become

gtk_widget_class_set_css_name(GTK_WIDGET_GET_CLASS (btn), "btn");

and in your CSS file .btn should be just

btn {
    color: blueviolet;
}

Keep in mind gtk_widget_set_name() may be what you are looking for, as it does not compmletely remove the native css styling of the GtkWidget. The name you set here can be referred to in the CSS file with a hashtag.

edited Apr 14, 2023 at 22:01

answered Apr 14, 2023 at 21:53

Cheetaiean

9412 gold badges15 silver badges31 bronze badges

Comments

edscott · Accepted Answer · 2024-07-24 22:59:47Z

0

Apparently CSS is now deprecated for styleContext for individual widgets. A single CSS for display is used for all. Single widgets are customized with a specific class definition.

See: This cool explanation

edited Jul 24, 2024 at 22:59

answered Jul 24, 2024 at 14:20

edscott

671 silver badge7 bronze badges

Collectives™ on Stack Overflow

CSS styles are not applied in gtk4 using c language

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related