Xfce Forum

ejan

Member

Registered: 2025-02-01

Posts: 2

How to reduce spacing between statusbar plugin buttons

Hello everyone,

I've been trying to customize the xfce-panel in order to mimic the windows 11 style panel, where the quicklaunchers and menu are in the center. To get it perfectly centered I had to create 3 panels next to each other and change the heigth to 50 pixels. Put the whiskermenu and the docklike plugin in the middle and aplied some css rules to the docklike plugin to reduce the heigth by adding some padding at the top and bottom. This automatically reduced the icon size and buttons since all the buttons are inside the `#docklike-plugin` gtkbox.

My css rules: https://pastebin.com/mqNK0F7v

Here comes the challenging part. I also reduced the icon size for the statusbar items. Yet the button size is just a square box that fits the panel height. What I would like to achieve is that the width of the buttonbox is just 2 pixels wider than the image size, just like the systray arrow button, so that the spacing between the buttons is minimal. Is it possible to customize the width of the statusbar items (gtkbox) using css rules?

Last edited by ejan (2025-02-08 15:15:45)

chardmain

Member

From: South East Asia

Registered: 2020-04-13

Posts: 10

Re: How to reduce spacing between statusbar plugin buttons

This is exactly the same thing I want to achieve.

Here's what I got so far:

Similar setup, using 3 panels. Got similar challenging part, spacing between system tray icons One thing that I think it's possible to do is disable the "square items" option so it might be possible to set the spacing between the icons. But unfortunately it's affected only for Status tray Plugin.

Anyway, I'm currently using Xfce 4.18.

---

Debian 12 Xfce 4.18

k3dAR

Member

From: Czech Republic

Registered: 2022-07-27

Posts: 107

Re: How to reduce spacing between statusbar plugin buttons

Not help with spacing, but why 3 panels? Is not enough 1 panel, and add separator before and after docklike, with enabled Expand and "Style: Transparent" ? :-)

ejan

Member

Registered: 2025-02-01

Posts: 2

Re: How to reduce spacing between statusbar plugin buttons

This is exactly the same thing I want to achieve.

Here's what I got so far:

Similar setup, using 3 panels. Got similar challenging part, spacing between system tray icons One thing that I think it's possible to do is disable the "square items" option so it might be possible to set the spacing between the icons. But unfortunately it's affected only for Status tray Plugin.

Anyway, I'm currently using Xfce 4.18.

Thanks for your productive reply. I'll look into the "square items" thing. I'm sure It must be possible to set the width of the other statusbar items also, but I just didn´t figure out which css rules to apply. It's been a while since I last used css. By the way, I like the way you themed the docklike plugin. Can you share the css you implied for that?

chardmain

Member

From: South East Asia

Registered: 2020-04-13

Posts: 10

Re: How to reduce spacing between statusbar plugin buttons

Not help with spacing, but why 3 panels? Is not enough 1 panel, and add separator before and after docklike, with enabled Expand and "Style: Transparent" ? :-)

Because I want the dock to be absolute centered on the screen "ignoring" any other panel items on its left/right. If I use only 1 panel and using separator between any items and the dock, the dock would be centered "relatively" to other items on the panel. It's kinda a "hacky" solution but that's the only thing I have on my mind.

Thanks for your productive reply. I'll look into the "square items" thing. I'm sure It must be possible to set the width of the other statusbar items also, but I just didn´t figure out which css rules to apply. It's been a while since I last used css. By the way, I like the way you themed the docklike plugin. Can you share the css you implied for that?

Thanks. Here's my setup:

Compositor:

• Disable "show shadows under dock windows"

Panel Preferences:

• Row size (pixels): 44

Docklike properties:

• Force icon size: 24

• Active indicator: #0078D4

• Inactive Indicator: #767C89

Panel and Docklike css:

/* Panel top border */
#XfcePanelWindow {
  border-top: 1px solid rgba(181, 191, 207, .35);
}

/* Panel background and foreground */
.xfce4-panel.background {
 background-color: rgba(228, 238, 250, 1);
 color: #1c2126;
}

/* Docklike */
#docklike-plugin {
  margin: 0 0 3px 0;
  padding: 0;
}

#docklike-plugin button {
  margin: 3px 0 0 0;
  padding-top: 2px;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 5px;
  border: none;
}

#docklike-plugin .open_group {
  background-color: transparent;
  box-shadow: none;
}

#docklike-plugin .hover_group {
  background-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px rgba(181, 191, 207, .85),
              inset 0 -1px rgba(181, 191, 207, .85),
              inset 1px 0 rgba(181, 191, 207, .85),
              inset -1px 0 rgba(181, 191, 207, .85),
              0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

#docklike-plugin .active_group {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: inset 0 1px rgba(181, 191, 207, .85),
              inset 0 -1px rgba(181, 191, 207, .85),
              inset 1px 0 rgba(181, 191, 207, .85),
              inset -1px 0 rgba(181, 191, 207, .85),
              0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

#docklike-plugin .active_group:hover {
  background-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px rgba(181, 191, 207, .85),
              inset 0 -1px rgba(181, 191, 207, .85)
              inset 1px 0 rgba(181, 191, 207, .85),
              inset -1px 0 rgba(181, 191, 207, .85),
              0 2px 4px 0 rgba(0, 0, 0, 0.35);
}

Issue: There is no left box-shadow on the leftmost icon and no right box-shadow on the rightmost icon. I'm not sure what caused it. The rest is fine.

Last edited by chardmain (2025-02-11 19:48:00)

---

Debian 12 Xfce 4.18