Search code examples
csstreeviewgtk3pygobjectgtktreeview

GTK TreeView styling

Short version: What CSS selector can be used to style the background of a GTK TreeView header?

Long version: I've tried treeview header, treeview header .button, .button, button, label, GtkTreeView header, header and * as selectors for the header of a Gtk.TreeView. Of these, button works to change the colour of the text in the header (the color attribute) but not the background (background-color). label changes the colour of the background behind the header text, but leaves a big area around the text at the default. * works, but of course changes everything else, too.

Solution

  • I've tried to use Gtk Inspector on a simple python example and it reported the treeview class as .view and the button on the header as .button. Setting a custom css provider to the application with:

    cssProvider = Gtk.CssProvider()
cssProvider.load_from_path("custom.css")
Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(), cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_USER)

    and the custom.css file with the following content:

    .view .button { color: Red; background: Cyan; font-weight: bold; text-shadow: none; box-shadow: none; }

    The result was:

    result ui

    Here you can see the treeview header with font color as Red and backgroung as Cyan.

    Tested on Fedora 23.

    EDIT

    On Fedora 26, it's as documented. you should use:

    treeview.view header button { color: Red; background: Cyan; font-weight: bold; text-shadow: none; box-shadow: none; }

    and the result is similar.