Unico Theming Engine on Fedora 16

Unico Theming Engine on Fedora 16

Unico Theming Engine on Fedora16

Finnbarr P. Murphy([email protected])

GNOME 3.2 on Fedora 16 ships with only one GTK+ 3.x theming engine, i.e. Adwaita, which isused to theme the bland GNOME 3 default theme (also called Adwaita.) This post shows to how toadd the Unico theming engine to Fedora 16 so that you can make use of the many excellentthemes that use or can use the Unico engine.

For example, here are two themes which are currently unavailable for GNOME 3 on Fedora 16 butwhich are nicely rendered by the Unico theme engine. This is the Zubitwo theme:

and this is the Adwance theme:For p

erson

nal u

se on

ly

10-11-2011 Copyright 2004-2011 Finnbarr P. Murphy. All rights reserved. 1/14

http://blog.fpmurphy.com/2011/10/unico-theming-engine-on-fedora-16.html

http://blog.fpmurphy.com/2011/10/unico-theming-engine-on-fedora-16.html

https://launchpad.net/u.ico

http://blog.fpmurphy.com/blog-images/unico2.png


What I hear you ask is a theme engine and why do I need more than one theme engine? There isno precise formal definition of a theme engine that I can point to. However a theme engine can bethought of as a thin layer of code that translates the look and feel (the style) of a GTK+ 2.x orGTK+ 3.x widget according to a set of written directives. Or, to put it another way, a theme enginerenders widgets in accordance with directives contained in themes. Theme engines work becausethe GTK+ widget library supports the customization of widget look and feel by means of a sharedlibrary (.so) which is loaded to render a particular style. Styling options are mostly engine specificso what works with one engine may or may not work with another engine.

Theme engines are not something new and wonderful; they have been around for a number ofyears. Support for theme engines was first provided in GTK+ 2.x via the GtkStyle interface using aconfiguration file called gtkrc. Since 2005 (GNOME 2.2), the default GNOME 2 theme engine hasbeen Clearlooks which was created by Richard Stellingwerff and Daniel Borgmann. Clearlooks hasundergone extensive modification since it was first introduced and now uses the Cairo 2Dgraphics library to render widgets. Prior to Clearlooks, there was no default theme engine. If notheme engine is provided, GTK+ provides a very basic theme called Raleigh. By the way, GTK+2.2 and later includes support for a dark variation of an existing theme. Just set the GtkSettingsgtk-application-prefer-dark-theme to true.

G T K + 2 . x t h e m e s g e n e r a l l y l i v e i n e i t h e r a g l o b a l p u b l i c d i r e c t o r y (/usr/share/themes/THEMENAME/gtk-2.0) or in $HOME/.themes/THEMENAME/gtk-2.0/. If themesof the same name are installed in both the global and the $HOME/.themes directories, GNOMEwill use the one in $HOME/.themes. If you want to learn more about GTK+ 2.x theming, a goodstarting point is here and here.

At the 2008 Istanbul GUADEC, developers discussed ways to improve GTK+ theming support anda plan was hatched to move to CSS (Cascading Style Sheets) for specifying the appearance ofGTK+ widgets instead of using gtkrc. Meanwhile GNOME developer Robert Staudinger hadalready been working on an experimental GTK+ email in January 2011:

This is a blatant ripoff of some clearlooks drawing methods, used as a support by theAdwaita theme to help out with the things that can’t be themed through

For p

erson

nal u

se on

ly



http://en.wikipedia.org/wiki/Clearlooks

http://www.stellingwerff.com/

http://orford.org/gtk/

http://live.gnome.org/GnomeArt/Tutorials/GtkThemes

http://en.wikipedia.org/wiki/GNOME_Users_And_Developers_European_Conference

http://blog.fpmurphy.com/en.wikipedia.org/wiki/Cascading_Style_Sheets

http://svn.gnome.org/svn/gtk-css-engine/trunk/


GtkStyleContext.

If we look at the files under /usr/share/themes/Adwaita, the various files and subdirectories shouldmake more sense to you in light of the quick history of theming engines that I have just provided.

./gtk-2.0

./gtk-2.0/gtkrc

./gtk-3.0

./gtk-3.0/gtk-dark.css

./gtk-3.0/gnome-applications.css

./gtk-3.0/gtk-widgets-dark-overrides.css

./gtk-3.0/gtk-widgets-assets.css

./gtk-3.0/gtk-widgets.css

./gtk-3.0/assets

./gtk-3.0/assets/sidebar-radio-checked-dark.svg

./gtk-3.0/assets/scale-slider-marks-above-horizontal.svg

./gtk-3.0/assets/scale-slider-marks-below-horizontal-dark.svg

./gtk-3.0/assets/radio-unselected-insensitive.svg

./gtk-3.0/assets/checkbox-mixed-insensitive.svg

./gtk-3.0/assets/sidebar-radio-selected-prelight.svg

./gtk-3.0/assets/scale-slider-horizontal-insensitive-dark.svg

./gtk-3.0/assets/radio-unselected.svg

./gtk-3.0/assets/primary-toolbar-button-active-border.svg

./gtk-3.0/assets/trough-active-border-horizontal-dark.svg

./gtk-3.0/assets/trough-active-border-vertical.svg

./gtk-3.0/assets/trough-border-vertical.svg

./gtk-3.0/assets/radio-selected-insensitive-dark.svg

./gtk-3.0/assets/radio-unselected-insensitive-dark.svg

./gtk-3.0/assets/checkbox-unchecked.svg

./gtk-3.0/assets/progressbar-border-dark.svg

./gtk-3.0/assets/scale-slider-vertical-dark.svg

./gtk-3.0/assets/checkbox-checked-insensitive.svg

./gtk-3.0/assets/entry-border-normal-dark.svg

./gtk-3.0/assets/radio-mixed-dark.svg

./gtk-3.0/assets/radio-menuitem-checked-selected.svg

./gtk-3.0/assets/sidebar-radio-selected-dark.svg

./gtk-3.0/assets/entry-border-focused-dark.svg

./gtk-3.0/assets/progressbar-border-vertical-dark.svg

./gtk-3.0/assets/scale-slider-vertical-insensitive.svg

./gtk-3.0/assets/trough-border-horizontal-dark.svg

./gtk-3.0/assets/scale-slider-horizontal.svg

./gtk-3.0/assets/scale-slider-marks-below-vertical-dark.svg

./gtk-3.0/assets/scale-slider-vertical.svg

./gtk-3.0/assets/radio-selected-insensitive.svg

./gtk-3.0/assets/checkbox-unchecked-dark.svg

./gtk-3.0/assets/button-border-dark.svg

./gtk-3.0/assets/button-border.svg

./gtk-3.0/assets/trough-active-border-vertical-dark.svg

./gtk-3.0/assets/checkbox-mixed-insensitive-dark.svg

./gtk-3.0/assets/scale-slider-marks-below-vertical-insensitive.svg

./gtk-3.0/assets/checkbox-checked.svg

./gtk-3.0/assets/radio-menuitem-checked.svg

./gtk-3.0/assets/scale-slider-marks-above-vertical-insensitive-dark.svg

./gtk-3.0/assets/scale-slider-marks-below-vertical-insensitive-dark.svg

./gtk-3.0/assets/checkbox-mixed.svg

./gtk-3.0/assets/sidebar-radio-checked.svg

./gtk-3.0/assets/scale-slider-horizontal-insensitive.svg

./gtk-3.0/assets/progressbar-border.svg

./gtk-3.0/assets/primary-toolbar-raised-button-border-dark.svg

./gtk-3.0/assets/primary-toolbar-button-active-border-dark.svg

./gtk-3.0/assets/primary-toolbar-raised-button-border.svg

./gtk-3.0/assets/scale-slider-horizontal-dark.svg

./gtk-3.0/assets/combobox-entry-border-active.svg

./gtk-3.0/assets/checkbox-menuitem-checked-insensitive.svg

./gtk-3.0/assets/radio-mixed-insensitive.svg

For p

erson

nal u

se on

ly



./gtk-3.0/assets/switch-slider-border.svg

./gtk-3.0/assets/checkbox-menuitem-checked-selected.svg

./gtk-3.0/assets/button-default-border.svg

./gtk-3.0/assets/button-active-border-dark.svg

./gtk-3.0/assets/sidebar-radio-selected.svg

./gtk-3.0/assets/scale-slider-marks-above-horizontal-insensitive-dark.svg

./gtk-3.0/assets/checkbox-menuitem-mixed-insensitive.svg

./gtk-3.0/assets/radio-mixed-insensitive-dark.svg

./gtk-3.0/assets/checkbox-unchecked-insensitive.svg

./gtk-3.0/assets/checkbox-checked-insensitive-dark.svg

./gtk-3.0/assets/trough-border-horizontal.svg

./gtk-3.0/assets/sidebar-radio-prelight.svg

./gtk-3.0/assets/checkbox-unchecked-insensitive-dark.svg

./gtk-3.0/assets/scale-slider-marks-below-horizontal.svg

./gtk-3.0/assets/checkbox-menuitem-mixed.svg

./gtk-3.0/assets/entry-border-normal.svg

./gtk-3.0/assets/scale-slider-marks-below-vertical.svg

./gtk-3.0/assets/radio-selected-dark.svg

./gtk-3.0/assets/scale-slider-marks-above-horizontal-insensitive.svg

./gtk-3.0/assets/radio-menuitem-checked-insensitive.svg

./gtk-3.0/assets/checkbox-mixed-dark.svg

./gtk-3.0/assets/switch-slider-active-border.svg

./gtk-3.0/assets/button-active-border.svg

./gtk-3.0/assets/scale-slider-marks-below-horizontal-insensitive-dark.svg

./gtk-3.0/assets/radio-unselected-dark.svg

./gtk-3.0/assets/trough-border-vertical-dark.svg

./gtk-3.0/assets/radio-menuitem-mixed-insensitive.svg

./gtk-3.0/assets/progressbar-border-vertical.svg

./gtk-3.0/assets/radio-mixed.svg

./gtk-3.0/assets/entry-border-focused.svg

./gtk-3.0/assets/scale-slider-marks-above-horizontal-dark.svg

./gtk-3.0/assets/scale-slider-marks-above-vertical-insensitive.svg

./gtk-3.0/assets/radio-selected.svg

./gtk-3.0/assets/trough-active-border-horizontal.svg

./gtk-3.0/assets/scale-slider-vertical-insensitive-dark.svg

./gtk-3.0/assets/button-default-border-dark.svg

./gtk-3.0/assets/checkbox-menuitem-checked.svg

./gtk-3.0/assets/scale-slider-marks-below-horizontal-insensitive.svg

./gtk-3.0/assets/scale-slider-marks-above-vertical-dark.svg

./gtk-3.0/assets/radio-menuitem-mixed.svg

./gtk-3.0/assets/scale-slider-marks-above-vertical.svg

./gtk-3.0/assets/checkbox-checked-dark.svg

./gtk-3.0/settings.ini

./gtk-3.0/gtk.css

./gtk-3.0/gtk-widgets-assets-dark.css

./backgrounds

./backgrounds/stripes.jpg

./index.theme

./metacity-1

./metacity-1/metacity-theme-3.xml


The files under …/gtk-3.0/assets/ are image files for the GTK+ 3.x theming engine. How and wherethey are actually used is specified in one or more of the seven CSS files used to specify thisparticular theme. The file gtk-dark.css indicates that a dark variation of the Adwaita theme is alsoavailable.

Notice the metacity files? I have yet not talked about what are sometimes called metacity themes.Metacity is a window manager that was introduced in GNOME 2.2 as a replacement for an olderand less flexible window manager. Metacity supports customization (styling) of its window framesusing XML files. Remember, a window frame and what is inside of a window are independent andunrelated. A Metacity theme is a set of instructions about how to render the frame decorationsaround a window. A good starting point to learn more about Metacity is here.

For p

erson

nal u

se on

ly


http://wikipedia.org/wiki/Metacity

http://developer.gnome.org/creating-metacity-themes/2.34/creating-metacity-themes.html

http://developer.gnome.org/creating-metacity-themes/2.34/creating-metacity-themes.html


With background information out of the way, let us now turn to how to build, install and use theUnico theming engine with GNOME 3.2 on Fedora 16. The current version of Unico is 1.0.1. Youcan download it at the Ubuntu launchpad website. The engine was developed by Canonicalemployee Andrea Cinitan. It builds on Fedora 16 without any problems if you have the followingdevelopment libraries installed:

cairo-devel-1.10.2-4gtk3-devel-3.2.0-1

Once you have the requisite development libraries installed, you can configure and build the Unicotheming engine using:

$ ./configure --prefix=/$ make

You can test the new theme engine by invoking test-widgets from the tests sub-directory.

Use make install to install the library. For 32-bit platforms, the appropriate place is/lib/gtk-3.0/3.0.0/theming-engines/.

# ls -l /lib/gtk-3.0/3.0.0/theming-engines/libunico*-rw-r--r--. 1 root root 382502 Oct 8 17:17 libunico.a-rwxr-xr-x. 1 root root 1166 Oct 8 17:17 libunico.la-rwxr-xr-x. 1 root root 228069 Oct 8 17:17 libunico.so

For 64-bit platforms, /lib64/gtk-3.0/3.0.0/theming-engines is the appropriate place. You can delete

For p

erson

nal u

se on

ly


https://launchpad.net/~cimi

https://launchpad.net/~cimi



the .a and .la files; they are not required.

If you want to create an RPM package for Unico, here is a suitable .spec file.

Name: gtk3-unico-engineVersion: 1.0.1Release: 1%{?dist}Summary: Unico GTK3+ theme engine

Group: System Environment/LibrariesLicense: LGPLv2+URL: https://launchpad.net/unico

Packager: fpmurphy

Source: http://launchpad.net/ubuntu/+archive/primary/+files/gtk3-engines-unico_1.0.1.orig.tar.gzBuildRoot: %{_tmppath}/%{name}-%{version}-%{release}-root

BuildRequires: glib2-devel >= 2.26.0BuildRequires: gtk3-devel >= 3.1.10BuildRequires: cairo-devel >= 1.10

%descriptionUnico is a GTK3+ theme engine that uses CSS for styling directives.It is the default GTK3+ theme engine on Ubuntu 11.10 (Oneiric).

%prep%setup -q -n unico-%{version}

%build%configuremake %{?_smp_mflags}

%installrm -rf $RPM_BUILD_ROOTmake install DESTDIR=$RPM_BUILD_ROOT

%cleanrm -rf $RPM_BUILD_ROOT

%define _unpackaged_files_terminate_build 0# only package the .so and any doc

%files%defattr(-,root,root,-)%doc%{_libdir}/gtk-3.0/3.0.0/theming-engines/libunico.so

%changelog* Sat Oct 8 2011 F.P.Murphy 1.0.1- Initial RPM release

If you are unsure of how to build an RPM package, here is a good resource. If you want to use theUnico engine RPM that I created, you can download the RPM or SRPM from here.

Looking at the source code that implements to the GtkThemingEngine object provides us with aneasy way to compare the styling directives supported by the Adwaita and Unico engines.

Here is the Unico implementation:

static void

For p

erson

nal u

se on

ly


http://fedoraproject.org/wiki/How_to_create_an_RPM_package

http://blog.fpmurphy.com/fpmurphy.com/public


unico_engine_class_init (UnicoEngineClass *klass){ GtkThemingEngineClass *engine_class = GTK_THEMING_ENGINE_CLASS (klass); engine_class->render_activity = unico_engine_render_activity; engine_class->render_arrow = unico_engine_render_arrow; engine_class->render_background = unico_engine_render_background; engine_class->render_check = unico_engine_render_check; engine_class->render_expander = unico_engine_render_expander; engine_class->render_extension = unico_engine_render_extension; engine_class->render_focus = unico_engine_render_focus; engine_class->render_frame = unico_engine_render_frame; engine_class->render_frame_gap = unico_engine_render_frame_gap; engine_class->render_handle = unico_engine_render_handle; engine_class->render_line = unico_engine_render_line; engine_class->render_option = unico_engine_render_option; engine_class->render_slider = unico_engine_render_slider; gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("background-texture", "Background texture", "Background texture", CAIRO_GOBJECT_TYPE_PATTERN, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("focus-border-color", "Focus border color", "Focus border color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_int ("focus-border-radius", "Focus border radius", "Focus border radius", 0, G_MAXINT, 0, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("focus-fill-color", "Focus fill color", "Focus fill color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("focus-outer-stroke-color", "Focus outer stroke color", "Focus outer stroke color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_int ("glow-radius", "Glow radius", "Glow radius", 0, G_MAXINT, 0, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("glow-color", "Glow color", "Glow color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-color", "Inner stroke color", "Inner stroke color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-top-color", "Inner stroke top color", "Inner stroke top color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-right-color", "Inner stroke right color", "Inner stroke right color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL,

For p

erson

nal u

se on

ly



g_param_spec_boxed ("inner-stroke-bottom-color", "Inner stroke bottom color", "Inner stroke bottom color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("glow-color", "Glow color", "Glow color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-color", "Inner stroke color", "Inner stroke color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-top-color", "Inner stroke top color", "Inner stroke top color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-right-color", "Inner stroke right color", "Inner stroke right color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-bottom-color", "Inner stroke bottom color", "Inner stroke bottom color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-left-color", "Inner stroke left color", "Inner stroke left color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-gradient", "Inner stroke gradient", "Inner stroke gradient", CAIRO_GOBJECT_TYPE_PATTERN, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("inner-stroke-width", "Inner stroke width", "Inner stroke width", GTK_TYPE_BORDER, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("outer-stroke-color", "Outer stroke color", "Outer stroke color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("outer-stroke-top-color", "Outer stroke top color", "Outer stroke top color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("outer-stroke-right-color", "Outer stroke right color", "Outer stroke right color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("outer-stroke-bottom-color", "Outer stroke bottom color", "Outer stroke bottom color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("outer-stroke-left-color", "Outer stroke left color",

For p

erson

nal u

se on

ly



"Outer stroke left color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("outer-stroke-gradient", "Outer stroke gradient", "Outer stroke gradient", CAIRO_GOBJECT_TYPE_PATTERN, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("outer-stroke-width", "Outer stroke width", "Outer stroke width", GTK_TYPE_BORDER, 0)); gtk_theming_engine_register_property (UNICO_NAMESPACE, NULL, g_param_spec_boxed ("text-shadow-color", "Text shadow color", "Text shadow color", GDK_TYPE_RGBA, 0));}

and here is what is implemented by the Adwaita engine:

static voidadwaita_engine_class_init (AdwaitaEngineClass *klass){ GtkThemingEngineClass *engine_class = GTK_THEMING_ENGINE_CLASS (klass); engine_class->render_arrow = adwaita_engine_render_arrow; engine_class->render_focus = adwaita_engine_render_focus; engine_class->render_check = adwaita_engine_render_check; engine_class->render_option = adwaita_engine_render_option; engine_class->render_extension = adwaita_engine_render_extension; engine_class->render_frame = adwaita_engine_render_frame; engine_class->render_background = adwaita_engine_render_background; engine_class->render_expander = adwaita_engine_render_expander; engine_class->render_activity = adwaita_engine_render_activity; engine_class->render_slider = adwaita_engine_render_slider; engine_class->render_handle = adwaita_engine_render_handle; gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boxed ("focus-border-color", "Focus border color", "Focus border color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_int ("focus-border-radius", "Focus border radius", "Focus border radius", 0, G_MAXINT, 0, 0)); gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boxed ("focus-border-gradient", "Focus border gradient", "Focus border gradient", CAIRO_GOBJECT_TYPE_PATTERN, 0)); gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boxed ("focus-fill-color", "Focus fill color", "Focus fill color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boxed ("selected-tab-color", "Selected tab color", "Selected tab color", GDK_TYPE_RGBA, 0));

For p

erson

nal u

se on

ly



gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boxed ("border-gradient", "Border gradient", "Border gradient", CAIRO_GOBJECT_TYPE_PATTERN, 0)); gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boolean ("focus-border-dashes", "Focus border uses dashes", "Focus border uses dashes", FALSE, 0)); gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boxed ("menuitem-arrow-color", "Menuitem arrow color", "Menuitem arrow color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boxed ("switch-grip-color", "Switch grip color", "Switch grip color", GDK_TYPE_RGBA, 0)); gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL, g_param_spec_boxed ("progressbar-pattern", "Progressbar pattern", "Progressbar pattern", CAIRO_GOBJECT_TYPE_PATTERN, 0));}

The Unico engine appears to support a richer set of styling options. Go here if you want to browsethe source code for the Unico engine. Go here if you want to browse source code for the Adwaitaengine.

Once you have the Unico theming engine installed, you need to find a suitable GNOME theme thatuses this engine, install that theme and tell GNOME to use the theme. For the purposes of thispost, I installed the excellent GNOME Zukitwo theme pack which was created by a young Swedishdigital artist. This theme pack includes three variations of a minimalistic theme as three separatethemes as well as a theme for the GNOME Shell.

Here are the files for one of the three themes:

./metacity-1

./metacity-1/maximize_unfocused_prelight.png

./metacity-1/menu_prelight.png

./metacity-1/maximize_focused_normal.png

./metacity-1/maximize_focused_prelight.png

./metacity-1/close_unfocused_prelight.png

./metacity-1/minimize_unfocused_prelight.png

./metacity-1/unmaximize_focused_pressed.png

./metacity-1/close_unfocused.png

./metacity-1/maximize_unfocused.png


./metacity-1/menu.png

./metacity-1/minimize_focused_prelight.png

./metacity-1/trough_right.png

./metacity-1/close_focused_normal.png

./metacity-1/close_focused_prelight.png

./metacity-1/trough_middle.png

./metacity-1/close_focused_pressed.png

./metacity-1/minimize_focused_pressed.png

./metacity-1/minimize_focused_normal.png

./metacity-1/unmaximize_focused_normal.png

./metacity-1/unmaximize_focused_prelight.png

For p

erson

nal u

se on

ly


http://bazaar.launchpad.net/~unico-team/unico/trunk/files

http://blog.fpmurphy.com/git.gnome.org/browse/gnome-themes-standard

http://blog.fpmurphy.com/lassekongo83.deviantart.com/art/Zukitwo-203936861



./metacity-1/minimize_unfocused.png

./metacity-1/unmaximize_unfocused_prelight.png

./metacity-1/maximize_focused_pressed.png

./metacity-1/trough_left.png

./metacity-1/unmaximize_unfocused.png

./gtk-3.0

./gtk-3.0/unity

./gtk-3.0/unity/close_unfocused_over.png

./gtk-3.0/unity/maximize_unfocused_prelight.png

./gtk-3.0/unity/menu_prelight.png

./gtk-3.0/unity/maximize_focused_normal.png

./gtk-3.0/unity/maximize_focused_prelight.png

./gtk-3.0/unity/close_unfocused_prelight.png

./gtk-3.0/unity/minimize_unfocused_prelight.png

./gtk-3.0/unity/unmaximize_focused_pressed.png

./gtk-3.0/unity/close_unfocused.png

./gtk-3.0/unity/maximize_unfocused.png

./gtk-3.0/unity/minimize_unfocused_over.png

./gtk-3.0/unity/menu.png

./gtk-3.0/unity/minimize_focused_prelight.png

./gtk-3.0/unity/trough_right.png

./gtk-3.0/unity/close_focused_normal.png

./gtk-3.0/unity/minimize.png

./gtk-3.0/unity/close_focused_prelight.png

./gtk-3.0/unity/trough_middle.png

./gtk-3.0/unity/close_focused_pressed.png

./gtk-3.0/unity/minimize_focused_pressed.png

./gtk-3.0/unity/minimize_focused_normal.png

./gtk-3.0/unity/unmaximize_focused_normal.png

./gtk-3.0/unity/unmaximize_focused_prelight.png

./gtk-3.0/unity/unmaximize_unfocused_pressed.png

./gtk-3.0/unity/close.png

./gtk-3.0/unity/minimize_unfocused.png

./gtk-3.0/unity/close_unfocused_pressed.png

./gtk-3.0/unity/maximize_unfocused_over.png

./gtk-3.0/unity/unmaximize_unfocused_prelight.png

./gtk-3.0/unity/unmaximize.png

./gtk-3.0/unity/maximize.png

./gtk-3.0/unity/maximize_focused_pressed.png

./gtk-3.0/unity/minimize_unfocused_pressed.png

./gtk-3.0/unity/maximize_unfocused_pressed.png

./gtk-3.0/unity/unmaximize_unfocused_over.png

./gtk-3.0/unity/trough_left.png

./gtk-3.0/unity/unmaximize_unfocused.png

./gtk-3.0/gtk-widgets.css

./gtk-3.0/apps

./gtk-3.0/apps/gnome-panel.css

./gtk-3.0/apps/nautilus.css

./gtk-3.0/apps/unity.css

./gtk-3.0/settings.ini

./gtk-3.0/gtk.css

./gtk-2.0

./gtk-2.0/widgets

./gtk-2.0/widgets/Null

./gtk-2.0/widgets/Null/null.png

./gtk-2.0/widgets/Null/Thumbs.db

./gtk-2.0/widgets/Panel

./gtk-2.0/widgets/Panel/panel-button-inactive.png

./gtk-2.0/widgets/Panel/panel-button-active.png

./gtk-2.0/widgets/Panel/arrow-blank.png

./gtk-2.0/widgets/Panel/Thumbs.db

./gtk-2.0/widgets/Panel/handle-h.png

./gtk-2.0/widgets/Panel/arrow-down.png

./gtk-2.0/widgets/Panel/handle-v.png

./gtk-2.0/widgets/Panel/panel-bg.png

./gtk-2.0/widgets/Panel/panel-button-hover.png

./gtk-2.0/widgets/toolbar.rc

For p

erson

nal u

se on

ly



./gtk-2.0/widgets/panel.rc

./gtk-2.0/widgets/Others

./gtk-2.0/widgets/Others/null.png

./gtk-2.0/widgets/Others/handle.png

./gtk-2.0/widgets/Others/toolbar.png

./gtk-2.0/widgets/Others/close.png

./gtk-2.0/apps

./gtk-2.0/apps/Nautilus

./gtk-2.0/apps/Nautilus/breadcrumb_active.png

./gtk-2.0/apps/Nautilus/mode_normal.png

./gtk-2.0/apps/Nautilus/resize_grip.png

./gtk-2.0/apps/Nautilus/breadcrumb_prelight.png

./gtk-2.0/apps/Nautilus/slider.png

./gtk-2.0/apps/Nautilus/left_slider_normal.png

./gtk-2.0/apps/Nautilus/breadcrumb_normal.png

./gtk-2.0/apps/Nautilus/trough.png

./gtk-2.0/apps/Nautilus/extra-widget.png

./gtk-2.0/apps/Nautilus/slider-prelight.png

./gtk-2.0/apps/Nautilus/mode_pressed.png

./gtk-2.0/apps/Nautilus/nautilus-toolbar.png

./gtk-2.0/apps/Nautilus/mode_prelight.png

./gtk-2.0/apps/Nautilus/right_slider_normal.png

./gtk-2.0/apps/nautilus-e.rc

./gtk-2.0/apps/stock_forward.png

./gtk-2.0/apps/Null

./gtk-2.0/apps/Null/null.png

./gtk-2.0/apps/Null/Thumbs.db

./gtk-2.0/apps/nautilus.rc

./gtk-2.0/apps/stock_back.png

./gtk-2.0/apps/stock_home.png

./gtk-2.0/apps/stock_stop.png

./gtk-2.0/apps/stock_find.png

./gtk-2.0/apps/stock_refresh.png

./gtk-2.0/apps/combo_down.png

./gtk-2.0/apps/pcmanfm.rc

./gtk-2.0/apps/Others

./gtk-2.0/apps/Others/null.png

./gtk-2.0/apps/Others/Thumbs.db

./gtk-2.0/apps/dummy.png

./gtk-2.0/apps/gedit.rc

./gtk-2.0/apps/Handles

./gtk-2.0/apps/Handles/Thumbs.db

./gtk-2.0/apps/Handles/handle-nautilus.png

./gtk-2.0/apps/Handles/resize_grip.png

./gtk-2.0/gtkrc

./panelbg.png

As you can see there are lots more files than for the Adwaita theme.

GTK+ 3.x widgets are styled using the Unico engine. GTK+ 2.x widgets are styled using thewell-respected GTK+ 2.x Murrine theme engine, which was upgraded by Andrea Cimitan to renderGTK+ 2.x widgets. Murrine is the Italian word for colored glass patterns made by Venetian glassmakers. The engine is written in C, uses the Cairo graphics library and is highly configurable. Thistheming engine is available in the Fedora 16 repositories as gtk-murrine-engine-0.98.1. You needto install this package if you wish to use the Zukitwo themes.

The easiest way to enable other themes on GNOME 3 on Fedora 16 at present is to install thefollowing RPM packages

gnome-shell-extension-commongnome-shell-extension-user-themegnome-tweak-tool

For p

erson

nal u

se on

ly


http://www.cimitan.com/murrine/


and use gnome-tweak-tool to select and enable the new theme. Note that you need to first enablethe user-theme GNOME Shell extension using gnome-tweak-tool before trying to change any ofthe themes.

This is a screenshot of the Zukitwo-Dark theme:

and this is a screenshot of the Zukitwo-Resonance theme:

Another Ubuntu theme which I quite like is Ambiance. You can download a GTK3 port of Ambiancecalled adwanta from Deviant Art. By default it uses the Adwaita engine and does not look

For p

erson

nal u

se on

ly




http://thedeviantmars.deviantart.com/art/Adwance-gtk3-207704533


particularly good. However, if you change the engine directive in gtk-widgets.css, you end up witha much tighter and nicer looking theme. The second screenshot in this post (see above) shows theAmbiance theme used with the Zukitwo shell theme.

Another example of a theme that uses the Unico engine is Ambiance Blue:

Well that is about all I have time to write about theming engines for today. If you are feelingadventurous and want to experiment with another GTK3+ theme engine, why not port the Soliditytheme engine to Fedora and play with it. It is the only other publicly available GTK3+ themeengine that I am aware of at present. Be forewarned however – it is still under development.

As always, enjoy experimenting.

For p

erson

nal u

se on

ly


http://satya164.deviantart.com/art/Ambiance-Blue-Theme-Suite-196833665


http://gnome-look.org/content/show.php?content=142331

Documents

Unico Theming Engine on Fedora 16