Translate

Archives

Customizing the GNOME Shell

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

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

GNOME3 Shell screenshot

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

Here is what the Applications Overview looks like:

GNOME3 Shell screenshot

Here is what a GNOME terminal window looks like:

GNOME3 Shell screenshot

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

GNOME 3 contains some major changes with respect to persistent application settings data. The GConf 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 to lowercase characters, numbers and dashes (). Names must begin with a character, must be 32 characters or less in length, must not end with a dash and must not contain consecutive dashes. 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-schemas manpage for further information.

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

$ gsettings
Usage:
  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-schemas
org.gnome.nautilus.desktop
org.gnome.color-manager
org.gnome.gedit.plugins.filebrowser.nautilus
org.gnome.settings-daemon.peripherals.wacom
org.gnome.Empathy.hints
org.gnome.settings-daemon.peripherals.touchpad
org.gnome.settings-daemon.plugins.keyboard
org.gnome.Nautilus.Sendto
org.gnome.FileRoller.Dialogs.BatchAdd
org.freedesktop.Telepathy.Logger
org.gnome.yelp
....
....
org.gnome.gcalctool
org.gnome.settings-daemon.peripherals.wacom.eraser
org.gnome.FileRoller.General
org.gnome.libgnomekbd.preview
org.gnome.gnome-system-log
org.gnome.libgnomekbd.keyboard
org.webkitgtk-1.0
org.gnome.gedit.state
org.gnome.system.proxy
org.gnome.gnome-system-monitor.disktreenew
org.gnome.eog.ui
org.gnome.gnome-screenshot
org.gnome.settings-daemon.plugins
org.gnome.gedit.preferences.encodings
org.gnome.Bluetooth.nst
org.gnome.desktop.lockdown
org.gnome.crypto.cache
org.gnome.settings-daemon.peripherals.wacom.stylus
org.gnome.DejaDup
org.gnome.eog.plugins
org.gnome.gnome-system-monitor.proctree
org.gnome.eog.fullscreen
org.gnome.settings-daemon.plugins.housekeeping
org.gnome.FileRoller.Dialogs.Add
org.gnome.desktop.thumbnailers
org.gnome.Empathy.sounds
org.gnome.desktop.a11y.keyboard

$ gsettings list-schemas | grep shell
org.gnome.shell
org.gnome.shell.clock
org.gnome.shell.recorder
org.gnome.shell.calendar

$ gsettings list-keys org.gnome.shell
command-history
development-tools
disabled-extensions
disabled-open-search-providers
enable-app-monitoring
favorite-apps
looking-glass-history


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

$ gsettings list-keys org.gnome.shell.clock
show-date
show-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.shell
org.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 true
org.gnome.shell disabled-extensions @as []
org.gnome.shell disabled-open-search-providers @as []
org.gnome.shell enable-app-monitoring true
org.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 false
org.gnome.shell.clock show-date true
org.gnome.shell.clock show-seconds true
org.gnome.shell.recorder file-extension 'webm'
org.gnome.shell.recorder framerate 15
org.gnome.shell.recorder pipeline ''


While the gsettings utility enables you to modify certain properties of the GNOME Shell, it does not enable you to really customize the current theme. So do not throw away gconftool-2 just yet! There are a whole range of settings that gsettings does not have access to. For instance you can add back the window minimize and maximize buttoms as follows:

gconftool-2 --set /desktop/gnome/shell/windows/buttom_layout --type string :minimize,maximize,close


You will have to log out and log back in for the change to take place. Alternatively you can use the Configuration Editor (gconf-editor) which, if installed, is available under Applications, System Tools.

GNOME3 Shell screenshot

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

Alternatively, you can customize a small subset of the GNOME Shell using the new Tweak Tool (gnome-tweak-tool.)
GNOME3 Shell screenshot
Astute readers will notice that my version of gnome-tweak-tool is different than the default OOTB tool. That is because I edited /usr/share/gnome-tweak-tool/shell.ui and changed a few property settings 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 the Searchbar to access it.

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

As stated previously, the default GNOME Shell theme is Adwaita. You can modify this theme by editing /usr/share/themes/Adwaita/metacity-1/metacity-theme-3.xml. One of the more interesting sections 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 the frame of a window to stretch it. This is because the frame is only 1 pixel wide at the sides and 2 pixels in height on the bottom. To make windows easier to grab, I suggest you change each of these values to 3, 3 and 5 respectively. If you want a less intrusive titlebar, I suggest you change the 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:

<!-- meaningfull 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" />

<!-- color of the button icons -->
<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" />
<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" /> <!-- offset of the unfocused icons -->
<constant name="D_icons_shrink" value="1" /> <!-- increasing this value makes the icons in buttons smaller -->
<constant name="D_icons_grow" value="0" /> <!-- increasing this value makes the icons in buttons bigger -->

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:.

GNOME3 Shell screenshot

Notice the icons on the top right hand corner of your screen. These are know as status icons and are displayed by a number of utilities that provide some sort of status including a11y, display, keyboard, volume, bluetooth, network, battery’. The icons are known as SYMBOLIC icons. If you want to display color icons instead of symbolic icons, edit panelMenu.js and change SYMBOLIC to FULLCOLOR on the highlighted line shown below:

SystemStatusButton.prototype = {
    __proto__: Button.prototype,

    _init: function(iconName,tooltipText) {
        Button.prototype._init.call(this, 0.0);
        this._iconActor = new St.Icon({ icon_name: iconName,
                                        icon_type: St.IconType.SYMBOLIC,
                                        style_class: 'system-status-icon' });
        this.actor.set_child(this._iconActor);
        this.setTooltip(tooltipText);
    },

Currently, there is no built-in mechanism for changing GNOME Shell themes. I understand that this functionality is planned for inclusion in a future version of the GNOME Shell. However, it is quite easy to change the theme if you are careful. As an example, I will walk you though the steps to use the GNOME Shell Dark Glass theme designed by the English digital artist Sean Wilson together with the refFresh 11 wallpaper (background) by the artist Salman Arif.

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

$ ls
calendar-arrow-left.svg       scroll-button-down.png
calendar-arrow-right.svg      scroll-button-up-hover.png
calendar-today.svg            scroll-button-up.png
close.svg                     section-more-open.svg
close-window.svg              section-more.svg
corner-ripple.png             separator-white.png
dash-placeholder.svg          toggle-off-intl.svg
filter-selected.svg           toggle-off-us.svg
gnome-shell.css               toggle-on-intl.svg
hover-indicator.svg           toggle-on-us.svg
process-working.png           ws-switch-arrow-down.svg
running-indicator.svg         ws-switch-arrow-up.svg
scroll-button-down-hover.png


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

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

$ ls *.jpg
1024x640.jpg  1280x1024.jpg  1280x960.jpg  1600x1200.jpg  1920x1080.jpg  2560x1600.jpg  ZuneHD.jpg
1024x768.jpg  1280x720.jpg   1366x768.jpg  1600x900.jpg   1920x1200.jpg  2560x1920.jpg
1152x864.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 using the 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.background
org.gnome.desktop.background color-shading-type 'solid'
org.gnome.desktop.background draw-background true
org.gnome.desktop.background picture-filename '/home/fpm/.cache/gnome-control-center/backgrounds/6ccf207fc0f4eac6b1e5e9c9dbe93c93ffaea4c1059d6cf36219dbe7380e2d19'
org.gnome.desktop.background picture-opacity 100
org.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 can overwrite 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:
GNOME3 Shell screenshot

This is what your Applications Overview should look like:
GNOME3 Shell screenshot

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

This is actually a very nice theme and quite easy on the eyes. It has become my default theme for now.
GNOME3 Shell screenshot

I particularly like how the search tool output is themed.
GNOME3 Shell screenshot

By the way, as stated earlier, Alt-F2 r (or Alt-F2 restart) reloads (restarts) the GNOME Shell. If you just want to load a new GNOME Shell theme, it is faster to use Alt-F2 rl. This only calls the JavaScript function that reloads the shell theme.

Turning now to the question of icon customization. To configure the layout of the application icons in the GNOME Shell, you have to modify /usr/share/gnome-shell/theme/gnome-shell.css. Note that the contents of this file may vary as it is dependent on the particular theme that you are using. In the case of the Dark Glass theme, here are the modifications necessary to reduce the size and layout 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.
GNOME3 Shell screenshot
By the way, with this theme, running applications are indicated by a light pane around them instead a glow behind the application name. I will leave it as an exercise for you to reduce the size of the displayed application name.

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

[Desktop Entry]
Name=Tweak Advanced Settings
Icon=preferences-system
Exec=gnome-tweak-tool
Terminal=false
Type=Application
StartupNotify=true
Categories=GNOME;GTK;Settings;
OnlyShowIn=GNOME;


I am going to change the Icon key-value pair to preferences-desktop-personal. You can see the available icons if you look in /usr/share/icons. Which icon file is actually selected depends on the current 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. As soon as an icon of any size is matched, the search stops. See the Icon Theme specification for further information.

Icon information is also stored in a property named icon_name in /usr/share/gnome-tweak-tool/shell.ui. This also needs to be changed to preferences-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:

Categories=GNOME;GTK;Settings;


to

Categories=GNOME;GTK;Utilities;


in /usr/share/applications/gnome-tweak-tool.desktop, the GNOME Tweak Tool will be displayed in the Application Overview. By design, applications marked Settings are not displayed in the Application 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 is available for use. Here is a simple shell script which updates all the icon caches for you.

#!/bin/bash

find /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"
   fi
done


Suppose you want to remove the Available and Busy menu options from the user menu (the menu under your name.) Just edit /usr/share/gnome-shell/js/ui/statusMenu.js and comment out the following 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 new contemporary sans serif open font specially commissioned by GNOME. The current version of Cantarell does not cover all the supported languages in GNOME. This means that, depending on your particular locale settings, you may fallback to another font.
You can use Fontik to tweak and configure some font properties. Other ways of tweating fonts include dconf-editor and gsettings. The GNOME Tweak Tool also enables you to easily change some font settings.

$ gsettings get org.gnome.desktop.interface font-name
'Cantarell 11'
$ 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 all you 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 partially in the GNOME Shell and the remainder in gnome-session or gnome-settings-daemon. It may then be possible to write a themed Clutter-based screensaver extension for GNOME Shell.

You probably have noticed that the GNOME Shell supports window tiling. By this, I mean that you can tile a window by dragging it to either the left or right edges of the screen. Typically nearly half the window must go over the edge before a light blue rectangle outlining the tile appears. If you release the window at that time, the window will be automatically tiled to match the outline. If you dislike this feature, you can turn it off using gconf-editor. Set desktop->gnome->shell->windows->edge_tiling to FALSE.

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

P.S. If you have found this post via an Internet search, you might be interested to know that I have written a number of other posts in this blog about configuring and extending the GNOME 3 Shell. Also you can download all my GNOME Shell extensions from the GNOME Shell Extensions area of my website.

95 comments to Customizing the GNOME Shell

  • Sriram Ramkrishna

    Great blog post! Would you be interested in writing something for GNOME Journal perhaps?

  • Brilliant. Just installed Fedora 15 Alpha and this is *the* best article I’ve read on Gnome 3. Many thanks.

  • By the way, “Suppose you want to remove the Available and Busy menu options…”, doesn’t work for me. Meant I couldn’t login.

  • […] Gnome 3 kann man auch auf viele Arten mit dem Tool gsettings (hieß früher gconftool-2) weiter anpassen. Ein sehr Interessanter Artikel dazu findet sich hier: http://blog.fpmurphy.com/2011/03/customizing-the-gnome-3-shell.html […]

  • Onyeibo

    Thanks a million.

  • Onyeibo

    You used hex colour notation directly as in:

    It’ll be illuminating to decode the notation used by Metacity Theme Artists as in:

    What is really going on here?: “blend/#000000/gtk:bg[NORMAL]/0.6”. I’m guessing it means:
    blend the Normal GTK Background with the Colour #000000 by 0.6 units. If that is correct, then the only puzzle is gtk:bg[NORMAL].
    Because gtk:bg[NORMAL] must have been defined somewhere before being referenced. What constitutes a *NORMAL* background

  • esturiano

    Thanx! So great review!

  • W. MacKenzie

    Can you post the location of the desktop wallpaper listed at the top?

    thx.

  • W. MacKenzie

    danka!

  • […] in desktop entry for the application in /usr/share/applications/ See three quarters way down this customizing-the-gnome-3-shell.html for full details about how to change an applications […]

  • […] conocer estos ‘tips’, y otros aquí. Para mas información y su descarga: […]

  • dowel

    Perfect! Thank you very much!

  • pankaj

    Thanks a LOT for the article. It has been so useful. It seems given more time, gnome-shell will easily be more customizable than gnome2 ever was.
    One thing which still bugs me is the large toolbar sizes. Is there some way to fix it too

  • pankaj

    Well answering my own query, i fixed the toolbar size by editing /usr/share/themes/Adwaita/gtk-3.0/gtk-widgets.css and setting the toolbar paddings to 0 at two places in the file

  • How did you add that extra search there (Super User… near Google and Wikipedia)? I really want to add wolfram alpha there as well?

  • Raul

    I’ve a question about the size of the Favorite and applicacions active icons, how can I resize them? I haven’t found a way in the gnome-shell.css file.

    Thanks in advance,

    Raul

  • Gaurav

    Thanks a lot for this wonderful post. I have a question. In the default extension, the text is displayed above all windows. What should i do if i wanted to put that on the “desktop”, i.e. below all windows. I tried putting z-index:0 in the stylesheet but it wont work. Maybe requires some js function or something..
    Thanks in advance.. :)

  • Aventinus

    Well done for the excellent post! I’ve been testing these modification on Arch Linux and work like a charm. I have a question though!

    I want to make the Power Off button to be the first option and the Suspend as an alternative. In the /usr/share/gnome-shell/js/ui/statusMenu.js if I make:

    item = new PopupMenu.PopupAlternatingMenuItem(_(“Suspend”),
    _(“Power Off…”));

    to look like this:

    item = new PopupMenu.PopupAlternatingMenuItem(_(“Power Off…”),
    _(“Suspend”));

    will it work? I’m afraid of making the change without comfirming it first.

    Thanks in advance!

  • Mike

    This is an excellent post; following your instructions, I have been able to make gnome-shell much more usable for me!
    I do have a question, hopefully you can resolve it as nothing I have done has produced consistent results.
    When you add a search provider, it becomes the first/default provider (For you, SuperUser, I added Reddit.) I want google to be my default. Through a bunch of manipulation, I was able to make Reddit last instead of first, then I changed it back to the original file name and it remained in position. When I add a new provider, it is not always first, but sometimes/most frequently is. I have added providers with names at opposite ends of the alphabet, and changed values around, but still it didn’t act as expected. I have touched files, to see if timestamp determines order. Still no luck…I’m playing with it still, but I wondered if you had figured this out.

  • KM

    I would like to follow Raul question. Has anyone know how to change “Favorite” icon size? I’ve searched through the css file however without luck.

  • KM

    Ok, after some more digging I found a way to make favorites icon smaller.

    The favorites (dash) icon size is adjusted to number of elements present. In file /usr/share/gnome-shell/js/ui you can find array called iconSizes. I have just removed the two largest values (64 and 48) so the largest icon size now is going to be 32 which suits me much better on my small screen. Another place to change is a Dash.prototype and this.iconSize member (which is set to 64 by default, I have changed this to 32 also).

  • Raul

    Thank you KM! It works perfectly!

  • Jason

    Wonderful post for my purposes. Thanks!

  • mib

    pretty good, thanks. Could you tell where to looking or learning more about js in gnome? I try to find on gnome.org, but i can’t find it.

  • John Schroeder

    I tried your tweaks to /usr/share/themes/Adwaita/metacity-1/metacity-theme-3.xml. I tried to reduce the size of the title bar and extend the window borders. I can see the changes have been made in the .xml, however restarting the shell has no effect. What am I missing?

    • @John. Without seeing your changes, it is hard to figure out what the problem is. Try the example I provided EXACTLY as I provided it and see if that works.

  • Teixeira

    How did you set the top bar bigger?

    • Edit the height element in the following section of gnome-shell.css

      #panel {
      color: #ffffff;
      background-color: black;
      border-image: url("panel-border.svg") 1;
      font-size: 10.5pt;
      height: 1.86em;
      }

      • teixeira

        Thanks a lot

      • teixeira

        I’m editing /usr/share/themes/Adwaita/metacity-1/metacity-theme-3.xml, trying to remove the metacity bar when maximized.

        I’m using has_title=”false” on max but it didn’t make any difference

  • Hubert Samm

    poor man’s way to do dynamic wallpaper changes with gnome3:

    save the following shell script somewhere:

    ——————- start of script ————————————–
    #!/bin/bash
    cd /home/sammhe/WALLPAPER
    while [ 1 ]
    do
    set — *
    length=$#
    random_num=$(( $RANDOM % ($length + 1) ))
    gsettings set org.gnome.desktop.background picture-uri “file:/home/sammhe/WALLPAPER/${!random_num}”
    sleep 600
    done
    ——————————– end of script ———————————————-

    then in your home directory
    in .config/autostart

    put the following into a file called wallpaper-changer.desktop

    [Desktop Entry]
    Name=wallpaper-changer
    Exec=/home/sammhe/bin/setbg.sh
    Comment=change wallpaper every so often
    Hidden=false
    Type=Application
    X-GNOME-Autostart-enabled=true

    This will change your wallpaper every 10 minutes… or whatever value you set in the script….

  • Andrew McLaren

    Go raibh mile maith agat, Finn! A very useful post!

    Cheers from Sydney Australia.

  • Perfect!!! Thanks. You Extensions are also well received. Thanks.

  • Also if you want to change desktops with the latest image from BING:
    use this basic bash script… (Sorry for the bad programming skillz, no sleep…)

    #!/bin/bash
    cd /home/dngoins/WALLPAPER

    monthlyImagesToPullFrom=30
    currentImageNumber=0

    for i in 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
    do
    set — *

    currentBingImage=$(curl “http://www.bing.com/HPImageArchive.aspx?format=xml&idx=”${i}”&n=1” |grep “.*” |sed -e “s/^.*<url/”| cut -f1 -d”<")
    currentCopyright=$(curl "http://www.bing.com/HPImageArchive.aspx?format=xml&idx="${i}"&n=1" |grep ".*” |sed -e “s/^.*<copyright/”|cut -f1 -d” /home/dngoins/Desktop/InfoAboutBackground
    #echo $currentBingImage
    bingUrl=”http://www.bing.com”
    image=${bingUrl}${currentBingImage}
    echo $image
    curl $image -o bingImage.jpg
    gsettings set org.gnome.desktop.background picture-uri “file:///home/dngoins/WALLPAPER/bingImage.jpg”
    sleep 300
    done

  • Hubert Samm

    Does anyone know of a way to change the default behaviour of dash so that a single click on an icon in favourites will open a new instance of the program, rather than have to right click, and choose “New Window”?

    Thanks

    • Peter

      To open a new window you press ctrl + left click and it opens a new window

  • Mike

    Which setting controls Nautilus’ background (i.e. color behind the folder icons)?
    I have played with several themes, but this always stays the same off-white color.

    Also, using the Gnome Tweak Tool, the only themes I can get to show up are Metacity ones, are there any other required engines or packages to allow GTK 2 or 3 themes to show?

    Thank you

  • Hubert Samm

    Thanks Peter for you reply, but that’s still inconvenient…. I’m looking for a setting to change so that all I have to do it single click my icon in dash, and instead of it bringing up an existing running instance, I want a new instance to start….

  • Hubert Samm

    OK…. well I did at least find a work around….. 1) allow file manager to manage the desktop 2) create launch icons to launch my favourite applications… At least there 1) I can single click on the icon get get an application launched… 2) when I do single click on the icon, a new window (2nd instance) of the application starts up….

  • Hubert Samm

    Not the most elegant solution, but one that does work….

  • yoli

    Hola a tod@s gran post.
    Como puedo poner el panel de favoritos transparente?
    Muchas gracias de antemano y un saludo a todo el foro

  • Bruno

    Hi, I see that your titlebar fonts are White, mine are a dark grey. Where can I change that?

    • @Bruno. You do not say what theme you are using but I suspect that it is not Adwaita as Adwaita uses offwhite titlebars by default.

      To change the titlebar colors in your particular theme, you need to edit the themes …/metacity-1/metacity-theme-3.xml. The particular elements that you need to cutomize are the draw_ops that deal with the titlebar.

      For instance, suppose you have the following draw_op

      <draw_ops name=”titlebar_fill_focused”>
      <gradient type=”vertical” x=”0″ y=”0″ width=”width” height=”top_height”>
      <color value=”#5c5b56″ />
      <color value=”#3c3b37″ />
      <color value=”#3c3b37″ />
      </gradient>
      </draw_ops>

      which displays a dark grey titlebar when focused.

      You could change it to:

      <draw_ops name=”titlebar_fill_focused”>
      <gradient type=”vertical” x=”0″ y=”0″ width=”width” height=”height”>
      <color value=”blend/gtk:bg[NORMAL]/gtk:base[NORMAL]/0.4″ />
      <color value=”gtk:bg[NORMAL]”/>
      <color value=”blend/gtk:bg[NORMAL]/#000000/0.03″ />
      <color value=”blend/gtk:bg[NORMAL]/#000000/0.06″ />
      </gradient>
      </draw_ops>

      to display an offwhite titlebar when focused.

      • Bruno

        Hi fpmurphy,

        My titlebars are from Adwaita, I already configured the titlebar colors. I want to change the title bar font color. Like where you read “fpm:ultra:~” on your terminal window for example. Mine are a dark gray.

        Thanks a lot for this article!

        Regards

        • Bruno

          Hi I found the solution to my problem. I had to chance C_title_focused. That controls the title bar font color. Also i didn’t like the font highlight, so in order to remove it I just commented out the following lines that draws the highlight

          <!– <title version="
          <title version="
          = 3.1″
          x=”(0 `max` ((frame_x_center – title_width / 2) `min` (width – title_width))) + 3″
          y=”(0 `max` ((height – title_height) / 2)) + 2″
          ellipsize_width=”width”
          color=”C_title_focused_hilight” />
          –>
          = 3.1″
          x=”(0 `max` ((frame_x_center – title_width / 2) `min` (width – title_width))) + 2″
          y=”(0 `max` ((height – title_height) / 2)) + 1″
          ellipsize_width=”width”
          color=”C_title_focused” />

          Hope this information help others!

  • Andrew Jones

    Great work fpmurphy, have been following a few of your articles and have got Gnome almost how I want it.

    Just one question I can’t seem to find an answer too: How can I add a system monitor applet (or panel app as I believe they are now called) to the top panel? And do you now of any repositories for such panel apps?

    Keep up with the articles, I’m learning quite a bit about Gnome along the way.

  • teixeira

    Hi Folks:
    Did anyone find any way to make tray icon, on notification bar, be bigger??? I can put the bottom bar( Notification bar bigger) but not the icons

  • Saurav Sengupta

    Hi,

    Found your article very interesting and informative. Can you let me know how to cause newly opened windows to appear in the centre of the desktop by default in GNOME 3? I’m using Fedora 15. I searched a lot for this on the Net but found nothing. I also posted this query on the Fedora Forums a month ago but have got no response. It’ll be great if you can help with this. (I actually found your article while searching the Net for this centring issue.)

    Thanks and regards,
    Saurav

  • Hi! I’ve read your work on gnome shell, great job!!!

    I’m using F15 and i love the whole default install. Except for the color scheme. I basically want a grayscale color scheme. I’m not very good with linux as I’m quite new, is there an easy way to do this like using a .css stylesheet from another grayscale theme if there is any?

    • @Chrysant. It is certainly possible to do but it is not something that I can explain to you in a few sentences. I will be posting an article on how to make your own custom theme for the GNOME Shell soon. Meanwhile I suggest you have a look at the GNOME Shell section of DeviantArt (http://www.deviantart.com/). You might find something there that suits your needs.

  • glen

    i have added your “iconplacesbookmarks-1.0.tar.gz” extension, but it appears right next to the clock as shown in your screenshot. how can i move it to right corner of my panel? it looks awkward sitting next to the clock at the center of the panel. also, can you include a system monitor like the one shown here:

    http://www.webupd8.org/2011/05/system-monitor-extension-puts-ram-swap.html

    (the one shown here is for fedora and not ubuntu. My os is ubuntu 11.04). thanks in advance :-)

    • You need to modify the PlacesButton prototype in extension.js. Currently this extension adds the menu to the the panel’s _centerBox but you want it on the RHS of your screen but you did not tell me exactly where on the RHS.

      If you want it before the status tray you need to change:
      Main.panel._centerBox.add(this.actor, { y_fill: true });
      to:
      Main.panel._rightBox.insert_actor(this.actor, 1);

      If you want it after the status tray but before the status menu, you need to change:
      Main.panel._centerBox.add(this.actor, { y_fill: true });
      to:
      Main.panel._rightBox.insert_actor(this.actor, 2);

      f you want it after everything including the status menu, you need to change:
      Main.panel._centerBox.add(this.actor, { y_fill: true });
      to:
      Main.panel._rightBox.add(this.actor, { y_fill: true });

      I have updated this extension to include all these options.

      Hope this helps you.

      • glen

        thank you. it worked. and will you consider my request for a system monitor (in my previous post)?

  • I have just installed Gnome 3 on Linux Mint 11 and I must admit I love it. My only problem so far is that the icons on the bottom panel are all the same. Currently Clipit, Mint Update, Dropbox and Synapse all use the wifi icon instead of there own individual icons. Is there any way I can get my icons back without reinstalling all apps? Any advice would be appreciated.

    • I’ve run into this same issue. It’s been there forever, and I can’t tell if it’s a bug in the theme I’m using, or if this is something that is native to Gnome 3.

  • very helpful!! Nice post!!

  • Gavin Engel

    Thank you for this incredible post. I have a follow-up question. Is it possible to have the menus and the titlebar share the same horizontal space? Here is a mockup made by a Ubuntu Unity user (not Gnome Shell, I know, but the idea is sound):
    http://lh3.googleusercontent.com/_1QSDkzYY2vc/TV1ykj9zUgI/AAAAAAAADA4/wb3dfkvSVOg/gedit_menu.png

    I found that picture on this discussion: http://www.webupd8.org/2011/02/unity-mockup-menu-integrated-in-window.html

  • gavin

    Has anyone figured out hwo to combine the menus and the titlebar onto the same horizontal space, like this?
    http://www.webupd8.org/2011/02/unity-mockup-menu-integrated-in-window.html

  • Jonathan

    Hi. Do you know how show application icons when changing windows in gnome shell?

    Thanks.

  • Faizal Luthfi

    Nice tutorial. Anybody know how to change the window preview in alt+tab? The window preview looks too small in my netbook even the window is maximized. Resizing the window to the bigger size than maximized sometimes makes the preview look bigger according to the ratio of the window width and height. Any solution please?