How to reduce height of GTK headerbars?

Desktop
1
  • Fedora 32
  • Gnome 3.36

I generally use pretty small font sizes because I have a large screen with a low resolution. With those small fonts, it looks pretty odd that the header bars of GTK apps still have their default height. They just look way too big then…

I know that themes like Yaru can produce smaller header bars but switching away from Adwaita is not a solution. Unfortunately, a custom gtk.css file as described here also does not work.

So what is the way to achieve smaller header bars in a modern GNOME environment?

Thanks in advance,
Björn

2

~/.config/gtk-3.0/gtk.css:

/* shrink headerbars (don't forget semicolons after each property) */
headerbar {
    min-height: 0px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
    background-color: #2d2d2d;
}

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 0px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 0px;
    padding: 1px;
}

/* shrink ssd titlebars */
.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */
    padding: 0px;
    background-color: #2d2d2d;
}

.default-decoration .titlebutton {
    min-height: 0px; /* tweak these two props to reduce button size */
    min-width: 0px;
}

window.ssd headerbar.titlebar {
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: 0;
}

This is kind of hacky, but works as a quick fix. I’m currently looking into how to patch that into our distros Adwaita-variant as an option.

3

The downside of this approach is that headerbars have different heights and some of them look weird. You might want to experiment with different values.

4

Thank you, that basically works!

What I do not really understand is, why you set background-color: #2d2d2d; as this results in black headerbars when a window is not focused. Removing these lines fixes this issue.

After that, some applications e.g. nautilus looks perfectly fine with the new theme. Some, like gnome-terminal, have stretched buttons in the headerbar and the open button in gedit is not vertically centered anymore

will try to tweak it a bit in the future…
Also, if you have an updated version please let me know :slight_smile:

5

I actually removed those too, I had just copy-pasted that config from some blog.

Unfortunately achieving consistent look like this is not very easy. You would probably have to find a proper nonzero dimensions for the elements.

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.