(Solved) Titlebutton margins in gtk3

Aravisian · 2019-09-26 19:14:22

In gtk3, there is a small gap between the titlebuttons, close, minimize and maximize. Adjusting the padding can increase the gap, but not remove it.
Is there a way to reduce that gap to zero?
If I was able to do that, I could theme this much like an xfwm4 theme, creating the button images to suit, rather than layering backgrounds which is not only buggy, but breaks with child and gtkbox.
Any pointers?

Last edited by Aravisian (2019-09-30 07:44:49)

ToZ · 2019-09-26 23:34:43

Are you talking about xfwm4 theme elements (in which case you can use button offset and spacing values), or GTK3 elements? In GTK3, you can specify negative margin values, which will draw the elements closer to and overlap the borders.

Aravisian · 2019-09-27 00:59:00

ToZ wrote:

Are you talking about xfwm4 theme elements (in which case you can use button offset and spacing values), or GTK3 elements? In GTK3, you can specify negative margin values, which will draw the elements closer to and overlap the borders.

Sorry if I was confusing, Yes, gtk3 elements. I am building a re-make of a gtk2 theme in gtk3.
The titlebuttons join together to make one solid image, however in gtk3, there is a gap between close, max, min that disallows that.
I have read about negative margins before, but reading about it came with some caveats. Some even call it a hack.
Let me test that a bit. First, I will need to learn how to apply it... The slowest part of learning by trial and error is figuring out where to start.

Please keep in mind this is for the version 3.18 - Should I simply add

margin: -4

in my titlebutton section? Or should it be four values all around like padding?
Toz, I don't know how you do it, but thanks for diligently providing so many people with help over the years.
You are Iron Man on the web, but sometimes I wonder if you need a vacation.

ToZ · 2019-09-27 01:33:21

Aravisian wrote:

I have read about negative margins before, but reading about it came with some caveats. Some even call it a hack.

Yes and yes, but it might help you to achieve what you are trying to do.

Let me test that a bit. First, I will need to learn how to apply it... The slowest part of learning by trial and error is figuring out where to start.
Please keep in mind this is for the version 3.18 - Should I simply add
margin: -4
in my titlebutton section? Or should it be four values all around like padding?

Yes, something like:

element { margin: -4px; }

Give it a try to see if it works. It will depend on the actual element and how its structured.

Toz, I don't know how you do it, but thanks for diligently providing so many people with help over the years.
You are Iron Man on the web, but sometimes I wonder if you need a vacation.

It keeps me busy and out of trouble. Plus I learn alot myself.

Aravisian · 2019-09-27 01:58:09

I appreciate it, but it's a no go. Unless I am doing it all wrong.

Just like changing the padding, it changes the space between the buttons, but cannot eliminate the gap.
There seems an upper limit on each side, too. I can make it big, but reaches an upper limit, then adding bigger numbers doesn't make it bigger. The same goes for making it smaller.

ToZ · 2019-09-27 02:03:48

How about going up the widget tree for that element and removing margins and paddings? So for example, if you have:
- box
- button
- image

change the paddings and margins for all elements.

Aravisian · 2019-09-27 02:11:57

ToZ wrote:

How about going up the widget tree for that element and removing margins and paddings? So for example, if you have:
- box
- button
- image
change the paddings and margins for all elements.

I have been trying that. Interesting thing... I was kind of wrong above. If I put:

.header-bar .button.titlebutton,
.titlebar .button.titlebutton {
  margin: 1px
  padding: 4px 4px 4px 3px;
  color: #F3F3F5;
  border-color: transparent;
  background-color: transparent;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.8);
}

It changes the spacing the same amount.
I can put 4px, 0px, -36px, it always just changes the same amount.

EDIT: I will admit... I have been trying to solve this problem for many months. lol

Last edited by Aravisian (2019-09-27 02:18:02)

Aravisian · 2019-09-30 07:44:03

update:
I found the trouble... I am using gtk 3.18 and 3.18 does not support Margins in the css. Support for margins did not appear until 3.20, I think was what I read.
I started modeling the theme in gtk 3.22 and the suggestions made by Toz on margins were perfect.

Xfce Forum

Sub domains

#1 2019-09-26 19:14:22

(Solved) Titlebutton margins in gtk3

#2 2019-09-26 23:34:43

Re: (Solved) Titlebutton margins in gtk3

#3 2019-09-27 00:59:00

Re: (Solved) Titlebutton margins in gtk3

#4 2019-09-27 01:33:21

Re: (Solved) Titlebutton margins in gtk3

#5 2019-09-27 01:58:09

Re: (Solved) Titlebutton margins in gtk3

#6 2019-09-27 02:03:48

Re: (Solved) Titlebutton margins in gtk3

#7 2019-09-27 02:11:57

Re: (Solved) Titlebutton margins in gtk3

#8 2019-09-30 07:44:03

Re: (Solved) Titlebutton margins in gtk3

Board footer