Change (reduce) Gnome 3 horizontal icon padding in notification area (Debian Wheezy)

Question

I'm using Gnome 3.4 classic mode on Debian Wheezy.

In the notification area, I would like to know how to change (reduce) the horizontal spacing (or padding) of the icons.

By default, the icons are very far from each other, so I'm wasting much space on this bar.

I'm using the default theme "Adwaita", but please note that when I change this to the "HighContrast" (or "HighContrastInverse") theme, the icons get close to each other, which is what I want to achieve (but on the default theme):

I have been searching on the web and modifying a few .css files without success...

Solution 1

In Ubuntu 18.04 (Gnome 3), the stylesheet is named /usr/share/gnome-shell/theme/ubuntu.css.

As jpoppe wrote, .panel-button > natural-hpadding must be adjusted. If the space is still too big for your taste, also reduce minimum-hpadding:

.panel-button {
    -natural-hpadding: 12px;  /* change HERE */
    -minimum-hpadding: 6px;   /* and here */
    font-weight: bold;
    color: #eee;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
    transition-duration: 100ms;
}

If you don't want to restart, you can also only reload the theme via

gdbus call --session --dest org.gnome.Shell --object-path /org/gnome/Shell --method org.gnome.Shell.Eval 'Main.loadTheme();'

---

Edit: In Ubuntu 20.04, the stylesheet is packed in /usr/share/gnome-shell/gdm3-theme.gresource.

List files

gresource list /usr/share/gnome-shell/gdm3-theme.gresource

Extract file

gresource extract /usr/share/gnome-shell/gdm3-theme.gresource /org/gnome/shell/theme/gdm3.css > gdm3.css

While it is possible to change the file and recompile it back into the gresource file, it is better to create a child theme instead.

1. Create folder: mkdir -p ~/.themes/NAME/gnome-shell

2. Create manifest theme.json (optional):

   {
     "shell-theme": {
       "name": "NAME",
       "author": "AUTHOR",
       "version": "0.0",
       "type":   "custom",
       "url": "URL"
      }
   }
   

3. Create style gnome-shell.css:

   #panel {
       font-size: 0.9em;
   }
   
   .panel-button {
       -natural-hpadding: 4px;
       -minimum-hpadding: 2px;
   }
   

   It should include the default CSS automatically. If this doesn't work, try to add one of the following lines to the beginning:

   @import url("resource:///org/gnome/shell/theme/gdm3.css");
   @import url("/usr/share/gnome-shell/theme/gdm3.css");
   

4. Select theme NAME with gnome-tweak-tool (Tweaks > Appearance > Shell)

Solution 2

Find the "natural-hpadding" line in (/usr/share/gnome-shell/theme/gnome-shell.css) and replace 12 px with the value you like:

.panel-button {
    -natural-hpadding: 5px;
    -minimum-hpadding: 6px;
    font-weight: bold;
    color: #ccc;
    transition-duration: 100ms;
}

For more information and tips see: http://forums.linuxmint.com/viewtopic.php?f=42&t=86813 (section 2g)

Comments

[Totor]

Although this seems to work for Gnome Shell, it does not work when using the Classic mode (the mode I'm using).

[NiKo]

MY HERO. Thank you for the tip.

[Alexey]

you are the best