32

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;
}
  • fwiw this is a gtk thing not a gnome/nautilus/wm one – don_crissti Apr 19 '16 at 16:25
  • 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: meta.stackexchange.com/questions/283468/… – Shadow The Princess Wizard Aug 16 '16 at 15:11
13
  1. create a file ~/.config/gtk-3.0/gtk.css ( add the below CSS )
  2. 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;
  }
  • 3
    The alt+f2 then r tip is amazing; thank you! – berto Jul 18 '17 at 12:45
  • note that Alt+F2 does not work with a Wayland session – Frederick Nord Feb 27 '18 at 12:17
  • 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 at 18:29
11

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? – ezra-s Jul 11 '17 at 9: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
1

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.

1

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;
}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.