Change titlebar height in Gnome 47

Ask Fedora
,
1

Hi all,

I used to change the titlebar height in the past releases by adding something like

headerbar {
    min-height: 20px;
    margin: 0px;
    padding: 0px;
}
.default-decoration {
    min-height: 0px;
    padding: 1px;
}

to my ~/.config/gtk-4.0/gtk.css.
Now with Gnome 47 this no longer changes the titlebar height. Altering the font color etc. works fine, but I cannot reduce the height.

Could anyone give me a hint how this could be done in F41, please?

2

What are you looking to achieve? Do you want to make the header higher or lower?

[edit] Sorry i misread, you want to reduce the height.

I don’t know how much smaller you want to make it, but this will shave some height off the titlebar:

headerbar {
	min-height:20px;
}

windowhandle box {
	padding-top:0px;
	padding-bottom:0px;
}

Original:

image
image2430×137 46.4 KB

Reduced:

image
image2473×108 46.2 KB

3

Thanks!

Yes, that helped a bit reducing the height, but still the titlebar was bigger than it should be.

I got good results with this:

windowhandle box {
    padding-top: 0;
    padding-bottom: 0;
}

.titlebar {
    min-height: 0px;
    padding: 0;
}

Screenshot From 2025-01-30 14-12-22
Screenshot From 2025-01-30 14-12-221391×258 14.3 KB

Screenshot From 2025-01-30 14-11-47
Screenshot From 2025-01-30 14-11-471357×184 13.3 KB

4

On Gnome-48, I was able to achieve a nice sleek titlebar (aka headerbar) by putting the following in ~/.config/gtk-4.0/gtk.css:


headerbar {
    min-height: 10px;
    padding: 0px;
}

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    min-width: 0px;
    min-height: 0px;
}
headerbar windowhandle {
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #f7dc6f;
    min-height: 8px;
    padding: 0px;
}
headerbar windowhandle box {
    margin-top: 0px; 
    margin-bottom: 0px;
    padding: 0px;
    margin-top: 1px;
    margin-bottom: 1px;
}
headerbar windowhandle label {
    font-family: monospace;
    font-size: 14px;
    padding: 0px;
}
headerbar windowhandle box.end {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 4px;
    padding: 0px;
}
headerbar windowhandle box.end button image  {
    background-color: #6fdcf7;
    min-height: 8px;
}

.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */
    padding: 0px;
    margin-bottom: 0px;
}

See Gtk.HeaderBar for CSS nodes.