How to Style a Gtklabel with CSS

How to style a GtkLabel with CSS?

Currently, CSS providers are not inherited to the children style contexts. So you need to add the CSS provider to the screen using gtk_style_context_add_provider_for_screen()

Try changing

gtk_style_context_add_provider(gtk_widget_get_style_context(window),
                               GTK_STYLE_PROVIDER(cssProvider),
                               GTK_STYLE_PROVIDER_PRIORITY_USER);

to

gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
                                          GTK_STYLE_PROVIDER(cssProvider),
                                          GTK_STYLE_PROVIDER_PRIORITY_USER);

I don't think gtk supports multiple screens these days, but gtk_widget_get_screen() could be used to replace gdk_screen_get_default().

GtkLabel use markup while keeping CSS styling

to style all the text you could try

GtkLabel *{
color : red;
}

this selects pretty much selects everything in gtk labels(like all states) and applies the css style to all of it.

to Style only the link part select the subnode "link"

label link{
color : red;
}

how to style gtk widgets individually with css code

The CSS file doesn't know about the names that you give to your variables in your program. You have to name the widgets with gtk_widget_set_name().

How to add css style context providers for all labels in a grid?

I've modified your code, this will change the background of the labels:

#include <gtk/gtk.h>

static void activate (GtkApplication* app, gpointer user_data)
{
    GtkWidget *window = gtk_application_window_new (app);
    gtk_window_set_title (GTK_WINDOW (window), "Window1");
    gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);

    GtkWidget *grid = gtk_grid_new ();
    gtk_container_add (GTK_CONTAINER (window), grid);
    GtkWidget *label1 = gtk_label_new("Hello world!");
    gtk_widget_set_hexpand( label1, TRUE);
    gtk_grid_attach(GTK_GRID (grid), label1, 0,0,1,1);
    GtkWidget *label2 = gtk_label_new("Simple Gtk example");
    gtk_widget_set_hexpand( label2, TRUE);
    gtk_grid_attach(GTK_GRID (grid), label2, 0,1,1,1);
    GtkCssProvider *provider = gtk_css_provider_new ();
    GdkDisplay *display = gdk_display_get_default();
    GdkScreen *screen = gdk_display_get_default_screen (display);
    gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_USER);
    gtk_css_provider_load_from_data (
        provider, "GtkLabel { background-color: #AAAAAA;}", -1, NULL);

    gtk_widget_show_all (window);
}

int main (int argc, char **argv) {
    GtkApplication *app = gtk_application_new(
        "org.gtk.example", G_APPLICATION_FLAGS_NONE );
    g_signal_connect( app, "activate", G_CALLBACK(activate), NULL);
    int status = g_application_run(G_APPLICATION(app), argc, argv);

    g_object_unref (app);
    return status;
}

Result:

Multi-color text in one Gtk.Label

It is possible to style substrings of a Gtk.Label using CSS, though it does involve a bit of a workaround.

Here is one example written in Javascript: https://github.com/endlessm/eos-knowledge-lib/blob/d4c9666/js/app/utils.js#L170-L225

Basically it involves temporarily adding another style class to the widget's context to pick up the extra styles from your CSS, then translating that into Pango markup. You would call format_ui_string() when constructing your label and also whenever the style is updated (style-updated signal.)

---

Related Topics