Xfce Forum

Sub domains
 

You are not logged in.

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

johnywhy
Member
Registered: 2011-10-09
Posts: 263

How to set spacing between Window Buttons?

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


arch xfce x86_64

Offline

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

ToZ
Moderator
From: Canada
Registered: 2011-06-02
Posts: 5,879

Re: How to set spacing between Window Buttons?

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.

Offline

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

johnywhy
Member
Registered: 2011-10-09
Posts: 263

Re: How to set spacing between Window Buttons?

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!


arch xfce x86_64

Offline

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

ToZ
Moderator
From: Canada
Registered: 2011-06-02
Posts: 5,879

Re: How to set spacing between Window Buttons?

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

Offline

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

johnywhy
Member
Registered: 2011-10-09
Posts: 263

Re: How to set spacing between Window Buttons?

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!


arch xfce x86_64

Offline

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

ToZ
Moderator
From: Canada
Registered: 2011-06-02
Posts: 5,879

Re: How to set spacing between Window Buttons?

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.

Offline

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

johnywhy
Member
Registered: 2011-10-09
Posts: 263

Re: How to set spacing between Window Buttons?

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

I see GtkImage is associated with the window buttons:
yYYnIN2.png

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)


arch xfce x86_64

Offline

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

ToZ
Moderator
From: Canada
Registered: 2011-06-02
Posts: 5,879

Re: How to set spacing between Window Buttons?

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)

Offline

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

johnywhy
Member
Registered: 2011-10-09
Posts: 263

Re: How to set spacing between Window Buttons?

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)


arch xfce x86_64

Offline

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

ToZ
Moderator
From: Canada
Registered: 2011-06-02
Posts: 5,879

Re: How to set spacing between Window Buttons?

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:
NYyT3y5.png

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

Offline

Board footer

Powered by FluxBB