Make your Gnome title bars smaller

Update: See the updated version for Gnome 3.20 and Fedora 24.

I don’t like the size of title bars in the stock Gnome 3. They are big and take to much space on my tiny 12″ screen! But I’ve found an easy solution to this.

gnome-window-title-barAll you need to do is to put the following css code into ~/.config/gtk-3.0/gtk.css

.header-bar.default-decoration {
 padding-top: 3px;
 padding-bottom: 3px;
 font-size: 0.8em;
}

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

7 thoughts on “Make your Gnome title bars smaller

  1. Fadlun Akbar

    Hi Adam,
    I have a good configuration in my laptop with 14″ screen if you wanna try. It will change the size of titlebar and the headerbar.

    .header-bar {
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    }

    .header-bar .button {
    padding-top: 4px;
    padding-bottom: 4px;
    }

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

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

    Reply
    1. Adam Šamalík Post author

      Thank you, Justin. The initial reason for writing this post was just having a backup of the code for myself – so I’m glad it helped you as well! :-)

      Reply
  2. Pingback: Titelleiste bei GTK3 Anwendungen verkleinern › Fedora-Blog.de

  3. horizonbrave

    It seems not to work on 3.22 (or at least there’s no difference in the padding after changing fonts scaling factor to 0.90).
    I really don’t understand such a waste of space, it looks ugly too.
    Thanks :)

    Reply
  4. horizonbrave

    please delete my previous comment, this is an updated one :)
    Thanks, but your solution doesn’t seem to work with Nautilus titlebar… so confusing and too much CSS code to achieve this (I’m a newbie) but I found a for me working solution , it’s the “updated” part of the answer posted by Cheflo:
    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;
    }

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>