Home / ubuntu / Questions / 455677
Accepted
L. D. James
Asked: 2014-04-27 00:03:52 +0800 CST

How to edit the color of the title bar and border width of a gtk3 theme?

  • 772

Can someone tell me which file and item is edited to change the title bar and the border width in the gtk3 themes? I'm using Ubuntu version 14.04.

Note: This is related to Using the Themes in the Repository (14.04).

themes

1 Answers

  1. Best Answer

    Edit the files in the directory:

    /usr/share/themes/[Themename]/gtk-3.0/apps/unity.css

    To avoid clobbering the original them it's better to copy the them to your personal area under a different name, then make the changes. The theme will appear in the theme chooser as the name you copied them to.

    Per-user theme ares:

    ~/.themes/[Theme Name]

    Specifically to this question you can change the color of the title bar by changing: (There are many ways but this is a start to change the border color of the active widget of the Radiance theme from the original default gray to a bright blue).

    1 (Border Top)

    UnityDecoration.top {

    Change from:

    background-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (#edebe6, 1.06)),
                                 to (@dark_bg_color));

    Change to:

    background-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (#0000ff, 1.06)),
                                 to (shade (#0000ff, 1.0)));

    2 (Border Right and Left side)

    UnityDecoration.left,
UnityDecoration.right {

    Change from:

    background-image: -gtk-gradient (linear, left top, left bottom,
                                 color-stop (0, #a89686),
                                 color-stop (0.5, #a89686),
                                 color-stop (1, shade (@bg_color, 0.7)));

    Change to:

    background-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (#0000ff, 1.0)),
                                 to (shade (#0000ff, 1.0)));

    3 (Border Bottom)

    UnityDecoration.bottom {

    Change to:

    background-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (#0000ff, 1.0)),
                                 to (shade (#0000ff, 1.0)));

    You can do the same thing with the ":backdrop" entry to change the color of the inactive window border colors. The #0000ff color code is blue. I made the backdrop #0000ff back to make it easy to tell which of my many open windows is active.

    Because of the dark color frames (after changing the very light borders of the Radiance theme) the text color had to be changed from the default black to make it readible. For this use the following in each of the feature blocks:

    text-shadow: none;
color: white;

    That takes care of the frame color and text of the modified theme. For the border width:

    Edit the block:

    UnityDecoration {

    Change from:

    -UnityDecoration-extents: 28px 0 0 0;

    Change to:

    -UnityDecoration-extents: 28px 6 6 6;

    Details of the features can be found at:

    https://wiki.ubuntu.com/Unity/Theming

    You have to use the unity-tweak-tool to select your custom theme:

    $ sudo apt-get install unity-tweak-tool
    • 6