[SOLVED] gtk.css not rendering icons correctly

erin · 2026-02-17 01:11:32

Hello everyone! I recently tried following a tutorial online on how to customize the xfce desktop from linuxscoop. As I was following the part where they pasted the gtk.css file on the config directory, I noticed that it doesn't exactly result as expected. The wifi and pulseaudio plugin icons aren't rendered correctly in its own way. For specifications, I am on XFCE 4.20, GTK 3.24.51, and on Arch with the LTS (6.12.71-1) kernel.

The pulseaudio plugin has a pretty long background while the wifi systray icon doesn't have one at all. I tried researching how to edit the gtk.css file myself, but it was quite overwhelming as someone that doesn't have any experience relevant for this. To be fair, the tutorial I'm following is quite old, so things must've changed for it not to work as intended. I'll provide the css snippet and the tutorial I was following for your convenience:

I would assume that these are the relevant snippets for customizing the panel (there are also specific snippets inside the xfce4-panel-stuffs section for docklike and whisker, but I think that won't be needed for this.

/**************** xfce4-panel stuffs **********************/

.xfce4-panel button,
.genmon_plugin,
#docklike-plugin .group {
	transition: 0.2s;
	border-radius: 3px;
	margin: 5px;
	box-shadow: none;
	background-color: rgba(255,255,255,0.04);
}

.xfce4-panel.background .tasklist button {
	font-size: 12px;
}

.xfce4-panel.background button:active, 
.xfce4-panel.background button:hover, 
.xfce4-panel.background button:active:hover, 
.xfce4-panel.background .tasklist button:active,
.xfce4-panel.background .tasklist button:hover, 
.xfce4-panel.background .tasklist button:active:hover,
#docklike-plugin .hover_group {
	background-color: rgba(255,255,255,0.07);
}

.xfce4-panel button:checked {
	background-color: rgba(255,255,255,0.1);
}

Although, if anyone does want the full gtk.css file, it's also on pling (look for the file named gtk-3.0-css): https://www.pling.com/p/1908883/

As for the tutorial (with the timestamp included): https://youtu.be/ZIRlfaP_SB4?si=BXYiZCFbxholLv6s&t=944

I would greatly appreciate it if someone could help me piece things together because I really have no idea what's going on and where to start. sad

Last edited by erin (2026-02-17 23:01:51)

ToZ · 2026-02-17 02:16:29

Hello and welcome.

The pulseaudio plugin has a pretty long background while the wifi systray icon doesn't have one at all.

What does this mean?

The wifi and pulseaudio plugin icons aren't rendered correctly in its own way.

How is it that you want them rendered?

Taking a guess here.... It looks like there is a slight dark grey background to the pulseaudio icon but not to the network icon. If this is what you are looking to change, then its probably related to the fact that the network icon is following the old systray protocol, which is not really themeable (you get what the app sends you). However, you can change it to an indicator which is themeable and your code should cover it. To do so, copy the nm-applet.desktop file (located most probably in /etc/xdg/autostart) to ~/.config/autostart and change the Exec= line to read:

Exec=nm-applet --indicator

You'll need to log out and back in again for the change to take effect.

erin · 2026-02-17 04:06:54

ToZ wrote:

Hello and welcome.
The pulseaudio plugin has a pretty long background while the wifi systray icon doesn't have one at all.
What does this mean?
The wifi and pulseaudio plugin icons aren't rendered correctly in its own way.
How is it that you want them rendered?
Taking a guess here.... It looks like there is a slight dark grey background to the pulseaudio icon but not to the network icon. If this is what you are looking to change, then its probably related to the fact that the network icon is following the old systray protocol, which is not really themeable (you get what the app sends you). However, you can change it to an indicator which is themeable and your code should cover it. To do so, copy the nm-applet.desktop file (located most probably in /etc/xdg/autostart) to ~/.config/autostart and change the Exec= line to read:
Exec=nm-applet --indicator
You'll need to log out and back in again for the change to take effect.

Oh, I apologize for not being more specific about what I want. Thankfully, you guessed right. It was about the grey-ish backgrounds underneath the icons. Also, the other issue about the incorrect render for the pulseaudio plugin is that the background is rectangular / long instead of the expected square.

Anyway, thank you so much for the response! Also, just to be clear, the dot files and code aren't mine since I only followed a tutorial online so the code isn't exactly mine... 😅

For reference, the network manager applet has the correct render shape:

Last edited by erin (2026-02-17 04:10:11)

ToZ · 2026-02-17 11:41:53

Also, the other issue about the incorrect render for the pulseaudio plugin is that the background is rectangular / long instead of the expected square.

Ok, I can see that. A couple of options:

On the Status Tray Items Properties page, in the Status Notifiers section, uncheck "Square Items".
.
Try adding this as a new entry in gtk.css:
```
#pulseaudio-button {margin-top: -3px; margin-bottom: -3px}
```
...and adjust the "-3" to suit.

erin · 2026-02-17 14:26:14

ToZ wrote:

Also, the other issue about the incorrect render for the pulseaudio plugin is that the background is rectangular / long instead of the expected square.
Ok, I can see that. A couple of options:
On the Status Tray Items Properties page, in the Status Notifiers section, uncheck "Square Items".
.
Try adding this as a new entry in gtk.css:
#pulseaudio-button {margin-top: -3px; margin-bottom: -3px}
...and adjust the "-3" to suit.

Hello again! Thank you for responding. I have a couple of things;

1. I tried inserting the snippet on my gtk.css, and I found that it does shrink the borders from both vertical sides. However, I think it also crops away the border. I was thinking if there was some way I could move where the borders start on the pulseaudio plugin itself, or if it's possible to have an if statement that gives it special configs, but I'm not sure how nor if it's the correct way to do so.

#pulseaudio-button {
	margin-top: -5px;
	margin-bottom: -5px
}

2. Oh yeah, I was wondering about disabling square items for systray since the pulseaudio plugin is its own separate thing.

ToZ · 2026-02-17 14:49:30

Try:

#pulseaudio-button image {
	margin-top: -5px;
	margin-bottom: -5px
}

...this will target the image itself, not the containing box.

erin · 2026-02-17 15:00:47

ToZ wrote:

...this will target the image itself, not the containing box.

Thank you again for responding! It seems that the pulseaudio button is being really stubborn. The background is still quite long (basically unchanged) even after exaggerating the margins. 😅

Edit: It seems that the inverse works. Making the values positive makes the borders much longer, but not shorter when negative.

#pulseaudio-button image {
	margin-top: -50px;
	margin-bottom: -50px
}

Last edited by erin (2026-02-17 15:08:16)

ToZ · 2026-02-17 15:43:05

The first one works for me:

#pulseaudio-button {
	margin-top: -7px;
	margin-bottom: -7px
}

Before:

After:

erin · 2026-02-17 21:49:07

ToZ wrote:

The first one works for me:

Hello again! Thank you for responding and I apologize for the late response. 😅

Yes, the first method indeed works (I've also shown the output on a previous reply post with essentially the same results as yours), but the corners don't appear to be rounded. I have a guess that the margins might be cutting off the borders, so I was thinking if there was a way it could be preserved while shrinking the vertical length.

Edit: Okay, I was thinking. What if I manually set the configurations for each plugin (I don't have a lot of things on my panel anyway, so I don't think it'd be too much of a hassle)? Inspecting the code snippet for the panel buttons, it seems like it groups all buttons and gives it one configuration (well, there are extra lines of code specifically for docklike and whisker on the actual code; can be checked on the file linked at the top of this post, but I think you get the idea).

If you don't mind me asking, what's the proper names for the plugins, specifically the one for systray? The identifiers for whisker, docklike, and pulseaudio (thanks to you 😄) are already known.

Last edited by erin (2026-02-17 22:35:56)

ToZ · 2026-02-17 22:42:19

Change that snippet to:

#pulseaudio-button box {
	margin-top: -7px;
	margin-bottom: -7px
}

...note the "box" element that was added, and add "#pulseaudio-button" to the list of widgets in your previous snippet:

.xfce4-panel button,
.genmon_plugin,
#pulseaudio-button,
#docklike-plugin .group {
	transition: 0.2s;
	border-radius: 3px;
	margin: 5px;
	box-shadow: none;
	background-color: rgba(255,255,255,0.04);
}

...for the rounded buttons.

I had to change the background colours to red so I can see them better - your colour scheme is soo dark.

erin · 2026-02-17 23:00:02

Yay! It works wonderfully!

ToZ wrote:

I had to change the background colours to red so I can see them better - your colour scheme is soo dark.

I apologize for the inconvenience, I'll do better the next time I have an inquiry... 😅

Anyway, I guess that marks my thread solved! Thank you so much for your time, and I hope you have a wonderful day (or afternoon, or evening)!

Edit: Sorry, how do I mark a thread as solved?

Edit 2: Nvm, I figured it out...

Last edited by erin (2026-02-17 23:02:10)

Xfce Forum

Sub domains

#1 2026-02-17 01:11:32

[SOLVED] gtk.css not rendering icons correctly

#2 2026-02-17 02:16:29

Re: [SOLVED] gtk.css not rendering icons correctly

#3 2026-02-17 04:06:54

Re: [SOLVED] gtk.css not rendering icons correctly

#4 2026-02-17 11:41:53

Re: [SOLVED] gtk.css not rendering icons correctly

#5 2026-02-17 14:26:14

Re: [SOLVED] gtk.css not rendering icons correctly

#6 2026-02-17 14:49:30

Re: [SOLVED] gtk.css not rendering icons correctly

#7 2026-02-17 15:00:47

Re: [SOLVED] gtk.css not rendering icons correctly

#8 2026-02-17 15:43:05

Re: [SOLVED] gtk.css not rendering icons correctly

#9 2026-02-17 21:49:07

Re: [SOLVED] gtk.css not rendering icons correctly

#10 2026-02-17 22:42:19

Re: [SOLVED] gtk.css not rendering icons correctly

#11 2026-02-17 23:00:02

Re: [SOLVED] gtk.css not rendering icons correctly

Board footer