How to theme xfce4-panel's launcher button?

NIsheshTyagi · 2024-05-23 14:40:02

I have a fresh install of xfce without any customizations except the change of icon theme and greybird GTK theme. I want to customize the CSS of the launchers in the default panel-2, but I can't find the right class/id of it's CSS to modify it.

When I use the GTK inspector using GTK_DEBUG=interactive xfce4-panel, many windows appear with each having a CSS tab, but there's nothing in the CSS tabs and it tells me this

/*
You can type here any CSS rule recognized by GTK+.
You can temporarily disable this custom CSS by clicking on the “Pause” button above.

Changes are applied instantly and globally, for the whole application.
*/

How can I find out all the classes or perhaps even the source CSS file so I can find the right classes and IDs?

I just want to change the width and height of the launchers buttons on hover so they look kinda like the macOS ones.

How can I do that?

Last edited by NIsheshTyagi (2024-05-23 14:42:31)

ToZ · 2024-05-23 15:14:01

Hello and welcome.

Here is a shortcut (from the GTK Inspector page), though admittedly somehow more confusing than the previous version of this page.

First, enable the inspector shortcut key binding:

gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true

Then, right-click on a launcher to bring up its context menu and the press the Ctrl+Shift+i keyboard shortcut. This will bring up the one inspector window specific to this widget. In the top left corner, change Miscellaneous in the drop-down to "CSS nodes". This will focus on the relevant css IDs and style classes for the launcher plugin:

Then you would to to the CSS tab to enter tweaks. For example:
To affect only this widget, use the ID (launcher-13):

#launcher-13 button {background-color: red;}

To affect all launchers, use the launcher-arrow ID:

#launcher-arrow {background-color: red;}

Note: there aren't unique any style classes defined for the launcher.

NIsheshTyagi · 2024-05-23 15:41:56

@ToZ Hello and Thank you for your help. I am now able to see the css nodes and stuff. Is there any way through which we can change the hover states of the launchers and other widgets? It would be a great help. Once again, thank you for your help!

ToZ · 2024-05-23 17:32:55

NIsheshTyagi wrote:

@ToZ Hello and Thank you for your help. I am now able to see the css nodes and stuff. Is there any way through which we can change the hover states of the launchers and other widgets? It would be a great help.

You would use the ":hover" pseudo-class:

#launcher-arrow:hover {background-color: red;}

More information about pseudo-classes can be found at Gtk's documentation here.

Once again, thank you for your help!

No worries.

Xfce Forum

Sub domains

#1 2024-05-23 14:40:02

How to theme xfce4-panel's launcher button?

#2 2024-05-23 15:14:01

Re: How to theme xfce4-panel's launcher button?

#3 2024-05-23 15:41:56

Re: How to theme xfce4-panel's launcher button?

#4 2024-05-23 17:32:55

Re: How to theme xfce4-panel's launcher button?

Board footer