zonModAmbiance: Fixing Ambiance, the default Ubuntu Theme (12.04 Precise Pangolin)

In the end of this month, on April 26th to be exact, Ubuntu 12.04 LTS "Precise Pangolin" will be released by Canonical, the company behind the Ubuntu project. This is a much awaited release by the Ubuntu comunity around the globe, bringing many new features, and also most importantly is the version entitled Long Term Support (LTS) will be supported for five years for both desktop and server version of the operating system.

In this last minutes before the public final release, the developers are very busy for sure, preparing the OS to ensure it will be a perfect product for everyone to use.

I have been using Ubuntu 12.04 Precise Pangolin since its first beta release, and found it much better than any of its predecessors, be it in performance, look and feel, and also some new features.

One of the main feature in the latest Ubuntu OS is, of course, Unity, the desktop environment inspired by the sky-rocketing popularity of tablet devices. By delivering Unity, the Ubuntu team aims to provide most efficient, efective and pleasent to use user interface, mainly for new users.

But... :)

Many users, mostly long-time users of Ubuntu, find it not very interesting, because it change the way how they use their operating system. Fortunately, if you don't like a desktop environment in Ubuntu/Linux, it is very easy to switch to another one. KDE, XFCE, and LXDE among others, and of course the classic GNOME interface.

The classic GNOME interface in Ubuntu 12.04 which now based on GNOME 3.4, is very similar to that of the Ubuntu classic user interface with some improvements.

But if you have been using the classic interface, you may already notice that there is still a bug in the classic session (which is not so big problem, at least for me, but still, need to be fixed). The bug is incorporated with the Ambiance theme, part of Light themes, the default Ubuntu GTK/Metacity theme. The most annoying thing I found in current (Ubuntu Precise beta) Ambiance theme in classic session is that it shows wrong color on window list applet and the Show Desktop button, and also quite unreadable font of the Menubar. Apart from that, users (including me) also found that the sidebar pane of Nautilus file manager is still have not a very pleasant look, mostly because of the dark color of toolbar on top which is "trimmed" by the sidebar, without some adjustment or something.

Fortunately, since I like to make some GTK themes for own use by looking and editing existing themes over past few months, I was quite easily able to fix the issue, by editing the original Ambiance theme.

From what I found, it seems the main cause of the problem is that the new Ambiance theme still does not anticipate the new feature in GNOME 3.4 that introduce the "backdrop" or unfocused state for GTK elements, in this case is the button applet element of the theme.

Here, take a look at the problem of the panel element of the original Ambiance theme (note that the Nautilus sidebar and Metacity things were not problems; they are just some adjustment I'd like to made to my modified Ambiance theme):

As you can see, the bright white buttons of the Window List and the Show Desktop applet on bottom panel are very annoying. And also the near-dark font of the Menubar on the top panel is almost unreadable.

So, what did I do to the theme?

Well, I just added some extra states in css file for the panel, in this case is a file called gnome-panel.css in /usr/share/themes/Ambiance/gtk-3.0/apps folder, with the ":backdrop" state to several selectors.

The following is the complete content of the gnome-panel.css file including my modifications (the lines marked with "by Zon" comments):

/* Fallback Mode Panel */
PanelWidget :backdrop, /* by Zon */
PanelApplet :backdrop, /* by Zon */
PanelToplevel :backdrop, /* by Zon */
PanelWidget,
PanelApplet,
PanelToplevel {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.5)),
                                     to (shade (@dark_bg_color, 1.05)));
    padding: 0;

    color: @dark_fg_color;
}

PanelApplet {
    border-width: 0;
}

PanelSeparator:backdrop, /* by Zon */
PanelSeparator {
    border-width: 0;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.5)),
                                     to (shade (@dark_bg_color, 1.05)));

    color: @dark_fg_color;
        padding: 7px; /* by Zon */
}

.gnome-panel-menu-bar,
PanelApplet > GtkMenuBar.menubar,
PanelApplet > GtkMenuBar.menubar.menuitem,
PanelMenuBar.menubar,
PanelMenuBar.menubar.menuitem {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.5)),
                                     to (shade (@dark_bg_color, 1.05)));
        -PanelMenuBar-icon-visible: true; /* by Zon */
}

PanelAppletFrame { 
    background-color: @dark_bg_color;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.5)),
                                     to (shade (@dark_bg_color, 1.05)));
    border-width: 0;
}

PanelApplet .button:backdrop, /* by Zon */
PanelApplet .button {
    -GtkButton-inner-border: 2;

    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.5)),
                                     to (shade (@dark_bg_color, 1.05)));

    border-color: shade (@dark_bg_color, 0.78);
    border-radius: 0;
    border-width: 0 1px 0 1px;

    color: @dark_fg_color;
    text-shadow: none;

    -unico-border-gradient: none;
    -unico-glow-radius: 0;
    -unico-inner-stroke-width: 0;
    -unico-outer-stroke-width: 0;
}

PanelApplet .button:prelight:active:backdrop, /* by Zon */
PanelApplet .button:active:backdrop, /* by Zon */
PanelApplet .button:prelight:active,
PanelApplet .button:active {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 0.85)),
                                     to (shade (@dark_bg_color, 1.0))); 
    border-color: shade (@dark_bg_color, 0.78);
    border-radius: 0;
    border-width: 0 1px 0 1px;

    -unico-border-gradient: none;
    -unico-glow-radius: 0;
    -unico-inner-stroke-width: 0;
    -unico-outer-stroke-width: 0;
}

PanelApplet .button:prelight:backdrop, /* by Zon */
PanelApplet .button:prelight {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.7)),
                                     to (shade (@dark_bg_color, 1.25)));
    border-color: shade (@dark_bg_color, 0.78);
    border-radius: 0;
    border-width: 0 1px 0 1px;

    -unico-border-gradient: none;
    -unico-glow-radius: 0;
    -unico-inner-stroke-width: 0;
    -unico-outer-stroke-width: 0;
}

ClockBox {
    text-shadow: 0 -1 shade (@dark_bg_color, 0.6);
}

WnckPager, WnckTasklist {
    background-color: @dark_bg_color;
}

Apart from the fix for the gnome panel element, I also made modifications for Nautilus sidebar and adjustment to the Metacity window border to meet the dark color of the sidebar. Below is the result of all modifications I currently made for the Ambiance:

That, is what I call beautiful Ubuntu theme :)

You can fix the Ambiance theme yourself by adding some additional entry by editing the gnome-panel.css in the original Ambiance theme directly (located in /usr/share/themes/Ambiance -- root previlage required to edit the file) or by copying the theme folder to .themes folder in your home folder (/home/[YourUserName]/.themes) and editing the css file, like what I've done.

Or, if you just want to use my modified theme, I called it zonModAmbiance theme, you can download it here.

UPDATE

The theme has been updated.
See the updated post containing more fix to the Ambiance theme.

DOWNLOAD

To use the theme, extract the .tar.gz file and move either to /usr/share/themes/ or /home/[YourUserName]/.themes/, and then use gnome-tweak-tool or MyUnity in Ubuntu Precise to change theme.

Note: This theme is for and tested on Ubuntu 12.04 only.

I hope you like it.

***

Report This Bug on Launchpad

After publishing this article, I search through Google to find out whether this bug is already known, identified or even fixed in latest Ubuntu 12.04 updates or not. I found this exact bug has been reported on Launchpad, but not confirmed yet before I clicked a link says "This bug affects you". So I click the link because it does affect me. Then I post my "patch" in the hope it will be useful for Ubuntu community.

If you think this bug also affects you, you should report this too on Launchpad, so that this bug will be gone when Ubuntu 12.04 final is released.

***

Flexible theme can mimic Ambiance theme

Recently, I released a new theme called zonColor, that you can use to mimic the color scheme of Ambiance theme, or any other themes, or even make your own.

.

zonModAmbiance: Fixing Ambiance, the default Ubuntu Theme (12.04 Precise Pangolin) by fanDigital

PS: Still, sorry for my English :)