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;
}
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
- create a file ~/.config/gtk-3.0/gtk.css ( add the below CSS )
- then you will need to reload gnome-shell:
ALT + F2and typer
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;
}
Method 2
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);
}
Method 3
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;
}
Method 4
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.
Method 5
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;
}
Method 6
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.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0