Can RM not do a simple hover background?

[RainDojo]

I have a good grasp of HTML, CSS, etc and this would be very easy to do but I can't seem to find anywhere that says how to do it. All I want is for a background to show behind the icon on hover like in this image:

Screenshot_2.png

I'm new to RainMeter so I am working from a skin which has a simple change of opacity for it's hover state:

Code: Select all

[Outlook2]
Meter=Image
ImageName=#@#winicons\Outlook.png
X=630
Y=472
H=45
W=45
LeftMouseUpAction=["#@#\Application\Outlook (new) - Shortcut"][!Update]
AntiAlias=1

[OutlookBG2]
Meter=Image
ImageName=#@#Skin Icons\Icon BG.png
X=630
Y=472
W=48
H=48
ImageTint=15,15,15
MouseOverAction=[!SetOption Outlook2 ImageAlpha "80"][!Update]
MouseLeaveAction=[!SetOption Outlook2 ImageAlpha "250"][!Update]
ImageAlpha=0
AntiAlias=1

[RicardoTM]

There's many ways to do that, most use the same principle, Set Option bang.

You can make the background using the shape meter and use a set option bang to change its alpha channel. You can do the same as the code you shared, using an image meter with a SolidColor and change its alpha the same way. You could use HideMeter and ShowMeter bangs as well.

What's the part you don't understand?

Bangs are perfectly explained on the manual

By the way, avoid using spaces on folder names, image names or any path.

[Yincognito]

Quick and rudimentar, without creating a preceding meter for the icon background (here, we set the SolidColor option of the icon meter itself):

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1

[Icon]
Meter=Image
SolidColor=255,0,0,1
ImageName=#@#Icon.png
MouseOverAction=[!SetOption Icon SolidColor "255,0,0,255"][!UpdateMeter Icon][!Redraw]
MouseLeaveAction=[!SetOption Icon SolidColor "255,0,0,1"][!UpdateMeter Icon][!Redraw]

For fancier results like rounded corners, various gradients, shapes and such, adding and performing things on a preceding Shape meter would be needed, like RicardoTM mentioned. To avoid having to write the entire option (i.e. line) when altering the Shape option, you could use variables, !SetVariable and DynamicVariables=1 instead of doing things via !SetOption (here, we set, say, a BackColor variable, which is then used in the Shape option):

Code: Select all

[Variables]
BackColor=255,0,0,1

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1

[Back]
Meter=Shape
Shape=Rectangle 0,0,32,32,6 | StrokeWidth 0 | Stroke Color 0,0,0,1 | Fill Color #BackColor#
MouseOverAction=[!SetVariable BackColor "255,0,0,255"][!UpdateMeter Back][!Redraw]
MouseLeaveAction=[!SetVariable BackColor "255,0,0,1"][!UpdateMeter Back][!Redraw]
DynamicVariables=1

[Icon]
Meter=Image
ImageName=#@#Icon.png

The above examples assume that you have a 32 x 32 pixel image file called "Icon.png" in the @Resources subfolder of your skin folder.

Note: using spaces in folder names, image names or paths is perfectly fine, but if you do that, you must enclose such strings between quotes when you use them in bangs (quotes are not necessarily needed when using a string containing spaces as the value of an option):
https://docs.rainmeter.net/manual/skins/option-types/#Action

[RainDojo]

@Yincognito Thanks that seems to work

[Yincognito]

@Yincognito Thanks that seems to work

You're welcome.