How can I reduce the space between icons on wingpanel?

Question

It is possible to remove this wasted space?

Answer 1

I will say "you can't" because it's very difficult and useless, what makes that space in Wingpanel isn't in any config file of the system, actually this kind of stuff is compiled from source code.

If you want to try the hard method,

• You will never be able to upgrade your system anymore (because it will erase your changes).
• You must know Vala very well and look for that line of code here.

Then you must compile the new source file, for finally add it to your system.

Good luck, I think is more easy to teach some UI lessons to the Elementary OS team. Or just hoping that they admit your line of code in Github.

Answer 2

I was able to adjust mine. Not sure if an update will affect it but now that i know where it is at i can reset it back to my liking should an update change it.

First, open files as an administrator. Do this by right clicking files and selecting open as administrator. Then you will have to select the root file system folder on the left hand side. from there, here is the path to the file you will change.

usr/share/themes/elementary/gt-k3.0

The file you are going to change is named apps.css. I opened it with code by right clicking and selecting code from the "open with" selection.

NOTE: If there are lock symbols on the files and folders than you are not in as an administrator. You will not to be able to save your changes unless you are an administrator.

Once into the file, scroll most of the way down until you see:

composited-indicator {
    padding: 0 6px;
}

.composited-indicator > revealer label,
.composited-indicator > revealer image,
.composited-indicator > revealer spinner {

the line that says:

padding 0 6px;

Is the one that you will modify. Change the 6 to a 2. It should then look like:

composited-indicator {
    padding: 0 2px;
}

.composited-indicator > revealer label,
.composited-indicator > revealer image,
.composited-indicator > revealer spinner {

Once done exit and restart your system.

Update: This answer is not my own, i had found this work around previously here on the site but haven't relocated it in order to provide a link and kudos back to the original poster. if someone does find it please feel free to post link.

Update 2.0: link to original answer, How do I decrease the gap between icons in the status tray?

Answer 3

This method taken from this comment on Github worked for me on 5.1 Hera:

1. Create a ~/.config/gtk-3.0/gtk.css file
2. Insert the below contents

/* source: https://github.com/mdh34/elementary-indicators/issues/1 */
.composited-indicator {
    padding: 0 2px;
}

3. Reboot your system

The other methods above didn't work for me in Hera, as .composited-indicator no longer exists within /usr/share/themes/elementary/gtk-3.0/apps.css. This is probably a better method anyway, because ~/.config user config, and so is less likely to be reverted when Wingpanel or the theme is updated in the future.

Answer 4

Is there a way to do this on 5.1 Hera? If I go to /usr/share/themes/elementary/gtk-3.0/ and edit apps.css, there is no line containing

composited-indicator {
    padding: 0 6px;
}

Answer 5

marcussacana solution from https://github.com/mdh34/elementary-indicators/issues/1

Okay, I tried the community fork, and builded by myself, here is the git, and if you don't want build:

1. Install the wingpanel indicator .deb here (the same deb in the link of this git)

2. Download libayatana_compatibility.so.zip

3. Go To (with sudo) /usr/lib/x86_64-linux-gnu/wingpanel/

   cd /usr/lib/x86_64-linux-gnu/wingpanel/

4. Backup your libayatana_compatibility.so

   sudo cp libayatana_compatibility.so libayatana_compatibility.so.copy

5. Replace the libayatana_compatibility.so with the zipped one

   cd ~ cd Downloads sudo apt install unzip unzip libayatana_compatibility.so.zip sudo cp libayatana_compatibility.so /usr/lib/x86_64-linux-gnu/wingpanel/

6. Reboot