Shreyas Jani

I'm a web designer & software engineer based out of Mumbai.

I write about technology & love documenting the world around me through photography.

Reduce title bar height in Gnome 3.0

3 July 2020

~ via Unix Stackexchange

Gnome title bars can be tweaked using a simple css file. Creating a gtk.css file inside of ~/.config/gtk-3.0 with the following styles can scale down those awful thick/tall title bars.

Title bar height before tweaking

The CSS in gtk.css

                        
/* shrink headerbars */
headerbar {
    min-height: 0px;
    // same as childrens vertical
    // margins for nicer proportions
    padding-left: 2px;
    padding-right: 2px;
    background-color: #2d2d2d;
}

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

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

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

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

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

Title bar height after tweaking

After saving the file, run alt + f2 and type r in the dialog box to restart the session and see the changes take effect.