customizing the gnome 3 shell

Customizing the GNOME 3 Shell

Customizing the GNOME 3 ShellFinnbarr P. Murphy

([email protected])

In this post I will share a modicum of what I have learned to date about customizing the newGNOME 3 Shell. This is based on the GNOME Shell in Fedora 15 Alpha. The good news is that theGNOME Shell is highly configurable. The bad news is that some of this information may becomeout-of-date quite quickly as the GNOME Shell is still somewhat of a moving target even though itis supposedly close to release.

Here is what the GNOME Shell looks like in Fedora 15 Alpha with all updates applied as of March23rd 2011:

By the way, that is a really beautiful wallpaper! I am glad that cooler heads prevailed and theFedora Project has finally decided to go with its own custom wallpaper rather than use the defaultupstream GNOME Shell wallpaper.

Here is what the Applications Overview looks like:For p

erson

nal u

se on

ly

04-09-2011 Copyright 2004-2011 Finnbarr P. Murphy. All rights reserved. 1/14

http://blog.fpmurphy.com/2011/03/customizing-the-gnome-3-shell.html

http://blog.fpmurphy.com/blog-images/gnome3cust1-6.png


Here is what a GNOME terminal window looks like:

This is the default theme which, by the way, is called Adwaita. This post will show you how tomake the titlebar smaller so that it does not take up so much space on the screen, add back in theminimize and maximize buttons, color the title bars, and more.

GNOME 3 contains some major changes with respect to persistent application settings data. TheGConf CORBA-based configuration system is no longer used; it has been replaced by GSettings.GSettings is agnostic about its backend; dconf is merely one backend. Key names are restricted tolowercase characters, numbers and dashes (-). Names must begin with a character, must be 32characters or less in length, must not end with a dash and must not contain consecutive dashes.

For p

erson

nal u

se on

ly




http://projects.gnome.org/gconf/

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

http://library.gnome.org/devel/gio/unstable/GSettings.html

http://live.gnome.org/dconf


GSettings stores its schemas in a binary format, unlike GConf which uses XML files.Fedora 14 was the first Fedora release to include GSettings. See the glib-compile-schemasmanpage for further information.

A new command line utility gsettings, which replaces gconftool-2, is provided to enable you toeasily interface with GSettings.

$ gsettingsUsage: gsettings COMMAND [ARGS...]

Commands: help Show this information list-schemas List installed schemas list-relocatable-schemas List relocatable schemas list-keys List keys in a schema list-children List children of a schema list-recursively List keys and values, recursively range Queries the range of a key get Get the value of a key set Set the value of a key reset Reset the value of a key writable Check if a key is writable monitor Watch for changes

Use 'gsettings help COMMAND' to get detailed help.

$ gsettings list-schemasorg.gnome.nautilus.desktoporg.gnome.color-managerorg.gnome.gedit.plugins.filebrowser.nautilusorg.gnome.settings-daemon.peripherals.wacomorg.gnome.Empathy.hintsorg.gnome.settings-daemon.peripherals.touchpadorg.gnome.settings-daemon.plugins.keyboardorg.gnome.Nautilus.Sendtoorg.gnome.FileRoller.Dialogs.BatchAddorg.freedesktop.Telepathy.Loggerorg.gnome.yelp........org.gnome.gcalctoolorg.gnome.settings-daemon.peripherals.wacom.eraserorg.gnome.FileRoller.Generalorg.gnome.libgnomekbd.previeworg.gnome.gnome-system-logorg.gnome.libgnomekbd.keyboardorg.webkitgtk-1.0org.gnome.gedit.stateorg.gnome.system.proxyorg.gnome.gnome-system-monitor.disktreeneworg.gnome.eog.uiorg.gnome.gnome-screenshotorg.gnome.settings-daemon.pluginsorg.gnome.gedit.preferences.encodingsorg.gnome.Bluetooth.nstorg.gnome.desktop.lockdownorg.gnome.crypto.cacheorg.gnome.settings-daemon.peripherals.wacom.stylusorg.gnome.DejaDuporg.gnome.eog.pluginsorg.gnome.gnome-system-monitor.proctreeorg.gnome.eog.fullscreenorg.gnome.settings-daemon.plugins.housekeepingorg.gnome.FileRoller.Dialogs.Add

For p

erson

nal u

se on

ly


http://blog.fpmurphy.com/en.wikipedia.org/wiki/Gconf-editor


org.gnome.desktop.thumbnailersorg.gnome.Empathy.soundsorg.gnome.desktop.a11y.keyboard

$ gsettings list-schemas | grep shellorg.gnome.shellorg.gnome.shell.clockorg.gnome.shell.recorderorg.gnome.shell.calendar

$ gsettings list-keys org.gnome.shellcommand-historydevelopment-toolsdisabled-extensionsdisabled-open-search-providersenable-app-monitoringfavorite-appslooking-glass-history

As an example, here is how to enable the digital clock on the top panel to show the date andseconds:

$ gsettings list-keys org.gnome.shell.clockshow-dateshow-seconds

# note the failure if you are root!# gsettings set org.gnome.shell.clock show-date true**GLib-GIO:ERROR:gdbusconnection.c:2279:initable_init: assertion failed: (connection->initialization_error == NULL)Aborted (core dumped)

$ gsettings set org.gnome.shell.clock show-date true$ gsettings set org.gnome.shell.clock show-seconds true

Here is how to list all the settings for the GNOME Shell:

$ gsettings list-recursively org.gnome.shellorg.gnome.shell command-history ['r', 'lg', '?', 'ff', 'lg', 'js', '?', 're', 'r', 'command-history', 'ch', 'lg', 'lgh', 'b', 'r', 'd', 'ff', 'r', 'GSettings', 'GSetting', 'r', 'version', 'ver', 'v']org.gnome.shell development-tools trueorg.gnome.shell disabled-extensions @as []org.gnome.shell disabled-open-search-providers @as []org.gnome.shell enable-app-monitoring trueorg.gnome.shell favorite-apps ['gnome-terminal.desktop', 'mozilla-firefox.desktop', 'gnome-baobab.desktop', 'gimp.desktop', 'gnome-eog.desktop', 'gnome-screenshot.desktop']org.gnome.shell looking-glass-history @as []org.gnome.shell.calendar show-weekdate falseorg.gnome.shell.clock show-date trueorg.gnome.shell.clock show-seconds trueorg.gnome.shell.recorder file-extension 'webm'org.gnome.shell.recorder framerate 15org.gnome.shell.recorder pipeline ''

While the gsettings utility enables you to modify certain properties of the GNOME Shell, it doesnot enable you to really customize the current theme. Generally you will have to directly edit thetheme configuration files.

However, if you do not wish to directly edit configuration files, you may be able to customize what

For p

erson

nal u

se on

ly



you want to do using the Configuration Editor which is available under Applications, System Tools.

Another method is to use dconf-editor which you may need to load on your system as it is notinstalled by default. However, be warned, dconf and dconf-editor both seem to be highly unstableas of the date of this post. Worse still, absolutely no documentation or manpages are currentlyprovided for dconf or dconf-editor.

Alternatively, you can customize a small subset of the GNOME Shell using the new Tweak Tool (gnome-tweak-tool.)

Astute readers will notice that my version of gnome-tweak-tool is different than the default OOTB

For p

erson

nal u

se on

ly




tool. That is because I edited /usr/share/gnome-tweak-tool/shell.ui and changed a few propertysettings such as:

<property name="title" translatable="yes">GNOME Tweak Tool</property> <property name="resizable">True</property>

This utility, like many others, does not show up in the Application Overview. You have to use theSearchbar to access it.

Incidently, Tweak Tool can be used to add minimize and maximize buttons to windows. See theabove screenshot. Observe also the different theme and the dark colored titlebars. All will berevealed! Just keep reading.

As stated previously, the default GNOME Shell theme is Adwaita. You can modify this theme byediting /usr/share/themes/Adwaita/metacity-1/metacity-theme-3.xml. One of the more interestingsections of this configuration file is:

<frame_geometry name="normal" title_scale="medium" rounded_top_left="4" rounded_top_right="4"> <distance name="left_width" value="1" /> <distance name="right_width" value="1" /> <distance name="bottom_height" value="2" /> <distance name="left_titlebar_edge" value="0"/> <distance name="right_titlebar_edge" value="0"/> <distance name="title_vertical_pad" value="13"/> <border name="title_border" left="10" right="10" top="1" bottom="1"/> <border name="button_border" left="0" right="0" top="1" bottom="3"/> <aspect_ratio name="button" value="1"/></frame_geometry>

If you are already using the GNOME Shell, you probably have noticed that it is difficult to grab theframe of a window to stretch it. This is because the frame is only 1 pixel wide at the sides and 2pixels in height on the bottom. To make windows easier to grab, I suggest you change each ofthese values to 3, 3 and 5 respectively. If you want a less intrusive titlebar, I suggest you changethe value of title_vertical_pad to 8.

<distance name="left_width" value="3" /> <distance name="right_width" value="3" /> <distance name="bottom_height" value="5" /> <distance name="title_vertical_pad" value="8"/>

The other sections of this file that you may wish to customize are the color constants:

<constant name="C_border_focused" value="blend/#000000/gtk:bg[NORMAL]/0.6" /><constant name="C_border_unfocused" value="blend/#000000/gtk:bg[NORMAL]/0.8" /><constant name="C_border_attached_focused" value="blend/#000000/gtk:bg[NORMAL]/0.4" /><constant name="C_titlebar_focused_hilight" value="gtk:base[NORMAL]" /><constant name="C_titlebar_unfocused" value="blend/gtk:base[NORMAL]/gtk:bg[NORMAL]/0.4" /><constant name="C_title_focused" value="blend/gtk:fg[NORMAL]/gtk:bg[NORMAL]/0.1" /><constant name="C_title_focused_hilight" value="gtk:base[NORMAL]" /><constant name="C_title_unfocused" value="blend/gtk:text[NORMAL]/gtk:bg[NORMAL]/0.9" /><constant name="C_icons_focused" value="gtk:text[SELECTED]" /><constant name="C_icons_focused_pressed" value="#ffffff" /><constant name="C_icons_unfocused" value="blend/gtk:text[NORMAL]/gtk:bg[NORMAL]/0.9" />

For p

erson

nal u

se on

ly

<constant name="C_icons_unfocused_prelight" value="gtk:bg[NORMAL]" /><constant name="C_icons_unfocused_pressed" value="blend/#000000/gtk:bg[NORMAL]/0.7" /><constant name="D_icons_unfocused_offset" value="2" /> <constant name="D_icons_shrink" value="1" /> <constant name="D_icons_grow" value="0" /> 

If you make the following changes to metacity-theme-3.xml:

....<constant name="C_border_focused" value="#000064" /><constant name="C_border_unfocused" value="#0052FF" /><constant name="C_border_attached_focused" value="#000064" /><constant name="C_titlebar_focused_hilight" value="#000064" /><constant name="C_titlebar_unfocused" value="#0052FF" />....<draw_ops name="titlebar_fill_focused_alt"> <gradient type="vertical" x="0" y="0" width="width" height="height"> <color value="#6B6EAC"/> <color value="#000064"/> </gradient></draw_ops>....<draw_ops name="titlebar_fill_unfocused"> <gradient type="vertical" x="0" y="0" width="width" height="height"> <color value="#7096E3"/> <color value="#0052FF"/> </gradient></draw_ops>....

and reload the Shell, you will have colored window titlebars and frames:.

Currently, there is no built-in mechanism for changing GNOME Shell themes. I understand thatthis functionality is planned for inclusion in a future version of the GNOME Shell. However, it is

For p

erson

nal u

se on

ly


quite easy to change the theme if you are careful. As an example, I will walk you though the stepsto use the GNOME Shell Dark Glass theme designed by the English digital artist Sean Wilsontogether with the refFresh 11 wallpaper (background) by the artist Salman Arif.

The number of files in the new theme is surprisingly small:

$ lscalendar-arrow-left.svg scroll-button-down.pngcalendar-arrow-right.svg scroll-button-up-hover.pngcalendar-today.svg scroll-button-up.pngclose.svg section-more-open.svgclose-window.svg section-more.svgcorner-ripple.png separator-white.pngdash-placeholder.svg toggle-off-intl.svgfilter-selected.svg toggle-off-us.svggnome-shell.css toggle-on-intl.svghover-indicator.svg toggle-on-us.svgprocess-working.png ws-switch-arrow-down.svgrunning-indicator.svg ws-switch-arrow-up.svgscroll-button-down-hover.png

Download the theme and unzip it in a temporary directory. A subdirectory called theme will becreated and it will contain the above files. Back up the contents of the current GNOME Shelltheme directory /usr/share/gnome-shell/theme. Then copy the contents of the theme subdirectoryto /usr/share/gnome-shell/theme.

Download the wallpaper (reFresh_II_by_salmanarif.rar) and unpack it. You may have to install therar utility! It does not ship with Fedora but is available from RPM Fusion and elsewhere. There area number of different wallpaper files in the archive:

$ ls *.jpg1024x640.jpg 1280x1024.jpg 1280x960.jpg 1600x1200.jpg 1920x1080.jpg 2560x1600.jpg ZuneHD.jpg1024x768.jpg 1280x720.jpg 1366x768.jpg 1600x900.jpg 1920x1200.jpg 2560x1920.jpg1152x864.jpg 1280x800.jpg 1440x900.jpg 1680x1050.jpg 1920x1440.jpg iPhone.jpg

Each image is sized for a particular display geometry. Install the appropriate wallpaper file usingthe background tool which is available in the GNOME Shell Settings panel.

The new wallpaper is stored in ~/.cache/gnome-control-center/backgrounds:

$ gsettings list-recursively org.gnome.desktop.backgroundorg.gnome.desktop.background color-shading-type 'solid'org.gnome.desktop.background draw-background trueorg.gnome.desktop.background picture-filename '/home/fpm/.cache/gnome-control-center/backgrounds/6ccf207fc0f4eac6b1e5e9c9dbe93c93ffaea4c1059d6cf36219dbe7380e2d19'org.gnome.desktop.background picture-opacity 100org.gnome.desktop.background picture-options 'zoom'org.gnome.desktop.background primary-color '#0a0a19192c2c'org.gnome.desktop.background secondary-color '#351b74c1c77d'org.gnome.desktop.background show-desktop-icons false

For details of standard names and colors, see /usr/share/themes/Adwaita/gtk-3.0/gtk.css. You canoverwrite such names and colors using your own custom CSS file, i.e. ~/.config/gtk-3.0/gtk.css.

When you restart the GNOME Shell, you should see the following screen:

For p

erson

nal u

se on

ly


http://gnome-shell.deviantart.com/gallery/28081982#/d36szax

http://half-left.deviantart.com/

http://salmanarif.deviantart.com/art/reFresh-II-159998032

http://blog.fpmurphy.com/rpmfusion.org


This is what your Applications Overview should look like:

Note that the previous customizations to metacity-theme-3.xml are still in place:

For p

erson

nal u

se on

ly





This is actually a very nice theme and quite easy on the eyes. It has become my default theme fornow.

I particularly like how the search tool output is themed.

For p

erson

nal u

se on

ly





Turning now to the question of icon customization. To configure the layout of the application iconsin the GNOME Shell, you have to modify /usr/share/gnome-shell/theme/gnome-shell.css. Note thatthe contents of this file may vary as it is dependent on the particular theme that you are using. Inthe case of the Dark Glass theme, here are the modifications necessary to reduce the size andlayout of the displayed icons by 50% in Applications Overview.

.icon-grid { spacing: 18px; /* was 36px */ -shell-grid-item-size: 35px; /* was 70px */}.all-app .icon-grid { -shell-grid-item-size: 59px; /* was 118px */}.all-app .overview-icon { icon-size: 48px; /* was 96px */}

Here is what Applications Overview looks like when the GNOME Shell is restarted.For p

erson

nal u

se on

ly




By the way, with this theme, running applications are indicated by a light pane around theminstead a glow behind the application name. I will leave it as an exercise for you to reduce the sizeof the displayed application name.

What if I want the GNOME Shell to display a different icon for the GNOME Tweak Tool? There aretwo places you need to modify. The first is /usr/share/applications/gnome-tweak-tool.desktop:

[Desktop Entry]Name=Tweak Advanced SettingsIcon=preferences-systemExec=gnome-tweak-toolTerminal=falseType=ApplicationStartupNotify=trueCategories=GNOME;GTK;Settings;OnlyShowIn=GNOME;

I am going to change the Icon key-value pair to preferences-desktop-personal. You can see theavailable icons if you look in /usr/share/icons. Which icon file is actually selected depends on thecurrent icon theme and the icon lookup mechanism. Icon lookup is first done in the current theme,then recursively in each of the current theme’s parents and finally in the hicolor default theme. Assoon as an icon of any size is matched, the search stops. See the Icon Theme specification forfurther information.

I c o n i n f o r m a t i o n i s a l s o s t o r e d i n a p r o p e r t y n a m e d i c o n _ n a m e i n/usr / share /gnome- tweak- too l / she l l .u i . Th is a l so needs to be changed topreferences-desktop-personal. When you have modified these two files, you need to run

# desktop-file-validate /usr/share/applications/gnome-tweak-tool.desktop

Incidently if you change:

For p

erson

nal u

se on

ly



http://blog.fpmurphy.com/www.freedesktop.org/wike/Specifications/icon-theme-spec


Categories=GNOME;GTK;Settings;

to

Categories=GNOME;GTK;Utilities;

in /usr/share/applications/gnome-tweak-tool.desktop, the GNOME Tweak Tool will be displayed inthe Application Overview. By design, applications marked Settings are not displayed in theApplication Overview.

You can also add your own icon for an application to one of the icon themes under /usr/share/icons.If you do this, you need to update the icon cache using gtk-update-icon-cache before the icon isavailable for use. Here is a simple shell script which updates all the icon caches for you.

#!/bin/bashfind /usr/share/icons -maxdepth 1 -type d | \while read -r THEME; do if [[ -f "$THEME/index.theme" ]]; then echo "Updating $THEME cache" gtk-update-icon-cache -f -q "$THEME" fidone

Suppose you want to remove the Available and Busy menu options from the user menu (the menuunder your name.) Just edit /usr/share/gnome-shell/js/ui/statusMenu.js and comment out thefollowing lines in _createSubMenu:

item = new PopupMenu.PopupImageMenuItem(_("Available"), 'user-available'); item.connect('activate', Lang.bind(this, this._setPresenceStatus, GnomeSession.PresenceStatus.AVAILABLE)); this.menu.addMenuItem(item); this._presenceItems[GnomeSession.PresenceStatus.AVAILABLE] = item; item = new PopupMenu.PopupImageMenuItem(_("Busy"), 'user-busy'); item.connect('activate', Lang.bind(this, this._setPresenceStatus, GnomeSession.PresenceStatus.BUSY)); this.menu.addMenuItem(item); this._presenceItems[GnomeSession.PresenceStatus.BUSY] = item; item = new PopupMenu.PopupSeparatorMenuItem(); this.menu.addMenuItem(item);

and reload your GNOME Shell.

Turning to the issue of customizing fonts. The default font for GNOME 3 is Cantarell, a newcontemporary sans serif open font specially commissioned by GNOME. The current version ofCantarell does not cover all the supported languages in GNOME. This means that, depending onyour particular locale settings, you may fallback to another font.You can use Fontik to tweak and configure some font properties. Other ways of tweating fontsinclude dconf-editor and gsettings. The GNOME Tweak Tool also enables you to easily changesome font settings.

$ gsettings get org.gnome.desktop.interface font-name'Cantarell 11'

For p

erson

nal u

se on

ly


http://blog.fpmurphy.com/gitorious.org/fontik


$ gsettings set org.gnome.desktop.interface font-name "Canterell 12"$ gsettings set org.gnome.desktop.interface monospace-font-name "Monospace 12"$ gsettings set org.gnome.desktop.interface document-font-name "Sans 12"$ settings set org.gnome.desktop.interface text-scaling-factor "1.1"

Finally, you can no longer customize the screensaver in GNOME 3. When your screen is locked allyou get is a black screen with the clock, a lock symbol and your name at the top of the screen.There are plans to remove gnome-screensaver in GNOME 3.2 and putting its functionality partiallyin the GNOME Shell and the remainder in gnome-session or gnome-settings-daemon. It may thenbe possible to write a themed Clutter-based screensaver extension for GNOME Shell.

Well, it is time to wrap up this post. Obviously there is a lot more to the subject of customizing thenew GNOME Shell but I have tried to cover the basics. Unfortunately, at present, there is a dearthof good accurate information on the underpinnings of the GNOME Shell out there on the Internetso I cannot point you to any reference material on the subject. Hopefully the GNOME developerswill provide complete documentation in the future.

For p

erson

nal u

se on

ly


customizing the gnome 3 shell

Documents