How to change the Panel icon color (+ size)

[Stuart_M]

Below shows how to change the Panel icon colors.

This solution was in response to a problem where a user changed the Panel to a very light color. Only the PulseAudio (speaker symbol) and "Power Manager" (battery symbol) icons were wanted to be darker because they were a little difficult to distinguish from the background (see image at end of post).

The normal solution would be to just select another window style that would produce darker icons on the Panel such as the below MX-21 Application themes:

• Adwaita
• Arc-Lighter
• Default
• Emacs
• HighContrast
• Matcha-light-aliz/azul/pueril/sea

However, in this case ONLY the Greybird.mx style was wanted.

In the past I would have just replaced the icon with a darker one (actually the speaker icon uses four icons: mute, low, medium, and high). Many times /usr/share/icons/Papirus/ contains the default icons. I tried every icon that I could find under the "icons" directory that matched the white Panel icon and none of the replaced (dark) icons would appear on the Panel (always running xfce4-panel -r after each change), so this method was abandoned.

I think the reason the above did not work is because sometimes the Panel icon colors are changed based on the css (Cascading Style Sheets) that the theme is using, so simply replacing an icon will not work.

This is how I changed the Panel icon colors using the PulseAudio (speaker symbol) and "Power Manager" (battery symbol) icons as an example, using the following setup:

• MX-21.1 Live Flash Drive
• MX Tweak > Theme tab > Themes:
  Application Themes = Greybird-mx
  Window Manager Themes = Greybird.mx
  Icons Themes = Papirus-mxblue-darkpanes
• Panel is in the bottom horizontal position
• The Panel color was changed: Panel Preferences > Appearance tab > Background Style: select "Solid color" with the color being the third white color down from the defaults (#DEDDDA).

It's basically three steps:

1. Go to /home/demo/.config/gtk-3.0/gtk.css
2. Enter the following text into gtk.css

   Code: Select all

   #pulseaudio-button, #xfce4-power-manager-plugin { color: #0000FF; }
   
   #pulseaudio-button image { -gtk-icon-transform: scale(1); }

   Note that the number symbol (#) that beings each css code line is needed for the snippet to add the change; it is NOT a comment line like shell scripts use but rather it is used in css files to identify a specific widget by name.
3. Run xfce4-panel -r to reset the Panel for the change to take effect.

Okay, that explains the first line, but what about the the line below the color change code in the above code window? That line is included as only FYI on how to change an icon size, in this case the PulseAudio (speaker) icon is used since that icon sometimes gets very large and out of proportion to the other icons, unlike "volumeicon" that remains proportionate. Perhaps some users will find the code useful.

The size of the speaker icon will change based on <n> in "scale(n)". At 0 the icon disappears. When over about 2 it extends beyond a 38px panel. A scale of "1" is 1:1.

Use fractional sizes to fine-tune the size. A normal sized icon is just a few tenths more or less than "1.0" - anything beyond that and the size gets ridiculous.

If there is no desire to change the icon size then just eliminate that line or comment it out with /* at the beginning and */ at the end of the line.



One last thing to note. If individual colors are wanted for specific icons then make a new line for each icon color. Using the same PulseAudio and "Power Manager" icons as an example, I used the following in the gtk.css file to illustrate the result:

Code: Select all

#pulseaudio-button { color: #0000FF; }

#xfce4-power-manager-plugin { color: #FF0000; }

The below image contains three screenshots of the different Panel icons. From the top to bottom:

• Default white icons before any changes were made to the gtk.css file.
• Both icons set to blue (#0000FF).
• Blue and red used for different icons, using the above code.

Panel_icon_color_change.png

[Stuart_M]

To make this thread more complete I thought I would combine the "datetime" plugin text color with the icon text color change. The default color is white (#FFFFFF) as can be seen in my Post #1 image.

1. Go to ~/.config/gtk-3.0/gtk.css and enter the line in the below code window into the gtk.css file. But first you must determine the plugin ID (see step 2) as well as determine the hex color you want the text to be, set for black in this example.

Code: Select all

#datetime-1 button label {color: #000000}

2. After "datetime" the value is "-1" which is the plugin ID for me. There are several ways to see what the plugin ID is for your installation:

• Panel Properties > Items tab > hover the mouse pointer over the plugin
• Look in ~/.config/xfce4/panel/
• Run the following command (MX-21 only):

  Code: Select all

  xfconf-query -c xfce4-panel -lv | grep datetime | awk '{print $1}' | awk -F'-' '{print $2}'

3. Restart the Panel for the change to take effect (or log out/in):

Code: Select all

xfce4-panel -r

I originally posted this in https://forum.mxlinux.org/viewtopic.php ... 08#p687108 (18 June 2022) and it contains an image of datetime in red text in Post #5 of that thread. That thread also contains a nice .desktop file that fehlix created that automates the above steps (see Post #4 in that thread for details).