How to set spacing between Window Buttons?

johnywhy · 2019-08-26 21:50:08

i've seen some threads about changing icon size, but nothing about changing spacing (padding) between the buttons.
i don't want to change row height or icon size. Just padding.
This isn't about other panel items, launchers, etc. Just about padding between icons for open windows (the Window Buttons item).

This thread seems maybe remotely related.
https://forum.xfce.org/viewtopic.php?id … hp?id=9718

ToZ · 2019-08-26 22:04:49

Try this:

.tasklist button { margin-left: 10px; }

...change "10" to the size of the padding that you prefer.

Add it to ~/.config/gtk-3.0/gtk.css and restart the panel.

johnywhy · 2019-08-27 01:21:10

Great suggestion, but doesn't quite do it. That seems to change distance between the background-button area, but not the icons.
https://i.imgur.com/7oz69jf.png

I notice padding also has some effect, but hard to tell what's going on.
Where can i find all the css objects available?

Thx!

ToZ · 2019-08-27 02:10:43

I see you have only the icons, no labels.

Try something like the following:

.tasklist button { margin-left: 3px; margin-right: 3px; }
.tasklist image { margin-left: -2px; margin-right: -2px; }

I don't see any way to add extra space between the buttons, you can only fake it by squeezing the ends closer together to make the gap. It looks nicer with the labels because you have more real estate to play with. That's what the above does. Play with the values to get it to fit for you.

Where can i find all the css objects available?

The GTK Inspector. Quit and restart the panel in GTK inspector debug mode:

xfce4-panel -q
GTK_DEBUG=interactive xfce4-panel

johnywhy · 2019-08-27 02:20:11

Great!
But i'm having trouble finding Window Buttons in the inspector.
11 separate identical inspectors opened.
I see some of my tray icons listed there.
Drilled down all the way, but nothing called "Window Buttons".

thx!

ToZ · 2019-08-27 02:22:57

johnywhy wrote:

Great!
But i'm having trouble finding Window Buttons in the inspector.
11 separate identical inspectors opened.

Yes I know. If you have a lot of panel plugins, you'll get alot of popup dialogs.

I see some of my tray icons listed there.
Drilled down all the way, but nothing called "Window Buttons".

It's called "tasklist". If you go to Panel Properties > Items tab and hover over the plugin, you'll see it's internal name.

johnywhy · 2019-08-27 02:39:11

Making progress, but haven't found the objects yet.

I see GtkImage is associated with the window buttons:

However, when i put the following into the inspector CSS tab, nothing happened:

.GtkImage {
margin-left: 30px
}

Last edited by johnywhy (2019-08-27 03:52:36)

ToZ · 2019-08-27 02:58:12

Don't use ".GtkImage" but rather just "image".

Edit: every GTK widget has own class name that is the part after GTk, e.g. "label" for GtkLabel, "button" for GTKButton, "image" for GTKImage".

You should preceed it by the widget class name, in this case ".tasklist" so your change only affects the image of the tasklist. (If you move it to gtk.css with just "image" it will affect all images).

So:

.tasklist image { 
   margin-left: 30px;
}

Second Edit: on my system I have to hover over or click the Windows buttons for the change on the CSS tab to take effect. Only happens with this widget.

Last edited by ToZ (2019-08-27 02:59:49)

johnywhy · 2019-08-27 03:54:08

Not working yet. By normal CSS rules, this should do something:

tasklist > box > XfceTasklist > XfceArrowButton > box > image {
width: 100px;
}

I thiink you're saying, anything that starts with Gtk, remove "Gtk" from the css, correct?
What about other prefixes, like "Xfce"?
Why do we say "tasklist" instead of "tasklist-2" as shown in inspector?
I'm unclear about the rules for caps. Should everything be lowercase, including XfceArrowButton?
Why do we give "tasklist" a class dot, but nothing else?
Is there any way to get Inspector to show all the actual CSS class name, correctly? Should i be using the CSS Classes column? It seems to be missing some things, like "image".

thx!

Last edited by johnywhy (2019-08-27 03:56:37)

ToZ · 2019-08-27 10:42:15

Perhaps these two links will help:
- https://developer.gnome.org/gtk3/stable … rview.html
- https://developer.gnome.org/gtk3/stable … rties.html

Lets have a look at the inspector:

The class name is "tasklist" but you must precede class names with a ".", so ".tasklist" to point to the class. You could traverse down the list by identifying each step along the way ".tasklist>button>image" but it's just as easy to point directly to the image via ".tasklist image".

Note that there is no CSS property called width (scroll the right side of the window to see all of the CSS properties), you really only are able to adjust this particular widget via the margin and padding properties. GTK3 does not allow you to directly specify the width of a widget via CSS.

You can also use the ID, but (as per the first link above), ID's must be prefaced by a "#", so in my case, "#tasklist-3". Traversing the tree would give you "#tasklist-3>box>box>widget>button>image", but again, its simplier just to grab the GTKImage directly via "#tasklist-3 image".

In the case of the tasklist, you can adjust the button and/or the image (also "group-button" if you use grouping).

randomguy32 · 2022-12-27 14:57:28

Sorry for digging this topic up.

Is there any update on this?

I have created the following issue:
https://gitlab.xfce.org/xfce/xfce4-panel/-/issues/679

I have actually spent some time trying to find a solution for this (checking the plugin settings, editing gtk css and even trying to edit the C source code directly) but I wasn't sucessful.

Is there some way to truly increase the spacing between button in the panel? Or a change in the source code would be required? (I can actually try to have another look at the code if this is the only solution)

Xfce Forum

Sub domains

#1 2019-08-26 21:50:08

How to set spacing between Window Buttons?

#2 2019-08-26 22:04:49

Re: How to set spacing between Window Buttons?

#3 2019-08-27 01:21:10

Re: How to set spacing between Window Buttons?

#4 2019-08-27 02:10:43

Re: How to set spacing between Window Buttons?

#5 2019-08-27 02:20:11

Re: How to set spacing between Window Buttons?

#6 2019-08-27 02:22:57

Re: How to set spacing between Window Buttons?

#7 2019-08-27 02:39:11

Re: How to set spacing between Window Buttons?

#8 2019-08-27 02:58:12

Re: How to set spacing between Window Buttons?

#9 2019-08-27 03:54:08

Re: How to set spacing between Window Buttons?

#10 2019-08-27 10:42:15

Re: How to set spacing between Window Buttons?

#11 2022-12-27 14:57:28

Re: How to set spacing between Window Buttons?

Board footer