Home / ubuntu / Questions / 448204
Accepted
fossfreedom
Asked: 2014-04-16 11:17:04 +0800 CST

How do I add a border around windows but keep the current theme?

  • 772

I seem to live my life in the terminal - many terminals in-fact.

I also love the Ambiance theme - but the new borderless windows does not provide the visual differentiation I'm used to (the same black windows appear to blend into each other).

enter image description here

Thus to my question - how do I add back the single pixel border for windows that is found in earlier Ubuntu versions?

I want to keep the Ambiance overall theme since this looks good and I dont want to swap to another theme.

enter image description here

Now I know that I can modify the Ubuntu Ambiance theme as follows:

mkdir ~/.themes
cp -r /usr/share/themes/Ambiance .themes

Then flipping between the theme options in the Settings - Appearance picks up changes in the theme in now in the .themes folder.

I presume I need to alter one of the .css files but I dont know which one.

I was also looking at this Q&A but the solutions there doesnt work for 14.04. I also looked at the community wiki but got rather lost trying to figure out which one applies to my situation.

unity

6 Answers

  1. Best Answer

    The file is /usr/share/themes/Ambiance/gtk-3.0/apps/unity.css

    change
      -UnityDecoration-extents: 28px 0 0 0;
to
      -UnityDecoration-extents: 28px 1px 1px 1px;

    logout and log back in and see effect the changes.

    Thus, in your local copy, make the "1px 1px 1px;" change in the file ~/.themes/Ambiance/gtk-3.0/apps/unity.css

    Enjoy! : )

    • 20

  2. Note that all the changes others have suggested that involve editing the system file /usr/share/themes/Ambiance/gtk-3.0/apps/unity.css can be done without such editing. Instead, just put the desired changes in your own file (that you create), ~/.config/gtk-3.0/gtk.css , which will take precedence over the system file.

    Example content (e.g. the whole file ~/.config/gtk-3.0/gtk.css)...

    /* Decorations */
UnityDecoration {
    -UnityDecoration-extents: 28px 1px 1px 1px;
}

    ...you may have to log out & log back in for this to take effect.

    Also, note that if the terminal window has at least two tabs open, then Ambiance (or Unity?) will already put a medium thick border around the terminal. (ctrl-shift-t opens another tab.)

    • 10

  3. Building on Anders' answer, if you want a nice, subtle dark line instead of the default ugly bright/gradient line (just because you can use a gradient doesn't mean you should, Ubuntu!), edit /usr/share/themes/Ambiance/gtk-3.0/apps/unity.css like so:

    Set the UnityDecoration extents like in Anders' answer:

    -UnityDecoration-extents: 28px 1px 1px 1px;

    Change the background-image to none in left/right, and change the background-color shade from 0.7 to 0.4 in left/right and bottom:

    UnityDecoration.left,
UnityDecoration.right {
    background-color: shade (@bg_color, 0.4);
    background-size: 1px 70px;
    background-repeat: repeat-x;
    background-image: none;
}

UnityDecoration.left:backdrop,
UnityDecoration.right:backdrop {
    /* start color: mix of the top border color and bg-image gradient end */
    background-color: shade (@bg_color, 0.4);
    background-image: none;
}

UnityDecoration.bottom {
    background-image: none;
    background-color: shade (@bg_color, 0.4);
}

    Optionally, adjust the 0.4 to your brightness preference.

    After you change the files, you can either logout and log back in, or simply open the Appearance dialog and change the theme away from, then back to, Ambience.

    Here's the result (may need to view at 100% to see the borders, they're only 1px thick):

    Ubuntu Ambience Theme Borders

    • 6

  4. My recommendation is for you to consider leaving the default /usrshare/themes/Ambiance folder as is (for future reference in case you clobber it inadvertently).

    Gtk3 appears to take the name of the theme by the name of the directory. So it might be better to copy /usr/share/themes/Ambiance to a different name such as /usr/share/themes/MyAmbiance and create your personalize theme there.

    If you want a per-user version you can also copy the theme to ~/.themes and have your preferred version accessible there.

    • 5

  5. I picked up Russ Lyons answer and want to show how it worked for me (Ubuntu 16.04):

    I left alone the original theme files below /usr/share/themes/Ambiance and didn't change anything in there. I agree that changing system files is always a bad idea, for several reasons.

    I created ~/.config/gtk-3.0/gtk.css with the following content:

    /* Decorations */
UnityDecoration {
    -UnityDecoration-extents: 28px 1px 1px 1px;
}

    Nothing else.

    After logout-login I now have tiny borders around my terminal windows.

    • 4

  6. Do you like colored border?

     enter image description here

    • Edit /usr/share/themes/Ambiance/gtk-3.0/apps/unity.css file and
    • Comment their current background-color value (/* shade (@bg_color, 0.7); */)
    • Then change the background-color to your favorite color(color with hex-code)
      in bottom, left and right (mine is #ff0080):
        UnityDecoration.bottom {
        background-image: none;
        background-color: #ff0080; /* shade (@bg_color, 0.7); */
    }

    UnityDecoration.left,
    UnityDecoration.right {
        background-color: #ff0080; /* shade (@bg_color, 0.7); */
        ...
    • Save the file and log out/log back in and see the magix.
    • 3