It is currently March 28th, 2024, 1:56 pm

X in top rght corner to hide skin

Get help with creating, editing & fixing problems with skins
Post Reply
chabango
Posts: 5
Joined: March 14th, 2018, 12:11 am

X in top rght corner to hide skin

Post by chabango »

I have a skin that will be displayed to users and am trying to figure out a way to have an X in the top right corner to hide it similar to an Microsoft pop-up window. Click on the X in the corner and it will close/hide.

Thanks
User avatar
kyriakos876
Posts: 919
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: X in top rght corner to hide skin

Post by kyriakos876 »

Add this to your code:

Code: Select all

[MeterClose]
Meter=Text
FontSize=25
FontColor=255,0,0,255
Text="X"
LeftMouseUpAction=[!DeactivateConfig]
Or if you want a picture instead of a letter add this:

Code: Select all

[MeterClose]
Meter=Image
ImageName="Here you put the location of the image"
LeftMouseUpAction=[!DeactivateConfig]
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: X in top rght corner to hide skin

Post by balala »

kyriakos876 wrote:Add this to your code:

Or if you want a picture instead of a letter add this:
Problem with both meters is that they won't be placed into the top right corner of the skin, as chabango asked. I'd use instead something like the following meter:

Code: Select all

[MeterClose]
Meter=STRING
X=#CURRENTCONFIGWIDTH#
Y=0
Padding=15,5,15,5
FontColor=0,0,0
SolidColor=220,220,220,180
StringEffect=Border
FontEffectColor=220,220,220
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=Right
AntiAlias=1
Text=x
MouseOverAction=[!SetOption #CURRENTSECTION# FontColor "220,220,220"][!SetOption #CURRENTSECTION# FontEffectColor "0,0,0"][!SetOption #CURRENTSECTION# SolidColor "220,0,0,180"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontColor "0,0,0"][!SetOption #CURRENTSECTION# FontEffectColor "220,220,220"][!SetOption #CURRENTSECTION# SolidColor "220,220,220,180"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
LeftMouseUpAction=[!DeactivateConfig]
This meter will be positioned to the top right corner, due to its X, Y and StringAligh options. The "background" color of the meter is grey, with a black "x", but if you're hovering the mouse over it, it become red, with a white "x".
User avatar
kyriakos876
Posts: 919
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: X in top rght corner to hide skin

Post by kyriakos876 »

balala wrote:Problem with both meters is that they won't be placed into the top right corner of the skin, as chabango asked. I'd use instead something like the following meter:

Code: Select all

[MeterClose]
X=#CURRENTCONFIGWIDTH#
I left the positioning to them as there can be many things to take account and without knowing the skins meters I don't wanna intervene with them, but if you take that there's nothing up there and won't be, X=#CURRENTCONFIGWIDTH# would place it out of the skin. Maybe X=(#CURRENTCONFIGWIDTH#-[MeterClose:W]) would be more correct. ops, I didn't notice that StringAlign=Right

for the color effects I'd just make a button in photoshop to avoid having all that stuff for just one button effect, but hey, that's me... :D :D

Here's the classic windows button if you want to use it.
Attachments
CloseButton.png
Last edited by kyriakos876 on March 22nd, 2018, 2:11 pm, edited 1 time in total.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: X in top rght corner to hide skin

Post by jsmorley »

I wouldn't use a standard "X" character, but the Unicode Cross Mark symbol.

https://en.wikipedia.org/wiki/X_mark

Spending time in Photoshop to create a button image for this that I then have to include as a file with my skin is a bit of overkill in my opinion, but that's just me... ;-)

Code: Select all

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

[MeterBack]
Meter=Image
W=250
H=150
SolidColor=0,0,0,255

[MeterX]
Meter=String
X=(#CURRENTCONFIGWIDTH# - 1)
Y=1
StringAlign=Right
FontSize=11
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
DynamicVariables=1
Text=[\x274C]
MouseOverAction=[!SetOption MeterX SolidColor "124,0,18,255][!UpdateMeter MeterX][!Redraw]
MouseLeaveAction=[!SetOption MeterX SolidColor "47,47,47,255][!UpdateMeter MeterX][!Redraw]
LeftMouseDownAction=[!SetOption MeterX SolidColor "255,0,0,255][!UpdateMeter MeterX][!Redraw]
LeftMouseUpAction=[!DeactivateConfig]
GIF.gif
A meter being used as a "button" is one of the few times that LeftMouseDownAction makes sense.. You won't be able to drag the skin using the meter, but that is kinda the point, you want to be able to move off the meter if you "change your mind" about clicking it.

Do note that #CURRENTCONFIGWIDTH# will require DynamicVariables=1 unless you explicitly set the SkinWidth in [Rainmeter]
User avatar
kyriakos876
Posts: 919
Joined: January 30th, 2017, 2:01 am
Location: Greece

Re: X in top rght corner to hide skin

Post by kyriakos876 »

I personally prefer having this:

Code: Select all

[MeterX]
Meter=Button
ButtonImage="path/to/image.png"
X=(#CURRENTCONFIGWIDTH# - [MeterX:W])
LeftMouseUpAction=[!DeactivateConfig]
DynamicVariables=1
over this:

Code: Select all

[MeterX]
Meter=String
X=(#CURRENTCONFIGWIDTH# - 1)
Y=1
StringAlign=Right
FontSize=11
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
DynamicVariables=1
Text=[\x274C]
MouseOverAction=[!SetOption MeterX SolidColor "124,0,18,255][!UpdateMeter MeterX][!Redraw]
MouseLeaveAction=[!SetOption MeterX SolidColor "47,47,47,255][!UpdateMeter MeterX][!Redraw]
LeftMouseDownAction=[!SetOption MeterX SolidColor "255,0,0,255][!UpdateMeter MeterX][!Redraw]
LeftMouseUpAction=[!DeactivateConfig]
And the time it took me to create this particular button was lower than that of typing all that. But that just comes down to personal preferences.
Post Reply