How to change the titlebar height in standard GTK apps and those with headerbars/CSDs on Gnome 3.20

Question

In Gnome 3.18, it was possible to change the titlebar height of all windows by changing the css in ~/.config/gtk-3.0/gtk.css as per Reduce title bar height in gnome 3 / gtk+ 3.

.header-bar.default-decoration {
        padding-top: 0px;
        padding-bottom: 0px;
    }

.header-bar.default-decoration .button.titlebutton {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* No line below the title bar */
.ssd .titlebar {
    border-width: 0;
    box-shadow: none;
}

In Gnome 3.20, this appears to no longer apply to windows with a headerbar/CSD (gnome-specific buttons in the title bar), such as Nautilus (Files), Settings, Photos, Contacts, etc. The tweak still reduces the titlebar height for other applications, such as gnome-terminal and gVim. How do I reduce the height of the titlebar in gnome-programs such as Nautilus in Gnome 3.20?

Update

I have also tried what is suggested in this reddit thread. I tried both window.ssd and .ssd only, ~~no dice.~~ This works, see the answer I posted for more details

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

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

and

/* shrink headebars */
headerbar {
    min-height: 38px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
}

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

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

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

The solution in your update worked great for me on Arch with Gnome 3.20. Had to adjust the values a bit, and it doesn't extend to GTK3 CSDs, but those are insane anyway. Thanks! — SimonG, Apr 24 '16 at 16:13
Glad it is useful! I posted a few comments regarding the CSDs/headerbars in my answer below, try it out and see if it helps. — joelostblom, Apr 24 '16 at 22:55
@Mongrel please read this: http://meta.stackexchange.com/questions/283468/whats-the-preferred-format-when-linking-posts-within-the-same-network — Shadow The GPT Wizard, Aug 16 '16 at 15:11

score 35 · Answer 1 · answered Jun 21 '16 at 03:30

35

create a file ~/.config/gtk-3.0/gtk.css ( add the below CSS )
then you will need to reload gnome-shell: ALT + F2 and type r

I was able to reduce the app Titlebar on Gnome 3.20 with the following CSS:

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

headerbar {
    min-height: 24px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
    margin: 0px; /* same as headerbar side padding for nicer proportions */
    padding: 0px;
  }

answered Jun 21 '16 at 03:30

Francesco

721
1
10
19

9

The `alt+f2` then `r` tip is amazing; thank you! – berto Jul 18 '17 at 12:45
2

note that Alt+F2 does not work with a Wayland session – Frederick Nord Feb 27 '18 at 12:17
1

You can shrink it a little more by adding `min-height: 10px;` in the `headerbar entry etc` section, and change `min-height: 24px;` in `headerbar` to 16px; – michaelmoo Jan 11 '19 at 18:29
Does not work on apps using libhandy. – Archisman Panigrahi Aug 20 '21 at 13:20

joelostblom · Accepted Answer · 2021-07-01T18:03:46.250

Note: If you are on PopOS, there is an option to "Remove Window Titles" in the top bar menu that also controls tiling. This is what I use currently myself and it works great for only removing the superfluous non-CSD titlebars.

Headerbar/CSD

Actually, a section of the code that I found via reddit and posted above, namely

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

DOES modify the headerbars/CSDs. However the effect is not immediate. Even if you reload gnome, you might need to close all windows, wait a while, or log out and log back in again to see the effect.

I am still not seeing any difference in the header bar when modifying the following.

headerbar {
    min-height: 38px;
    padding-left: 2px; /* same as children's vertical margins for nicer proportions */
    padding-right: 2px;
}

Standard titlebar

The two sections for the normal window titlebars work as expected.

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

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

Titlebar border

You can use the following to remove the titlebar border if you are running the default adwaita theme. From https://bbs.archlinux.org/viewtopic.php?id=211102

window.ssd headerbar.titlebar {
  border: none;
  background-image: linear-gradient(to bottom,
  shade(@theme_bg_color, 1.05),
  shade(@theme_bg_color, 0.99));
  box-shadow: inset 0 1px shade(@theme_bg_color, 1.4);
}

Are all these suggested changes made in "~/.config/gtk-3.0/gtk.css" or where exactly? — Daniel Ferradal, Jul 11 '17 at 09:02
@ezra-s Yes, any of the above sections would be added to `~/.config/gtk-3.0/gtk.css` — joelostblom, Jul 11 '17 at 21:45
Note that there is a limit to how low you can squeeze the height of CSD Header Bars that are implemented with GTKHeaderBar (or a descendant thereof) if they left the default TRUE value of the `has-subtitle` GTK property alone. In that case, GTKHeaderBar reserves vertical space for two lines of text in some system font, even if there is no subtitle and the actual font that is being used in the title is smaller. And note there is no way to modify the `has-subtitle` property of a GTKHeaderBar from gtk CSS :-(. Hence in this case, a source code change is needed to squeeze out the excess height. — Glen Whitney, Oct 07 '22 at 20:38
(Well, you _can_ run the application under the GTK interactive browser debugger -- e.g., by running it with the GTK_DEBUG environment variable set to `interactive` -- and then navigate the GTK object tree to the GTKHeaderBar you want to shrink and then manually modify its `has-subtitle` property to FALSE. But that is a real pain to do on every invocation.) — Glen Whitney, Oct 07 '22 at 20:41

score 5 · Answer 3 · edited May 22 '18 at 05:33

Update your ~/.config/gtk-3.0/gtk.css with following content:

/* 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;
}

/* 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;
}

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

What is the equivalent of this for gtk4 applications like Nautilus under 22.10? I tried to put a similar file under `~/.config/gtk-4.0`, but it didn't work. — FedKad, Mar 08 '23 at 11:23

score 2 · Answer 4 · answered Apr 15 '17 at 09:30

2

Tangent to the subject, you can download the maximums shell extension to hide the title bar on maximized windows. Quite the useful usecase.

Not compatible with wayland as far as I know, but didn't test it.

answered Apr 15 '17 at 09:30

Paulo Neves

218
1
2
5

score 2 · Answer 5 · answered Oct 07 '20 at 21:56

On my Ubuntu 20.04 I use this custom theme fix (Gnome 3.20 on Yaru Standard Theme) and works well.

headerbar.default-decoration {
    min-height: 18px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
}

headerbar.default-decoration button.titlebutton {
    min-height: 16px;
    min-width: 16px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
}


headerbar  {
    min-height: 18px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
}


headerbar entry, headerbar spinbutton, headerbar button, headerbar switch, headerbar separator {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}


headerbar button.titlebutton.minimize, headerbar button.titlebutton.maximize, headerbar button.titlebutton.close {
    min-height: 16px;
    min-width: 16px;
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
}

score 0 · Answer 6 · edited Jul 14 '17 at 14:44

I modified the usr/share/themes/name-of-the-theme/gnome-shell/gnome-shell.css file.

We have to find

 /* Panel */

   #panel {
   background-gradient-direction:none;
   background-color: rgba(0,0,0,0.5);
   /* border: 0px solid rgba(90,105,111,0.5);
   box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15);*/
   border: 1px solid rgba(90,105,111,0.5);
   box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
   border-top:0px;border-right:0px;border-left:0px;
   font-weight: bold;
   height: 24px;

We have to change the " height " value. Afterwards we have to reload the theme. I use the extension " activities configurator " for the other parameters of the topbar.

This file is not meant to be edited and will be reset after updating the theme. — knoftrix, Apr 10 '20 at 12:54

How to change the titlebar height in standard GTK apps and those with headerbars/CSDs on Gnome 3.20

Update

6 Answers6

Headerbar/CSD

Standard titlebar

Titlebar border

Linked