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).

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.

Xfce Forum

Sub domains

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

Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

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

Re: Reduce width on the applet without resizing panel

Board footer