Big gap between icons

[junocomp]

I've been trying to find a solution to this for a while but I can't seem to find one.

In Loki the icons are well spaced

In Juno, the legacy icons have a big gap in between icons.

Does anyone know how to fix it?

[icex]

Hi,

Try setting the padding to '0 2px' in your theme -> apps.css

In my case I use https://github.com/surajmandalcell/elementary-x :
/usr/share/themes/elementary-x/gtk-3.22/apps.css

.composited-indicator {
    padding: 0 2px;
}

Then set your theme to something else and then back again to make sure the changes are refreshed(or restart/log out)

[junocomp]

@icex You are a genius, thank you!

[junocomp]

@icex is there a way to add the apps.css to ~./themes? I am afraid that every update elementary-themes gets will break go back to the default settings.

[icex]

I think you can copy /usr/share/themes/elementary to .themes/someothername , change the apps.css, then set the theme name to someothername

[mdh34]

This could alternatively be fixed by shipping some css within the wingpanel indicator itself

[drequivalent]

This could alternatively be fixed by shipping some css within the wingpanel indicator itself

Yeah, please do so

However, editing .composited-indicator padding changes all indicators padding, including system ones which are fine. Can we edit only Ayatana indicators padding?

[retrowiseninja]

This could alternatively be fixed by shipping some css within the wingpanel indicator itself

Yeah, please do so

However, editing .composited-indicator padding changes all indicators padding, including system ones which are fine. Can we edit only Ayatana indicators padding?

Ayatna indicators having the same default padding. That would be great

[marcussacana]

Not worked to me...

[marcussacana]

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/
4 - Backup your libayatana_compatibility.so
5 - Replace the libayatana_compatibility.so with the zipped one
6 - Reboot

Before:

After:

PS: I'm using the JUNO

[WebShapedBiz]

Thank you @marcussacana for this fix, especially because it seems that the wingpanel from the version 2.2.6 is completely ignoring .composited-indicator selector.

Would you though reconsider leaving the size of ayatana indicator icons as they were before? I've noticed that they are smaller now but the height of the wingpanel is the same so there is no actual gain for having them smaller.

Once again, thank you for your time and effort with this fix.

Cheers.

[marcussacana]

@WebShapedBiz As you asked, I did a build that don't change the icon size, here:
libayatana_compatibility.so.zip
I think this time I don't need say how you install it.

Before:

After:

[WebShapedBiz]

Just awesome @marcussacana, you're golden.

[mobdiz]

Hi,

Try setting the padding to '0 2px' in your theme -> apps.css

In my case I use https://github.com/surajmandalcell/elementary-x :
/usr/share/themes/elementary-x/gtk-3.22/apps.css

.composited-indicator {
    padding: 0 2px;
}

Then set your theme to something else and then back again to make sure the changes are refreshed(or restart/log out)

Now it does not work. Maybe something has changed during the upgrade.

[marcussacana]

@mobdiz try my method

[mobdiz]

@mobdiz try my method

@marcussacana Thank you very much. Helped. It will not break after the upgrade?

[marcussacana]

we never know what a update will break.

[marcussacana]

Guys, isn't related with this issue, but since is a little dead the wingpanel community I want notify everyone about more one small trick, this time to make the wingpanel submenu works, I tested with SVP4 menu
https://github.com/eth-p/wingpanel-indicator-ayatana/issues/11#issuecomment-558350032

[ernstki]

For what it's worth, creating a ~/.config/gtk-3.0/gtk.css with these contents worked fine for me on an up-to-date JunoHera system:

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

I'll try to remember to update this comment some future update breaks that, but for now, this is a straightforward enough solution that doesn't require re-editing the app.css associated with the theme (as root) every time the distro package gets updated and clobbers your CSS tweaks.

[LightColoredLines]

I do a comparation between @marcussacana method and @ernstki method.

@marcussacana

@ernstki

Both reduce the gap. BUT, @marcussacana method has a maintain icon size (that yellow sticky note icon), and @ernstki method not maintain the size (it look big, not the same as the other). Maybe you can try to add more content inside gtk.css ? @ernstki