It is currently March 28th, 2024, 10:18 pm

Icon That is a folder

Get help with creating, editing & fixing problems with skins
snipersteve1990
Posts: 2
Joined: October 21st, 2017, 12:59 am

Icon That is a folder

Post by snipersteve1990 »

Hi I am new at making skins I am after a little bit of help and guidance.
I want to make an icon similar to the honeycomb one's, but I want it so when I hover over it with my mouse other icons pop out of it so I can select a program. I.E a game icon on the desktop and you hover over and your games pop out for you to select the game you would like. I know how to create the icons but I cannot seam to find any info on how I can code the icon to do this on the net please can someone assist me in this.

Sorry if this Is a bit of a noob question but this is the first bit of coding I have done.


Ste
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Icon That is a folder

Post by balala »

snipersteve1990 wrote:I want to make an icon similar to the honeycomb one's, but I want it so when I hover over it with my mouse other icons pop out of it so I can select a program. I.E a game icon on the desktop and you hover over and your games pop out for you to select the game you would like. I know how to create the icons but I cannot seam to find any info on how I can code the icon to do this on the net please can someone assist me in this.

Sorry if this Is a bit of a noob question but this is the first bit of coding I have done.
There are no "noob" questions, we all was beginners at a given moment, so I don't think you should apologize. Finally the purpose of this forum is exactly to get some answers to you questions related to this wonderful program, which is Rainmeter...

So, let's start building some code, which could help you.

First we have to create the main icon. So, create a new skin and add the followings there:

Code: Select all

[MeterIcon1]
Meter=Image
SolidColor=255,0,0
X=100
Y=0
W=80
H=80
MouseOverAction=[!ShowMeterGroup "SecondLevel"][!Redraw]
Here I used just a simple red color, but obviously you can replace the SolidColor of the above meter, with the proper ImageName option. Depending on the image you'd like to use, you maybe will want to also remove the W= and H= options.
See that here I added a MouseOverAction option to show up the icons of the "second level", which initially are hidden (see below).
Now the next step is to add those icons. Add the following meters, below [MeterIcon1] (as I wrote the code, is important to place these meters below the first one):

Code: Select all

[MeterIcon11]
Meter=Image
SolidColor=0,255,0
X=0
Y=100r
W=80
H=80
LeftMouseUpAction=["ADD-HERE-THE-PATH-OF-THE-FIRST-APP"]
Group=SecondLevel
Hidden=1

[MeterIcon12]
Meter=Image
SolidColor=0,0,255
X=100r
Y=0r
W=80
H=80
LeftMouseUpAction=["ADD-HERE-THE-PATH-OF-THE-SECOND-APP"]
Group=SecondLevel
Hidden=1

[MeterIcon13]
Meter=Image
SolidColor=255,240,0
X=100r
Y=0r
W=80
H=80
LeftMouseUpAction=["ADD-HERE-THE-PATH-OF-THE-THIRD-APP"]
Group=SecondLevel
Hidden=1
One more thing is needed: you have to take care to hide the icons of the second level, when you're leaving the surface of the skin. Add the following [Rainmeter] section (preferably, but not necessarily to the beginning of the code):

Code: Select all

[Rainmeter]
Update=1000
BackgroundMode=2
SolidColor=0,0,0,1
MouseLeaveAction=[!HideMeterGroup "SecondLevel"][!Redraw]
Can you follow the above description? If you can't, here is the whole code:

Code: Select all

[Rainmeter]
Update=1000
BackgroundMode=2
SolidColor=0,0,0,1
MouseLeaveAction=[!HideMeterGroup "SecondLevel"][!Redraw]

[MeterIcon1]
Meter=Image
SolidColor=255,0,0
X=100
Y=0
W=80
H=80
MouseOverAction=[!ShowMeterGroup "SecondLevel"][!Redraw]

[MeterIcon11]
Meter=Image
SolidColor=0,255,0
X=0
Y=100r
W=80
H=80
LeftMouseUpAction=["ADD-HERE-THE-PATH-OF-THE-FIRST-APP"]
Group=SecondLevel
Hidden=1

[MeterIcon12]
Meter=Image
SolidColor=0,0,255
X=100r
Y=0r
W=80
H=80
LeftMouseUpAction=["ADD-HERE-THE-PATH-OF-THE-SECOND-APP"]
Group=SecondLevel
Hidden=1

[MeterIcon13]
Meter=Image
SolidColor=255,240,0
X=100r
Y=0r
W=80
H=80
LeftMouseUpAction=["ADD-HERE-THE-PATH-OF-THE-THIRD-APP"]
Group=SecondLevel
Hidden=1
Don't forget to add the appropriate file paths to the above LeftMouseUpAction options.
First please copy this code into the .ini file of your skin and give it a try. Does it look as you want it? Because if it does, we can furtherly develop the code.
snipersteve1990
Posts: 2
Joined: October 21st, 2017, 12:59 am

Re: Icon That is a folder

Post by snipersteve1990 »

Thank you that's perfect :)
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Icon That is a folder

Post by balala »

snipersteve1990 wrote:Thank you that's perfect :)
Perfect? I'm glad.