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.

Adwaita theme - bad spacing

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

HighContrastInverse theme - good spacing

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


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)

| improve this answer | |
  • MY HERO. Thank you for the tip. – NiKo Mar 27 '19 at 17:46
  • you are the best – Alexey Aug 3 '19 at 11:38

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)

| improve this answer | |
  • 1
    Although this seems to work for Gnome Shell, it does not work when using the Classic mode (the mode I'm using). – Totor Nov 30 '13 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.