De-uglify GTk3 tabs of terminals

If you are puzzled by the indistinguishability of the active tab from inactive tabs in any of the GTK3 based terminal emulators (mate-terminal, gnome-terminal, terminator, …), you are not alone. I have been plagued by that for far too long, and finally found a working solution.

In the above screen shot you see the tabs in the upper part are hardly distinguishable, and in the lower part the active tab is clearly indicated with different colors. Searching for relevant search terms brings up a variety of suggestions, most of them not working. I finally found this one and adapted the code therein to fit my need. The solution is to edit ~/.config/gtk-3.0/gtk.css, and add the following at the end:

notebook tab {
    /* background-color: #222; */
    padding: 0.4em;
    border: 0;
    border-color: #444;
    border-style: solid;
    border-width: 1px;
}
 
notebook tab:checked {
    /* background-color: #000; */
    background-image: none;
    border-color: #76C802;
}
 
notebook tab:checked label {
    color: #76C802;
    font-weight: 500;
}
 
notebook tab button {
    padding: 0;
    background-color: transparent;
    color: #ccc;
}
 
notebook tab button:hover {
  border: 0;
  background-image: none;
  border-color: #444;
  border-style: solid;
  border-width: 1px;
}

Here I didn’t change the background color (commented above), but changed the styling of the tab title and added a frame. The above changes the tab layout for all GTk3 elements that use the notebook widget, if one wants to restrict it to a certain terminal one need to prefix each CSS selector with the correct terminal indicator, as shown in the original post.

Hope that helps.

8 Responses

  1. Love it! Thanks a lot for sharing.

  2. Your theme is broken, don’t blame GTK for that. I don’t have any problem with Adwaita.

  3. Anonymous says:

    Yes, finally! Took me over an hour to find the right css selector. terminal-window, TerminalWindow, etc. all don’t work. It is notebook… how.. intuitive?
    Cheers

  1. 2020/03/24

    […] Preining: De-uglify #GTk3 tabs of terminals https://www.preining.info/blog/2020/03/de-uglify-gtk3-tabs-of-terminals/ he is no fan of #gnome (see what he said in #debian mailing […]

  2. 2020/03/31

    […] I wrote already in a previous blog, the active tab in all kinds of terminal emulators, but in fact everything that uses the gtk3 […]

  3. 2020/04/20

Leave a Reply

Your email address will not be published.

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> <pre lang="" line="" escaped="" cssfile="">