[SOLVED] Reduce width on the applet without resizing panel

w4l_ · 2025-11-03 14:07:15

Is there any way to reduce the width on the sn-button, pulseaudio-plugin, power-manager-plugin, and clipman-plugin without reducing the panel size? I tried a few things like negative margin width and 0 padding width but it did not work on sn-button, power-manager-plugin, and clipman-plugin. Reducing the icon size to 16 pixels using fixed icon size (pixels) does not change the width of the tray/applet.

Current panel height is 40 pixels and icon size is 16 pixels (docklike-plugin uses 32 pixels).

Last edited by w4l_ (2025-11-16 05:04:41)

ToZ · 2025-11-03 15:39:10

Hello and welcome.

The plugins are square, so the dimensions will always be constrained by the size of the panel itself. However, there are two things that you can try to see if it makes a difference: remove padding and use negative margins (hack). Try the following in ~/.config/gtk-3.0/gtk.css (create the file if it doesn't exist):

.xfce4-panel  .toggle {padding: 0; margin-left: -5px; margin-right: -5px;}

...adjust the -5px to suit. Restart the panel to see the effect:

xfce4-panel -r

Let me know if this doesn't effect all the plugins you want, or too many, or not enough, etc....

w4l_ · 2025-11-03 16:49:58

ToZ wrote:

Hello and welcome.
The plugins are square, so the dimensions will always be constrained by the size of the panel itself. However, there are two things that you can try to see if it makes a difference: remove padding and use negative margins (hack). Try the following in ~/.config/gtk-3.0/gtk.css (create the file if it doesn't exist):
.xfce4-panel  .toggle {padding: 0; margin-left: -5px; margin-right: -5px;}
...adjust the -5px to suit. Restart the panel to see the effect:
xfce4-panel -r
Let me know if this doesn't effect all the plugins you want, or too many, or not enough, etc....

It ended up overlapping to sn-button, power-manager-plugin,and clipman-plugin. This is exact output when I try it on css before this (to each panel applet only just to not breaking the layout I made on the css).

Is it hardcoded? Pulseaudio-plugin can use the negative margin width, but I want it to affect others too without overlapping.

ToZ · 2025-11-03 17:22:30

The other approach is to only address only those plugins that you want to affect:

#xfce4-power-manager-plugin,
#pulseaudio-button,
#xfce4-clipman-plugin
     {padding: 0; margin-left: -5px; margin-right: -5px;}

I'm not sure exactly what you mean by "overlapping" (other than the clock).

Screens (before / after):

w4l_ · 2025-11-04 02:17:26

ToZ wrote:

The other approach is to only address only those plugins that you want to affect:
#xfce4-power-manager-plugin,
#pulseaudio-button,
#xfce4-clipman-plugin
     {padding: 0; margin-left: -5px; margin-right: -5px;}
I'm not sure exactly what you mean by "overlapping" (other than the clock).
Screens (before / after):

From what I see from the screens you uploaded, it only affects the pulseaudio-button while others like xfce4-power-manager-plugin dont.

The overlapping I meant is the sn-button on hover state and it overlaps when the side margins are reduced, like this:

Other than that the side borders kinda broken if the margins are reduced:

The hover state should look like this:

Any way to make it show the side borders again if the css side margins are reduced?

Edit: Able to restore the hover state for power-manager-plugin and clipman-plugin, but pulseaudio-button remains broken (like the second image above).

Last edited by w4l_ (2025-11-04 04:23:57)

ToZ · 2025-11-04 10:49:12

Can you share the code you've used so far?

w4l_ · 2025-11-04 13:09:34

ToZ wrote:

Can you share the code you've used so far?

Heres the code for that specific applet (its quite a mess lol, scroll down for the margin part):

#xfce4-power-manager-plugin {
    color: #ffffff;
    border: 1px solid rgba(0,0,0,0);
}

#xfce4-power-manager-plugin:hover {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      rgba(255,255,255,0.5),
                                      rgba(135,165,202,0));
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.375) inset;
}

#xfce4-power-manager-plugin:checked {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      rgba(255,255,255,0.625),
                                      rgba(255,255,255,0.165));
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
}

#xfce4-clipman-plugin {
    border: 1px solid rgba(0,0,0,0);
}

#xfce4-clipman-plugin image {
    color: #ffffff;
}

#xfce4-clipman-plugin:hover {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      rgba(255,255,255,0.5),
                                      rgba(135,165,202,0));
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.375) inset;
}

#xfce4-clipman-plugin:checked {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      rgba(255,255,255,0.625),
                                      rgba(255,255,255,0.165));
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
}

#pulseaudio-button {
    border: 1px solid rgba(0,0,0,0);
}

#pulseaudio-button:hover {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      rgba(255,255,255,0.5),
                                      rgba(135,165,202,0));
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.375) inset;
}

#pulseaudio-button:checked {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      rgba(255,255,255,0.625),
                                      rgba(255,255,255,0.165));
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
}

#xfce4-power-manager-plugin, #xfce4-clipman-plugin, #pulseaudio-button {
    padding: 0;
    margin-left: -12px;
    margin-right: -12px;
}

/* Restores the side borders, pulseaudio-button just broke if added to this. */
#xfce4-power-manager-plugin, #xfce4-clipman-plugin {
    margin: 0 10px;
}

ToZ · 2025-11-05 00:14:41

Strange, isn't it. This pulseaudio-button tweak gets me into the ballpark:

#pulseaudio-button box {margin-left: -9px; margin-right: -9px}

...instead of adding it to the last line.

w4l_ · 2025-11-05 14:54:45

It works! Other than pulseaudio-button needs to be in the between of battery and clipman to give an illusion that it is centered, it is looking good!

A bit off topic to this thread, is there any way to make the sn-button arrow color (XfceArrowButton on gtk inspector) to be white? I can't find any documentation to that...

Other than this silly question, it is solved. Thank you!

Last edited by w4l_ (2025-11-05 14:55:25)

ToZ · 2025-11-05 15:57:58

A bit off topic to this thread, is there any way to make the sn-button arrow color (XfceArrowButton on gtk inspector) to be white?

XfceArrowButton is an object name and is not manageable by CSS.

However, yes it is possible, but unfortunately, it in itself doesn't have a unique CSS identifier (at least on xfce4-panel 4.20.5 it doesn't). Basically you would need to:

button {color: white}

...but this will change the colour on all GTK button elements.

You could focus it the specific widget ID (which you can get by hovering over the Status Tray Plugin element on the Panel Preferences > Items tab), to get something like:

#systray-7 button {color: white}

...but every system or profile might have a different ID.

Or make all xfce4-panel buttons white:

.xfce4-panel button {color: white}

...which might negatively affect other panel buttons.

Or maybe try to specify the exact widget path to this element:

.xfce4-panel>widget>box>button {color: white}

...and hope that no other panel plugin has the same path or negatively affects the button colour. (Note: if it does, you could further correct it with another tweak to change the colour of other plugins back).

Confusing, I know.

simeon9997 · 2026-01-29 00:47:02

Is there a reason why these changes don't affect Power Manager and Notifyd?

PS: On Debian 13, PulseAudio doesn't slim down under Xfce 4.20 either, but it does on Arch Xfce 4.20, always using "margin left and right" in gtk.css.

Last edited by simeon9997 (2026-01-29 00:47:42)

w4l_ · 2026-02-01 04:15:18

simeon9997 wrote:

Is there a reason why these changes don't affect Power Manager and Notifyd?

All applets on xfce4 based on my observation usually have squared width and height, and for some reason it can't be tweaked. For pulseaudio plugin, I don't know why the width can be reduced.

In the end, I ended up moving some of my applets to the status tray plugin and unchecked the "Sqaure Items". Power Manager have system icon tray option in the power manager settings, and clipman can be launched to tray, but both power manager and clipman can't be styled and I don't know why... For the notifyd, it can't be helped and I just left it as is.

Here's how my tray look:

simeon9997 · 2026-02-02 13:42:14

w4l_ wrote:

simeon9997 wrote:
Is there a reason why these changes don't affect Power Manager and Notifyd?
All applets on xfce4 based on my observation usually have squared width and height, and for some reason it can't be tweaked. For pulseaudio plugin, I don't know why the width can be reduced.
In the end, I ended up moving some of my applets to the status tray plugin and unchecked the "Sqaure Items". Power Manager have system icon tray option in the power manager settings, and clipman can be launched to tray, but both power manager and clipman can't be styled and I don't know why... For the notifyd, it can't be helped and I just left it as is.
Here's how my tray look:

In the case of Power Manager, the system tray icon is discontinued. I used it and encountered the problem that at certain battery percentages, the icon started to look distorted. I reported it here https://gitlab.xfce.org/xfce/xfce4-powe … issues/274 and was informed that it is no longer being maintained and will be removed in future versions. Just like with Notified, we will be forced to use that awkward square button again. PulseAudio also doesn't slim down in Debian 13 and derivatives, even with the same settings applied; I've already tested it. And although it works in other distributions, when the microphone is activated, the button becomes huge again.
I've already raised this issue of slimming down the buttons in the Xfce panel in many places, and the answer is always the same: it won't be considered.
Clipman works correctly in the system tray, and for everything else, I've installed the MATE drum and audio plugins, which also fit perfectly in the system tray. It's not ideal; I love the Xfce ecosystem, but this decision to make the plugins individual, square panels is too inconvenient and annoying. When you design a panel that's more than 40px high and you want it to look uniform, you'll have a major headache.

Xfce Forum

Sub domains

#1 2025-11-03 14:07:15

[SOLVED] Reduce width on the applet without resizing panel

#2 2025-11-03 15:39:10

Re: [SOLVED] Reduce width on the applet without resizing panel

#3 2025-11-03 16:49:58

Re: [SOLVED] Reduce width on the applet without resizing panel

#4 2025-11-03 17:22:30

Re: [SOLVED] Reduce width on the applet without resizing panel

#5 2025-11-04 02:17:26

Re: [SOLVED] Reduce width on the applet without resizing panel

#6 2025-11-04 10:49:12

Re: [SOLVED] Reduce width on the applet without resizing panel

#7 2025-11-04 13:09:34

Re: [SOLVED] Reduce width on the applet without resizing panel

#8 2025-11-05 00:14:41

Re: [SOLVED] Reduce width on the applet without resizing panel

#9 2025-11-05 14:54:45

Re: [SOLVED] Reduce width on the applet without resizing panel

#10 2025-11-05 15:57:58

Re: [SOLVED] Reduce width on the applet without resizing panel

#11 2026-01-29 00:47:02

Re: [SOLVED] Reduce width on the applet without resizing panel

#12 2026-02-01 04:15:18

Re: [SOLVED] Reduce width on the applet without resizing panel

#13 2026-02-02 13:42:14

Re: [SOLVED] Reduce width on the applet without resizing panel

Board footer