[Thunar] Strange "double background" on file/folder names with gtk css

[Matthew Brooks]

I've been customizing the gtk css for thunar, and I've managed to make it mostly transparent (yay!), but for some reason there's apparently two different backgrounds behind the file/folder names, and I can't seem to get rid of the second, hard-edged, one while still keeping the one with rounded corners.

I've confirmed the issue occurs on a fresh Ubuntu 24.04 live disk, as well as a Xubuntu 24.04 one, so it's not a wayland or X thing, and shouldn't be related to my particular system. I'm running thunar version 4.18.11 at the moment, with gtk version 4.12.5-r2. I didn't think to check which version the liveCD's were running though.

I've attached a screenshot to show the issue. As you can see, there's both a background with nice rounded corners that I've specified through the gtk css file, but there's also a strange secondary one that's totally rectangular.

The whole file/folder pane is the "widget" entry in the gtk-debug's "CSS nodes" list (I used "GTK_DEBUG=interactive thunar" to get the debugger to show up), and you'll notice there's no child nodes, and yet adding a second, child, "widget" entry in the .css file does effect the text of the file/folder icons.

I'm not sure what the issue is, but my vague guess is that maybe there's a hard-coded background (the rectangular background is just *barely* visible behind the text with the default "Adwaita-dark" theme and no custom css) that's showing up to keep the text visible regardless of the theme, but the .css files can also add another background maybe? I'm not at all familiar with gtk or css though, so that's mostly a shot in the dark.

Setting that child "widget" entry that effects the file/folder names to have "background: transparent;" *does* get rid of the rectangular background entirely, but also the rounded one. So both of them *are* a background of some sort, and *can* be changed by the gtk css, but I'm not able to work out how to change them separately from each other so I can get rid of the rectangular one. I've tried setting everything below the second "widget" entry (via "... widget widget *") to be transparent, but that has no effect. Nor does trying to set the background of "text"/"label"/"icon" children of the fisrt or second "widget" do anything either.

It's possible this is an issue with gtk itself, but since the extra "widget" entry isn't actually listed in the gtk-debug css nodes list, I figured it would be best to ask about it here first, since it seems like maybe thunar is doing something custom or semi-custom with that element that might be breaking the gtk css stuff.


Semi-relatedly, the folder/shortcut view on the left pane doesn't seem to have any ability to give the text a background (which would be nice so that the rest of that pane could be fully transparent), but that's a comparatively small issue.


As for my .css files, in "~/.config/gtk-3.0/gtk.css" it's just:

@import 'thunar.css';


And the "thunar.css" file in the same directory is this (notice in the first one, the second "widget" entry, specifying a child of the file/folder view that's also a "widget"):

/* Main file view */
.thunar grid paned paned grid paned notebook scrolledwindow widget widget {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.thunar grid paned paned grid paned notebook scrolledwindow widget {
    background: transparent;
}

.thunar {
    background: transparent;
}


/* Tree view (left-pane) */
.thunar grid paned box scrolledwindow treeview widget{
    background-color: rgba(1, 1, 1, 0.5);
}

.thunar grid paned box scrolledwindow treeview {
    background: transparent;
}

.thunar grid paned box scrolledwindow {
    background: transparent;
}


/* Statusbar */
.thunar grid paned paned grid widget statusbar frame box label {
    background-color: rgba(1, 1, 1, 0.4);
    border-radius: 5px;
}

/* Location bar */
.thunar grid toolbar {
    background-color: rgba(1, 1, 1, 0.2)
}

/* Search bar */
.thunar grid toolbar toolitem widget box entry {
    background-color: rgba(1, 1, 1, 0.2)
}

/* Search pane */
.thunar grid paned paned grid paned notebook stack scrolledwindow treeview {
    background-color: rgba(1, 1, 1, 0.4)
}

.thunar grid paned paned grid paned notebook stack scrolledwindow treeview header button {
    background-color: rgba(1, 1, 1, 0.4)
}


/* Multiple tabs view: */
.thunar grid paned paned grid paned notebook header {
    background: rgba(1, 1, 1, 0.2);
}

.thunar grid paned paned grid paned notebook tab {
    background: rgba(1, 1, 1, 0.2);
}

.thunar grid paned paned grid paned notebook stack {
    background: transparent;
}
-------------- next part --------------
A non-text attachment was scrubbed...
Name: thunar_issue.png
Type: image/png
Size: 693587 bytes
Desc: not available
URL: <https://mail.xfce.org/pipermail/xfce/attachments/20240829/ffc5d1b1/attachment-0001.png>