Change start menu icon on mouseover or click

CreeperLava · 2016-09-10 11:57:10

The title says it all . I'm looking for a way to change the icon of the Xfce Whisker Menu when I hover over or click it. I have 3 icons I want to combine to obtain an animation when interacting with that menu (like with the W7 start menu), and haven't found a way to do what I want yet. I hope you can help !

I'm using the Whisker menu 1.5.3 under Linux Mint 18 (using Mint-X theme).

Last edited by CreeperLava (2016-09-10 12:11:02)

ToZ · 2016-09-10 16:55:13

Let me point you in a direction....

Assuming that Mint 18 is using the GTK2 version of the whisker-menu (which I believe it is), you can use the pixmap engine to apply a "behind the icon" effect:

style "wmb"
{
	engine "pixmap" {
		image {
			function	= BOX
			recolorable	= TRUE
			state		= PRELIGHT
			file		= "prelight.png"
			border		= { 1, 1, 1, 1 }
			stretch		= TRUE
		}
		image {
			function	= BOX
			recolorable	= TRUE
			state		= ACTIVE
			file		= "active.png"
			border		= { 1, 1, 1, 1 }
			stretch		= TRUE
		}
	}
}
widget "*whiskermenu-button"	style "wmb"

Create the "prelight.png" and "active.png" files in your home directory and put this snippet in ~/.gtkrc-2.0. Prelight is the image that will be visible behind the icon on mouse hover and Active on mouse press. Note that this example won't replace the existing icon, but will display behind the current icon. I'm not sure if that's possible. Here is a link about the pixmap engine.

There is also this related thread.

CreeperLava · 2016-09-10 17:04:24

Thank you very much ! I'll try that out, and update this topic once I'm done. I'll replace the usual whisker icon with a transparent one, we'll see how that goes.
If I want another image for the inactive state, would this code work ?

include ".gtkrc-xfce"

style "wmb"
{
	engine "pixmap" {
		image {
			function	= BOX
			recolorable	= TRUE
			state		= NORMAL
			file		= "normal.png"
			border		= { 1, 1, 1, 1 }
			stretch		= TRUE
		}
		image {
			function	= BOX
			recolorable	= TRUE
			state		= PRELIGHT
			file		= "prelight.png"
			border		= { 1, 1, 1, 1 }
			stretch		= TRUE
		}
		image {
			function	= BOX
			recolorable	= TRUE
			state		= ACTIVE
			file		= "active.png"
			border		= { 1, 1, 1, 1 }
			stretch		= TRUE
		}
	}
}
widget "*whiskermenu-button"	style "wmb"

Edit : I made the changes, replaced the whisker icon by a transparent .png, placed the other .pngs in the home directory and executed "xfce4-panel -r". It doesn't seem to work, still the same as before. Any ideas ?

Last edited by CreeperLava (2016-09-10 17:17:24)

ToZ · 2016-09-10 18:33:33

It doesn't work for me either if I make the whisker panel icon transparent. It needs to be a regular icon. Try changing to the whisker icon to a small-ish icon so that you can see the other icons pop-up behind it.

CreeperLava · 2016-09-10 19:10:53

ToZ wrote:

It doesn't work for me either if I make the whisker panel icon transparent. It needs to be a regular icon. Try changing to the whisker icon to a small-ish icon so that you can see the other icons pop-up behind it.

I tried that, it didn't work either. I also tried logging out, didn't help. Does it work for you ? I noticed there is a file named .gtkrc-xfce, maybe that's the one that should be edited ?

Edit : Here is the complete code as of now.

include ".gtkrc-xfce"

style "wmb"
{
	engine "pixmap" {
		image {
			function	= BOX
			recolorable	= TRUE
			state		= NORMAL
			file		= "SG1.png"
			border		= { 1, 1, 1, 1 }
			stretch		= TRUE
		}
		image {
			function	= BOX
			recolorable	= TRUE
			state		= PRELIGHT
			file		= "SG2.png"
			border		= { 1, 1, 1, 1 }
			stretch		= TRUE
		}
		image {
			function	= BOX
			recolorable	= TRUE
			state		= ACTIVE
			file		= "SG3.png"
			border		= { 1, 1, 1, 1 }
			stretch		= TRUE
		}
	}
}
widget "*whiskermenu-button" style "wmb"

The 3 images are in /home/, same directory as the .gtkrc-2.0 file.

Last edited by CreeperLava (2016-09-10 19:42:43)

ToZ · 2016-09-10 20:56:43

I've tested your code snippet successfully on Arch and Xubuntu 16.04 (am downloading the Mint ISO to test now).

Here are the SG1/2/3 files that I use for testing:

They are adjusted in size so SG1 is the smallest, SG2 medium and SG3 the largest.

Save them in your home directory as SG!1/2/3 and use SG1 as the default whiskermenu icon so you can see the effect.

ToZ · 2016-09-10 21:05:35

And on Mint it doesn't work with the Mint-X theme. It must be doing something similar in its theming.
Edit: Yes it is. Have a look at /usr/share/themes/Mint-X/gtk-2.0/styles/panel.rc

Try changing the appearance theme to Adwaita to see the effect.

Last edited by ToZ (2016-09-10 21:09:23)

CreeperLava · 2016-09-11 09:26:51

Yay, it works ! Thank you so much for your help. Even the transparent icon works with this style. If I want to keep the MintX style, would editing /usr/share/themes/Mint-X/gtk-2.0/styles/panel.rc work too ?
Edit : Doesn't look like it works if I just copy paste the code in it and refresh the panel.

Apparently all code in the Mint-X/gtk-2.0/styles folder is called from gtk-2.0/gtkrc. I see no mention of the whisker button anywhere though.

Another problem is the "NORMAL" state of the icon, which doesn't work either. I tried INSENSITIVE and SELECTED instead, didn't work. Is there a workaround for this, too ?

I'll post some screenshots once I'm done polishing the details .

Last edited by CreeperLava (2016-09-11 10:02:30)

ToZ · 2016-09-11 16:47:29

CreeperLava wrote:

Yay, it works ! Thank you so much for your help. Even the transparent icon works with this style. If I want to keep the MintX style, would editing /usr/share/themes/Mint-X/gtk-2.0/styles/panel.rc work too ?
Edit : Doesn't look like it works if I just copy paste the code in it and refresh the panel.
Apparently all code in the Mint-X/gtk-2.0/styles folder is called from gtk-2.0/gtkrc. I see no mention of the whisker button anywhere though.

Specify a priority setting of "highest" for the widget assignment to make sure it takes precedence over other elements. To do so, change the last line of your snippet to read:

widget "*whiskermenu-button" style:highest "wmb"

Another problem is the "NORMAL" state of the icon, which doesn't work either. I tried INSENSITIVE and SELECTED instead, didn't work. Is there a workaround for this, too ?

Only prelight and active seem to work for me. I'm not sure why normal doesn't. Insensitive is for when the widget is grey-out and selected is when the widget is focused, neither of which would apply to this plugin.

CreeperLava · 2016-09-11 16:59:38

ToZ wrote:

Specify a priority setting of "highest" for the widget assignment to make sure it takes precedence over other elements. To do so, change the last line of your snippet to read:
widget "*whiskermenu-button" style:highest "wmb"

Your help is invaluable... The priority made it work in Mint-X. There is still the normal state issue that I would like to fix. On the thread you linked above, user sixsixfive said that "the only way to get the normal state themed is to theme all xfce-panel>GtkToggleButton's". Maybe that helps.

Last edited by CreeperLava (2016-09-11 17:00:01)

CreeperLava · 2016-09-22 11:17:45

Any ideas on how to edit the "normal state" icon ?

ToZ · 2016-09-22 13:30:27

Not that I am aware of, sorry. sixsixfive seemed to alude to the fact that it can be themed by theming all GtkToggleButtons, but I'm not sure what he meant by that.

CreeperLava · 2016-09-22 15:17:53

Too bad . Well, thank you for your help, anyways. Here is how it looks like :

Xfce Forum

Sub domains

#1 2016-09-10 11:57:10

Change start menu icon on mouseover or click

#2 2016-09-10 16:55:13

Re: Change start menu icon on mouseover or click

#3 2016-09-10 17:04:24

Re: Change start menu icon on mouseover or click

#4 2016-09-10 18:33:33

Re: Change start menu icon on mouseover or click

#5 2016-09-10 19:10:53

Re: Change start menu icon on mouseover or click

#6 2016-09-10 20:56:43

Re: Change start menu icon on mouseover or click

#7 2016-09-10 21:05:35

Re: Change start menu icon on mouseover or click

#8 2016-09-11 09:26:51

Re: Change start menu icon on mouseover or click

#9 2016-09-11 16:47:29

Re: Change start menu icon on mouseover or click

#10 2016-09-11 16:59:38

Re: Change start menu icon on mouseover or click

#11 2016-09-22 11:17:45

Re: Change start menu icon on mouseover or click

#12 2016-09-22 13:30:27

Re: Change start menu icon on mouseover or click

#13 2016-09-22 15:17:53

Re: Change start menu icon on mouseover or click

Board footer