Resizing Wi-Fi icon

TheWhaley99 · 2021-12-25 17:54:57

Hello, I am having trouble increasing the size of the Wi-Fi icon. I was able to resize all the other icons through gtk.css but I can't seem to figure out how to resize nm-applet. Also, going into preferences and resizing it from there didn't work, I believe the thing is broken because it only resizes the transparent border of the Wi-Fi icon and not the icon itself.

Last edited by TheWhaley99 (2021-12-28 02:03:31)

ToZ · 2021-12-25 18:31:40

Which distro and version of Xfce are you using? Also, specifically which plugin are you using to display the tray icons?

For the most part, Xfce can't affect the icons placed in the systray - it just creates a holding area and the app manages the icon. In newer versions and specifically using the "Status Tray" plugin, there is an option to size the icons, which works for me.

Otherwise, you'll need to manually manipulate the icons if you want to resize them.

TheWhaley99 · 2021-12-25 20:31:39

ToZ wrote:

Which distro and version of Xfce are you using? Also, specifically which plugin are you using to display the tray icons?
For the most part, Xfce can't affect the icons placed in the systray - it just creates a holding area and the app manages the icon. In newer versions and specifically using the "Status Tray" plugin, there is an option to size the icons, which works for me.
Otherwise, you'll need to manually manipulate the icons if you want to resize them.

I'm using Arch Linux and I'm using XFCE version 4.16. As for the display tray, I'm using Status Tray.

I assume the one you're referring to is under Panel Preferences and then go into edit mode and resize it from there? It didn't work for me, the size of the WiFi icon didn't increase but when it did, the size just became weird. And for that, I'll have to resize it manually but I don't know the name to it like for example, "xfce4-notification-plugin".

ToZ · 2021-12-25 21:40:27

TheWhaley99 wrote:

I assume the one you're referring to is under Panel Preferences and then go into edit mode and resize it from there?

Panel Preferences > Items Tab > double-click "Status Tray". Make sure "Adjust size automatically" is disabled and then change the "Fixed icon size" setting. Is this where you went?

And for that, I'll have to resize it manually but I don't know the name to it like for example, "xfce4-notification-plugin".

By manually, I mean manually edit the theme's png/svg icon to increase more padding between the icon image and the border (if you want to make it smaller).

TheWhaley99 · 2021-12-25 23:49:18

ToZ wrote:

Panel Preferences > Items Tab > double-click "Status Tray". Make sure "Adjust size automatically" is disabled and then change the "Fixed icon size" setting. Is this where you went?

Yes, that's how I tried to increase the size of the icon. I read somewhere that 22 size is the same as 16, when I increased it, I noticed that the WiFi icon doesn't really enlarge but the transparent background did.

By manually, I mean manually edit the theme's png/svg icon to increase more padding between the icon image and the border (if you want to make it smaller).

I'm currently using Dracula's theme, that means I'll have to go into the theme and edit it's icon or it's more under gtk.css?

ToZ · 2021-12-26 00:59:36

Which icon theme are you using? Also see this post that identifies the icons it uses.

Yes, that's how I tried to increase the size of the icon. I read somewhere that 22 size is the same as 16, when I increased it, I noticed that the WiFi icon doesn't really enlarge but the transparent background did.

Are you trying to make the icon larger?

TheWhaley99 · 2021-12-26 02:00:59

ToZ wrote:

Which icon theme are you using? Also see this post that identifies the icons it uses.

Are you trying to make the icon larger?

Yes, I'm trying to make the WiFi icon larger. The icon theme that I'm using is Tela icon theme, though I do switch to Papirus but those are the two icon theme I use

ToZ · 2021-12-26 03:24:06

Can you post a screenshot of the nm-applet icon on the panel that you want to resize, along with the results of the following:

xfconf-query -c xfce4-panel -lv
xfconf-query -c xsettings -lv

TheWhaley99 · 2021-12-26 03:43:49

ToZ wrote:

Can you post a screenshot of the nm-applet icon on the panel that you want to resize, along with the results of the following:
xfconf-query -c xfce4-panel -lv
xfconf-query -c xsettings -lv

Screenshot of nm-applet icon (Wi-Fi icon): https://imgur.com/a/hlsJCib

For xfconf-query -c xfce4-panel -lv

/configver                                        2
/panels                                           <<UNSUPPORTED>>
/panels/dark-mode                                 true
/panels/panel-1/background-style                  0
/panels/panel-1/disable-struts                    false
/panels/panel-1/icon-size                         32
/panels/panel-1/length                            100
/panels/panel-1/length-adjust                     true
/panels/panel-1/nrows                             1
/panels/panel-1/plugin-ids                        <<UNSUPPORTED>>
/panels/panel-1/position                          p=8;x=960;y=1066
/panels/panel-1/position-locked                   true
/panels/panel-1/size                              50
/plugins/plugin-1                                 launcher
/plugins/plugin-10                                notification-plugin
/plugins/plugin-11                                separator
/plugins/plugin-11/style                          0
/plugins/plugin-12                                clock
/plugins/plugin-12/digital-format                 %a %_d %b, %R %p
/plugins/plugin-13                                separator
/plugins/plugin-13/style                          0
/plugins/plugin-14                                actions
/plugins/plugin-15                                separator
/plugins/plugin-15/style                          0
/plugins/plugin-1/items                           <<UNSUPPORTED>>
/plugins/plugin-2                                 tasklist
/plugins/plugin-2/flat-buttons                    true
/plugins/plugin-2/grouping                        0
/plugins/plugin-2/include-all-monitors            true
/plugins/plugin-2/show-labels                     false
/plugins/plugin-2/show-only-minimized             false
/plugins/plugin-2/show-wireframes                 false
/plugins/plugin-2/sort-order                      4
/plugins/plugin-2/switch-workspace-on-unminimize  true
/plugins/plugin-2/window-scrolling                true
/plugins/plugin-3                                 separator
/plugins/plugin-3/expand                          true
/plugins/plugin-3/style                           0
/plugins/plugin-4                                 pager
/plugins/plugin-4/miniature-view                  true
/plugins/plugin-4/rows                            1
/plugins/plugin-5                                 separator
/plugins/plugin-5/style                           0
/plugins/plugin-6                                 systray
/plugins/plugin-6/hidden-legacy-items             <<UNSUPPORTED>>
/plugins/plugin-6/hide-new-items                  false
/plugins/plugin-6/icon-size                       22
/plugins/plugin-6/known-items                     <<UNSUPPORTED>>
/plugins/plugin-6/known-legacy-items              <<UNSUPPORTED>>
/plugins/plugin-6/square-icons                    true
/plugins/plugin-7                                 whiskermenu
/plugins/plugin-8                                 pulseaudio
/plugins/plugin-8/enable-keyboard-shortcuts       true
/plugins/plugin-8/mpris-players                   firefox.instance1028;firefox.instance1330;firefox.instance3316;firefox.instance5857;firefox.instance866;firefox.instance905;firefox.instance913;firefox.instance992;spotify
/plugins/plugin-8/show-notifications              true
/plugins/plugin-9                                 power-manager-plugin

For xfconf-query -c xsettings -lv

/Gdk/WindowScalingFactor        1
/Gtk/ButtonImages               true
/Gtk/CanChangeAccels            false
/Gtk/ColorPalette               black:white:gray50:red:purple:blue:light blue:green:yellow:orange:lavender:brown:goldenrod4:dodger blue:pink:light green:gray10:gray30:gray75:gray90
/Gtk/CursorThemeName            volantes_light_cursors
/Gtk/CursorThemeSize            0
/Gtk/DecorationLayout           menu:minimize,maximize,close
/Gtk/DialogsUseHeader           true
/Gtk/FontName                   Roboto 10
/Gtk/IconSizes                  
/Gtk/KeyThemeName               
/Gtk/MenuBarAccel               F10
/Gtk/MenuImages                 true
/Gtk/MonospaceFontName          Roboto Mono Light 10
/Gtk/TitlebarMiddleClick        lower
/Gtk/ToolbarIconSize            3
/Gtk/ToolbarStyle               icons
/Net/CursorBlink                true
/Net/CursorBlinkTime            1200
/Net/DndDragThreshold           8
/Net/DoubleClickDistance        5
/Net/DoubleClickTime            400
/Net/EnableEventSounds          false
/Net/EnableInputFeedbackSounds  false
/Net/IconThemeName              Tela-dark
/Net/SoundThemeName             default
/Net/ThemeName                  Dracula-slim-standard-buttons
/Xft/Antialias                  1
/Xft/Hinting                    -1
/Xft/HintStyle                  hintfull
/Xft/RGBA                       none

Last edited by TheWhaley99 (2021-12-26 03:44:15)

ToZ · 2021-12-26 13:55:58

I've been looking closer at this, and the old method of changing the icon doesn't seem to work anymore. There must have been a change in the code, so I'm thinking that you are right - something is broken. I think a bug report is probably required.

ToZ · 2021-12-26 14:12:39

One other thing you could try is to run nm-applet in indicator mode (this will place it in Status Notifiers section of the tray. To do so, run nm-applet as:

nm-applet --indicator

Once in there, you can access it via the #sn-button widget name and make adjustments in gtk.css (note that this will affect all status notifiers)

#sn-button image { -gtk-icon-transform: scale(1.2); }

TheWhaley99 · 2021-12-26 16:45:06

ToZ wrote:

One other thing you could try is to run nm-applet in indicator mode (this will place it in Status Notifiers section of the tray. To do so, run nm-applet as:
nm-applet --indicator
Once in there, you can access it via the #sn-button widget name and make adjustments in gtk.css (note that this will affect all status notifiers)
#sn-button image { -gtk-icon-transform: scale(1.2); }

Hm... I tried to do that but this came up: https://imgur.com/a/k3Ac7mR

Still, I ignored it and went ahead into gtk.css and pasted in the command you've provided, yet the size of the icon still remains the same. What I did was that I ran "nm-applet --indicator", and after that, I opened up gtk.css and pasted the command, then I open another terminal and ran "xfce4-panel -r" to refresh the panel.

ToZ · 2021-12-26 21:03:32

Strange error message. I'm also on Arch and I'm not getting that message. Plus the image re-sizing works for me.

Can you post back the contents of your ~/.config/gtk-3.0/gtk.css file as well as the results of:

ps -ef | grep -E 'xfce4-panel|nm-applet'

Keep in mind that when you upscale an image in gtk it blurs. So this may not be ideal.

TheWhaley99 · 2021-12-27 02:23:40

ToZ wrote:

Strange error message. I'm also on Arch and I'm not getting that message. Plus the image re-sizing works for me.
Can you post back the contents of your ~/.config/gtk-3.0/gtk.css file as well as the results of:
ps -ef | grep -E 'xfce4-panel|nm-applet'
Keep in mind that when you upscale an image in gtk it blurs. So this may not be ideal.

For ps -ef | grep -E 'xfce4-panel|nm-applet'

alex         843     756  1 10:19 ?        00:00:01 xfce4-panel --display :0.0 --sm-client-id 25ed821b0-ea7a-4e49-ac4c-f9eb1110e1b3
alex         886     756  0 10:19 ?        00:00:00 nm-applet
root        1366    1365  0 10:20 pts/0    00:00:00 nm-applet --indicator
alex        1415    1412  0 10:21 pts/1    00:00:00 grep -E xfce4-panel|nm-applet

For gtk.css

/* Reduce icon size after loading large 32px */
#whiskermenu-button image {
-gtk-icon-transform:scale(1.2);
}
#launcher-arrow image {
-gtk-icon-transform:scale(1.0) translateY(1px); /* translate to account for new bottom border*/
}
/* Give the launcher icons the same blue highlight when hovering mouse 
over them (if you are not using Manjaro you might not need to do this or 
the highlight might be a different color) */
#launcher-arrow {border-bottom:2px solid transparent;}
#launcher-arrow:hover {border-bottom:2px solid rgba(46,179,152,0.5);
}

/* Resize as above, nudge to the left and prevent transparency */
.tasklist button image {
  -gtk-icon-transform:scale(1.0) translateX(-1px);
  opacity:1;
}.tasklist button:checked {
  background-image:none;
  background-color:rgba(0,0,0,0.3); /* Focused program has a darker tint */
}

/* Raise the icons smoothly when hovering over them */
#launcher-arrow:hover image {
  -gtk-icon-transform:scale(1.0) translateY(-1px);
  transition: -gtk-icon-transform 0.1s;
}
.tasklist button:hover image {
  -gtk-icon-transform:scale(1.0) translate(-1px, -1px);
  transition: -gtk-icon-transform 0.1s;
}

/*  Resize as above */
#pulseaudio-button image  {-gtk-icon-transform:scale(0.6);}
#xfce4-power-manager-plugin image { -gtk-icon-transform: scale(0.6); }
#xfce4-notification-plugin image { -gtk-icon-transform: scale(0.6); }


/* This one's not working */
#sn-button image { -gtk-icon-transform: scale(1.5); }


/* If you are using an LCD or analog clock this adds some needed padding
around the edges */
#clock-button  {padding:8px}

/* Adds some angled light rays on the screen selecter*/
#pager-4 wnck-pager {
  background-image:linear-gradient(290deg, transparent 28%,rgba(255,255,255,0.1) 30%,rgba(255,255,255,0) 60%);
}

/* Change the Show desktop image to a more non-descript one that also doesn't
look like a Thunder folder */
#showdesktop-1 image {opacity:0;}
#showdesktop-1 button {
background-image:url('/usr/share/icons/Papirus/32x32/places/folder-black-desktop.svg');
background-size:72%;
background-position:center;
background-repeat:no-repeat;
}

Last edited by TheWhaley99 (2021-12-27 02:24:06)

ToZ · 2021-12-27 03:42:46

TheWhaley99 wrote:

alex         843     756  1 10:19 ?        00:00:01 xfce4-panel --display :0.0 --sm-client-id 25ed821b0-ea7a-4e49-ac4c-f9eb1110e1b3
alex         886     756  0 10:19 ?        00:00:00 nm-applet
root        1366    1365  0 10:20 pts/0    00:00:00 nm-applet --indicator
alex        1415    1412  0 10:21 pts/1    00:00:00 grep -E xfce4-panel|nm-applet

You are running "nm-applet --indicator" as root. You shouldn't do that. First kill all existing nm-applet instances:

sudo pkill nm-applet

...and re-run "ps -ef | grep nm-applet" to make sure there are no running instances.

Then, using your "alex" user account, run:

nm-applet --indicator

...and it will show up in the Status Tray again (but in the status notifiers section instead).

If it's now too big, adjust the config parameter in your gtk.css file to suit.

Last edited by ToZ (2021-12-27 03:54:18)

TheWhaley99 · 2021-12-27 04:08:02

ToZ wrote:

TheWhaley99 wrote:
alex         843     756  1 10:19 ?        00:00:01 xfce4-panel --display :0.0 --sm-client-id 25ed821b0-ea7a-4e49-ac4c-f9eb1110e1b3
alex         886     756  0 10:19 ?        00:00:00 nm-applet
root        1366    1365  0 10:20 pts/0    00:00:00 nm-applet --indicator
alex        1415    1412  0 10:21 pts/1    00:00:00 grep -E xfce4-panel|nm-applet
You are running "nm-applet --indicator" as root. You shouldn't do that. First kill all existing nm-applet instances:
sudo pkill nm-applet
...and re-run "ps -ef | grep nm-applet" to make sure there are no running instances.
Then, using your "alex" user account, run:
nm-applet --indicator
...and it will show up in the Status Tray again (but in the status notifiers section instead).
If it's now too big, adjust the config parameter in your gtk.css file to suit.

Ohhh I see, and yeah, it works now, hooray big_smile

New status tray icon size: https://imgur.com/a/5ZwqpFh, thought it's a little blurry (will resize later), at least it works.

EDIT: I noticed that when I restart my device, the icon returns to normal, am I supposed to kill one of the nm-applet instances? Screenshot of Systray Icons: https://imgur.com/a/3e0vhNj

Last edited by TheWhaley99 (2021-12-27 04:17:13)

ToZ · 2021-12-27 13:45:16

TheWhaley99 wrote:

EDIT: I noticed that when I restart my device, the icon returns to normal, am I supposed to kill one of the nm-applet instances? Screenshot of Systray Icons: https://imgur.com/a/3e0vhNj

Yes. Copy the file /etc/xdg/autostart/nm-applet.desktop to ~/.config/autostart, then edit this newly copied file and change the line that reads:

Exec=nm-applet

...to read:

Exec=nm-applet --indicator

Then log out and back in again and you should just have the one instance running as an indicator.

TheWhaley99 · 2021-12-27 18:12:33

ToZ wrote:

Yes. Copy the file /etc/xdg/autostart/nm-applet.desktop to ~/.config/autostart, then edit this newly copied file and change the line that reads:
Exec=nm-applet
...to read:
Exec=nm-applet --indicator
Then log out and back in again and you should just have the one instance running as an indicator.

Yes, finally, it works! Thank you so much big_smile What a ride just to change an icon xd

KBar · 2021-12-28 13:26:51

Today I have been trying to solve the same issue and I have come up with three conclusions:

Unchecking Symbolic links immediately forces the icon to pick up the size specified in Maximum icon size (px)
EDIT: Pardon me, I forgot that I also gimped the 16px icons because the default 22px ones aren't exactly scaled correctly, i.e. the tiles are 22px but the icons themselves are still at 16. You can disregard this and the third point.
GTK's transform tool seems to be broken and dysfunctional. SVGs aren't supposed to become blurry when scaled up. It's in the name: scalable vector graphics.
With symbolic option enabled, the nm-signal-100-symbolic.svg file is selected for rendering. It's supposed to scale itself to whatever size you set automatically, but somehow it doesn't. If you are using a more up-to-date version of Xfce than me (I'm on 4.14) and observing the same behavior, then that means that the issue hasn't been properly addressed or maybe even went under the radar. I'd say that it's definitely a bug worth working on.

Last edited by KBar (2021-12-28 13:32:54)

KBar · 2021-12-28 14:03:50

Could this line be the culprit?

ToZ · 2021-12-28 16:14:12

I believe the icon is loaded via this function. Note that it uses the GTK function gtk_icon_theme_load_icon() to load the icon.

However, you are correct in looking at the app itself. systray is just a holder - it is unable to affect the icon - this is something that the application provides. However, the Status Notifier plugin does have the ability via css to affect "all" status notifiers (but not individually).

Also important to note that by impacting the "size" of the container, it can impact the size of the icons provided by most applications - hence the "fixed icon size" setting.

The nm-applet code provides both systray and appindicator (status notifier) support. So when starting nm-applet with the "--indicator" parameter, you are moving the icon from the systray to the status notifier section - that seems to have some more control over (and different logic) around the icon.

KBar · 2021-12-28 16:28:04

ToZ wrote:

The nm-applet code provides both systray and appindicator (status notifier) support. So when starting nm-applet with the "--indicator" parameter, you are moving the icon from the systray to the status notifier section - that seems to have some more control over (and different logic) around the icon.

For me, it's the exact opposite. I tried changing it from statusnotifier to systray and it picked up the correct size. Very weird.

Xfce Forum

Sub domains

#1 2021-12-25 17:54:57

Resizing Wi-Fi icon

#2 2021-12-25 18:31:40

Re: Resizing Wi-Fi icon

#3 2021-12-25 20:31:39

Re: Resizing Wi-Fi icon

#4 2021-12-25 21:40:27

Re: Resizing Wi-Fi icon

#5 2021-12-25 23:49:18

Re: Resizing Wi-Fi icon

#6 2021-12-26 00:59:36

Re: Resizing Wi-Fi icon

#7 2021-12-26 02:00:59

Re: Resizing Wi-Fi icon

#8 2021-12-26 03:24:06

Re: Resizing Wi-Fi icon

#9 2021-12-26 03:43:49

Re: Resizing Wi-Fi icon

#10 2021-12-26 13:55:58

Re: Resizing Wi-Fi icon

#11 2021-12-26 14:12:39

Re: Resizing Wi-Fi icon

#12 2021-12-26 16:45:06

Re: Resizing Wi-Fi icon

#13 2021-12-26 21:03:32

Re: Resizing Wi-Fi icon

#14 2021-12-27 02:23:40

Re: Resizing Wi-Fi icon

#15 2021-12-27 03:42:46

Re: Resizing Wi-Fi icon

#16 2021-12-27 04:08:02

Re: Resizing Wi-Fi icon

#17 2021-12-27 13:45:16

Re: Resizing Wi-Fi icon

#18 2021-12-27 18:12:33

Re: Resizing Wi-Fi icon

#19 2021-12-28 13:26:51

Re: Resizing Wi-Fi icon

#20 2021-12-28 14:03:50

Re: Resizing Wi-Fi icon

#21 2021-12-28 16:14:12

Re: Resizing Wi-Fi icon

#22 2021-12-28 16:28:04

Re: Resizing Wi-Fi icon

Board footer