[HowTo] Solve transparency issue in XFCE4-panel - window buttons

[fabien]

Problem:
After upgrading from XFCE4 4.16 (Bullseye) to 4.18 (Bookworm), you may experience a loss of transparency issue if your window buttons use transparency.

How to reproduce the issue:
Open two terminals, each on a different desktop. On one of the terminals, perform an action (yes, it's strange, you need this to reproduce the problem), for example

Code: Select all

$> less /etc/fstab

then quit less (q) and change desktop: the terminal button has lost its transparency.

The base theme I use is Greybird-dark, see /usr/share/themes/Greybird-dark/gtk-3.0/gtk-dark.css but I already had to solve this problem with the default theme Adwaita.

Proposed solution to resolve the problem:
create the file ~/.config/gtk-3.0/gtk.css with your favorite editor, for example

Code: Select all

$> vi ~/.config/gtk-3.0/gtk.css

paste this code:

Code: Select all

.tasklist .toggle {
   transition-duration: 500ms;
   transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background-color: transparent;
   background-image: none;
}
.xfce4-panel.background .tasklist button:checked {
   background-image: linear-gradient(to top right, #000000 1%, #1e3a57 99%);
}

I added an optional transition effect. I wasn't able to reproduce the background of the active window exactly, but by tinkering I found this one to be quite good.

You can reload the configuration by running

Code: Select all

$> xfce4-panel -r

There are many possibilities for customizing the XFCE4 interface, but that is not the focus of this topic.

Related links:
xfce4-panel - Panelbar Theming
GTK+ CSS Overview
GTK Supported CSS Properties

If you have encountered other problems with the XFCE4 interface, you can report your solution here.