28

I have multiple terminal windows open with a black background and the black shadow on the black background is completely lost when they overlap. This is a problem for any windows with a black background. I used to modify unity.css to add window borders, but 17.10 is Gnome and that doesn't work any more! I don't see any Gnome theme controls in the settings UI either.

Worked in Ubuntu 17.04, but not 17.10

Edit /usr/share/themes/Ambiance/gtk-3.20/apps/unity.css and change

-UnityDecoration-extents: 28px 0 0 0;

to

-UnityDecoration-extents: 28px 2 2 2;

Doesn't work: gnome-terminal.css

Edit /usr/share/themes/Ambiance/gtk-3.20/apps/gnome-terminal.css

@define-color terminal_border #ff0000;

vte-terminal.terminal-screen {
    -TerminalScreen-background-darkness: 0.95;
    background-color: @terminal_bg;
    color: #fff;
    border-width: 1px 1px 0px 1px;
    border-color: @terminal_border;
}

Doesn't work: gnome-applications.css

Edit /usr/share/themes/Ambiance/gtk-3.20/apps/gnome-applications.css to say

TerminalScreen {
    background-color: @theme_base_color;
    color: @theme_fg_color;
    -TerminalScreen-background-darkness: 0.95;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-left-width: 2px;
}

TerminalWindow GtkNotebook.notebook {
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-left-width: 2px;
}

Possible Hint:

Maybe I should be editing something in /usr/share/gnome-shell/theme?

alternatives.log:update-alternatives 2017-11-12 10:59:31:
run with --install /usr/share/gnome-shell/theme/gdm3.css gdm3.css
    /usr/share/gnome-shell/theme/ubuntu.css 10
    alternatives.log:update-alternatives 2017-11-12 10:59:31:
    link group gdm3.css updated to point to
    /usr/share/gnome-shell/theme/ubuntu.css
GlenPeterson
  • 1,421

3 Answers3

38

I found the answer here.

  1. Make a file ~/.config/gtk-3.0/gtk.css

  2. Add the lines:

    decoration {
  border: 1px solid gray;
  background: gray;
}

  3. Reboot or log out+log in

Antos
  • 3
GlenPeterson
  • 1,421
  • 9
    work with 18.04 too – user3655984 May 05 '18 at 07:33
  • Does the background: part have any effect? – maxschlepzig Jul 13 '19 at 15:54
  • 8
    New border looks awesome! Btw changes can be applied with [ALT]+F2 then put in "r" for reload and press [enter]. – domih Oct 10 '19 at 13:42
  • 1
    work with GNOME Terminal 3.28.2 – L. Ouyang Jan 21 '20 at 02:47
  • 1
    The background does indeed seem to matter. It somehow seems like the border is partially transparent by default, over a background of the specified color. – Christian Fritz Apr 10 '20 at 19:32
  • 1
    This works great for the dark theme on 20.04 where we can't see the windows limits at all! Btw just need to restart gnome with Alt+F2 then 'r' and also restart the windowed app if you need. – Aquarius Power Dec 16 '20 at 19:32
  • I've added a (suggested) edit to note the importance of setting background, since it's easy to dismiss as irrelevant and miss the comment. Without it, some windows (like Terminal) work fine, but most others won't. – Eli Barzilay May 27 '22 at 19:46
  • 1
    Since this is an old answer, I'd like to point out that it continues to work in Ubuntu 22.04. I'd also point out that leaving off the background can be a good thing: I only needed a custom border around terminals because it's essential to be able to tell which text belongs to which ones. The fact that this technique completely fails for fancy GUIs, like Chrome, is fine (for me). I don't have as much need or trouble distinguishing the contents of those windows. – Jim Pivarski Apr 15 '23 at 17:56
  • @AquariusPower FYI "r" with Wayland under Ubuntu 22.04.2 gives "Restart is not available on Wayland". The HWE stack apparently does not support my monitor setup, hence I must use Wayland. Sigh. – Tino Jul 20 '23 at 11:50
9

The following adds the border only to gnome-terminal windows; tested on GNOME 3.22 (in Debian 9).

  1. Make/edit the file ~/.config/gtk-3.0/gtk.css

  2. Add the following:

    terminal-window notebook {
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: grey;
}

  terminal-window.maximized notebook,
  terminal-window.fullscreen notebook {
  border-style: none;
}
  3. Log out/log in
Ivan Stojic
  • 91
4

I don't really like that bright gray, here's my preference for ~/.config/gtk-3.0/gtk.css (rgba colors only worked in wayland for me, so I settled on #383838.)

terminal-window notebook {
  border: 1px solid #383838;
}

But that alone doesn't work for emacs, so I also add:

/* for emacs */
window#Emacs.background box#pane {
  border-style: solid;
  border-color: rgba(0,0,0,0.75);
  border-width: 0 1px 1px 1px;
}

Here's the pretty, subtle result:

nice subtle window borders

Bonus / note to self: you can test and tweak css using the GTK inspector, e.g.: GTK_DEBUG=interactive emacs (tutorial) - and a reference for how gtk CSS selectors work.

Jeff Ward
  • 945
  • 3
  • 10
  • 17