adjusting width

[NickV]

I have some background with Rainmeter, but am returning after a long absence. Very rusty. I now have the latest version, installed on a new hard drive (Win 7, if that matters)

trying to tinker with the provided illustro\Clock skin, just to get my feet back on the ground

I want to readjust the skin so it's about 110 pixels and a bit higher, so I can stack time, day, and date instead of having day and date side by side.

I have search the .ini, and can't find where the size is set. I tried adjusting the width in each of the meters; I tried adjusting the size of Background.png in resources. Nothing seems to have any effect except setting the BackgroundMode=0, which is not really what I want.

Is there a file somewhere else that illustro\Clock is getting it's size from? How can I change it?

Thanks so much

[jsmorley]

I have some background with Rainmeter, but am returning after a long absence. Very rusty. I now have the latest version, installed on a new hard drive (Win 7, if that matters)

trying to tinker with the provided illustro\Clock skin, just to get my feet back on the ground

I want to readjust the skin so it's about 110 pixels and a bit higher, so I can stack time, day, and date instead of having day and date side by side.

I have search the .ini, and can't find where the size is set. I tried adjusting the width in each of the meters; I tried adjusting the size of Background.png in resources. Nothing seems to have any effect except setting the BackgroundMode=0, which is not really what I want.

Is there a file somewhere else that illustro\Clock is getting it's size from? How can I change it?

Thanks so much

It uses a Background.png image as the skin background in [Rainmeter]

Background=#@#Background.png
; #@# is equal to Rainmeter\Skins\illustro\@Resources
BackgroundMode=3
BackgroundMargins=0,34,0,14

So BackgroundMode=3 will scale that image to fit the skin dimensions, and defined by the size of the various meters. It is kept from "squeezing" or "stretch" in a weird way with the BackgroundMargins option, that keeps it from "sizing" the top header bit, or edges or corners.

While that .png is designed to adjust to various "heights", I think you would have to create a new one to adjust the "width".

[NickV]

It uses a Background.png image as the skin background in [Rainmeter]

Background=#@#Background.png
; #@# is equal to Rainmeter\Skins\illustro\@Resources
BackgroundMode=3
BackgroundMargins=0,34,0,14

So BackgroundMode=3 will scale that image to fit the skin dimensions, as defined by the size of the various meters. It is kept from "squeezing" or "stretch" in a weird way with the BackgroundMargins option, that keeps it from "sizing" the top header bit, or edges or corners.

While that .png is designed to adjust to various "heights", I think you would have to create a new one to adjust the "width".

Thank you, JSMorley

There's still something I'm missing. Here is how I have edited the widths:

Code: Select all

[meterTitle]
Meter=String
MeterStyle=styleTitle
; Using MeterStyle=styleTitle will basically "copy" the
; contents of the [styleTitle] section here during runtime.
MeasureName=measureTime
X=190
Y=12
W=100
H=18
Text=%1
; %1 stands for the value of MeasureName (measureTime in this case).

[meterDay]
Meter=String
MeterStyle=styleCenterText
MeasureName=measureDay
X=190
Y=40
W=100
H=14
Text=%1

[meterDate]
Meter=String
MeterStyle=styleCenterText
MeasureName=measureDate
X=190
Y=60
; r stands for relative. In this case, the Y postition of meterValueCPU is 0 pixels
; below the Y value of the previous meter (i.e it's the same as in meterLabelCPU).
W=100
H=14
Text=%1

[meterSeperator]
Meter=Image
MeterStyle=styleSeperator
X=10
Y=52
W=100
H=1

I wanted to attach a screenshot of the result but cannot find how to do that. Basically, the three meters are stacked and aligned the way I want them, but the background image is still its original size, extending outward to the left so that it's well over twice the width I need.

If I try cropping the background.png in the resources folder, I lose the semi-transparent affect that the original background has — but the dimensions still display the same when I refresh. Baffled. . .

[eclectic-tech]

Don't modify the background image... the problem is most likely in your styleCenterText (which you did not post).

I created one, and adjusted the separator section Y value to accomodate the additional line...

Code: Select all

; Lines starting ; (semicolons) are commented out.
; That is, they do not affect the code and are here for demonstration purposes only.
; ----------------------------------

[Rainmeter]
; This section contains general settings that can be used to change how Rainmeter behaves.
Update=1000
Background=#@#Background.png
; #@# is equal to Rainmeter\Skins\illustro\@Resources
BackgroundMode=3
BackgroundMargins=0,34,0,14

[Metadata]
; Contains basic information of the skin.
Name=Clock
Author=poiru
Information=Displays the current date and time.
License=Creative Commons BY-NC-SA 3.0
Version=1.0.0

[Variables]
; Variables declared here can be used later on between two # characters (e.g. #MyVariable#).
fontName=Trebuchet MS
textSize=8
colorBar=235,170,0,255
colorText=255,255,255,205

; ----------------------------------
; MEASURES return some kind of value
; ----------------------------------

[measureTime]
; This measure returns the time in a 24-hour format (i.e. HH:MM).
Measure=Time
Format=%H:%M
; For a 12-hour clock, change the Format option above to: %I:%M %p
; Refer to the Rainmeter manual for other format codes.

[measureDate]
; Returns the date as DD.MM.YYYY
Measure=Time
Format=%d.%m.%Y

[measureDay]
; Returns the current day
Measure=Time
Format=%A

; ----------------------------------
; STYLES are used to "centralize" options
; ----------------------------------

[styleTitle]
StringAlign=Center
StringCase=Upper
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,50
FontColor=#colorText#
FontFace=#fontName#
FontSize=10
AntiAlias=1
ClipString=1

[styleLeftText]
StringAlign=Left
; Meters using styleLeftText will be left-aligned.
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleRightText]
StringAlign=Right
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleCenterText]
StringAlign=Center
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleSeperator]
SolidColor=255,255,255,15

; ----------------------------------
; METERS display images, text, bars, etc.
; ----------------------------------

[meterTitle]
Meter=String
MeterStyle=styleTitle
; Using MeterStyle=styleTitle will basically "copy" the
; contents of the [styleTitle] section here during runtime.
MeasureName=measureTime
X=100
Y=12
W=190
H=18
Text=%1
; %1 stands for the value of MeasureName (measureTime in this case).

[meterDay]
Meter=String
MeterStyle=styleCenterText
MeasureName=measureDay
X=100
Y=40
H=14
Text=%1

[meterDate]
Meter=String
MeterStyle=styleCenterText
MeasureName=measureDate
X=100
Y=60
; r stands for relative. In this case, the Y postition of meterValueCPU is 0 pixels
; below the Y value of the previous meter (i.e it's the same as in meterLabelCPU).
H=14
Text=%1

[meterSeperator]
Meter=Image
MeterStyle=styleSeperator
X=10
Y=74
W=190
H=1

iclock2.png

Aside: To attach items to your posts, use the ATTACHMENT tab below the input form to add files.

[NickV]

Don't modify the background image... the problem is most likely in your styleCenterText (which you did not post).
I created one, and adjusted the separator section Y value to accomodate the additional line...

Thank you, my friend. I will try this and see if it resolves the issue.

Aside: To attach items to your posts, use the ATTACHMENT tab below the input form to add files.

Ah, way down there! I was looking through all the tabs above the form! Thanks!

[eclectic-tech]

Glad to help... Welcome back!

[NickV]

So. . . I went through all of the code you posted. Could find only minor differences which were intentional and didn't seem to relate to the problem (i.e., changing the time and date format, things like that). The fact is, my current skin looks identical to the image you posted, other than those changes. But what I'm trying to accomplish is for the skin to extend only as far beyond the text, left and right, as it now extends up and down (I hope that makes sense)

Adjusting my "W="s any smaller than I currently have (100) truncates the text but does not effect the skin size. I hate to be a bother, and really, the skin itself doesn't matter so much. It's trying to understand what I'm doing wrong (or not doing) that's bothering me. At the risk of overstaying my welcome, I'm going to post the entire code, in case you have time, and can spot what's going on.

Code: Select all

; Lines starting ; (semicolons) are commented out.
; That is, they do not affect the code and are here for demonstration 

purposes only.
; ----------------------------------

[Rainmeter]
; This section contains general settings that can be used to change how 

Rainmeter behaves.
Update=1000
Background=#@#Background.png
; #@# is equal to Rainmeter\Skins\illustro\@Resources
BackgroundMode=3 
;BackgroundMode=5
BackgroundMargins=0,34,0,14

[Metadata]
; Contains basic information of the skin.
Name=Clock
Author=poiru
Information=Displays the current date and time.
License=Creative Commons BY-NC-SA 3.0
Version=1.0.0

[Variables]
; Variables declared here can be used later on between two # characters (e.g. 

#MyVariable#).
fontName=Trebuchet MS
textSize=9
colorBar=235,170,0,255
colorText=255,255,255,205

; ----------------------------------
; MEASURES return some kind of value
; ----------------------------------

[measureTime]
; This measure returns the time in a 24-hour format (i.e. HH:MM).*(changed to 

12H)*
Measure=Time
;Format=%#H:%M
Format=%I:%M %p
; For a 12-hour clock, change the Format option above to: %I:%M %p
; Refer to the Rainmeter manual for other format codes.

[measureDate]
; Returns the date as DD.MM.YYYY
Measure=Time
Format=%m.%d.%Y

[measureDay]
; Returns the current day
Measure=Time
Format=%A

; ----------------------------------
; STYLES are used to "centralize" options
; ----------------------------------

[styleTitle]
StringAlign=Center
StringCase=Upper
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,50
FontColor=#colorText#
FontFace=#fontName#
FontSize=12
AntiAlias=1
ClipString=1

[styleCenterText]
StringAlign=Center
; Meters using styleCenterText will be Center-aligned.
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleLeftText]
StringAlign=Left
; Meters using styleLeftText will be left-aligned.
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleRightText]
StringAlign=Right
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleSeperator]
SolidColor=255,255,255,15

; ----------------------------------
; METERS display images, text, bars, etc.
; ----------------------------------

[meterTitle]
Meter=String
MeterStyle=styleTitle
; Using MeterStyle=styleTitle will basically "copy" the
; contents of the [styleTitle] section here during runtime.
MeasureName=measureTime
X=100
Y=12
W=100
H=18
Text=%1
; %1 stands for the value of MeasureName (measureTime in this case).

[meterDay]
Meter=String
MeterStyle=styleCenterText
MeasureName=measureDay
X=100
Y=40
;W=100
H=14
Text=%1

[meterDate]
Meter=String
MeterStyle=styleCenterText
MeasureName=measureDate
X=100
Y=60
; r stands for relative. In this case, the Y postition of meterValueCPU is 0 

pixels
; below the Y value of the previous meter (i.e it's the same as in 

meterLabelCPU).
;W=100
H=14
Text=%1

[meterSeperator]
Meter=Image
MeterStyle=styleSeperator
X=10
Y=74
W=100
H=1

Here is what the skin looks like with this code:

rainmeter.clock.JPG

Thank you once again

[jsmorley]

The trouble is that you are using an image, which has some actual width and height, as the background of the entire skin.

Background=#@#Background.png

The size that that image actually is, in this case 210 X 68, is the minimum size the skin can ever be.

You are then using

BackgroundMode=3
BackgroundMargins=0,34,0,14

To cause the image to "scale" to the size of the skin as defined by it contents, using those margins to protect the areas you don't want to scale, the top "header" bit and the bottom "drop shadow" bit.

But understand, while the skin size, and thus that background, is going to scale to the "contents" of the skin, this not only includes the meters that are in it, but also that image itself you are using for the background. You can always make the skin "bigger" than that image, but you won't be able to make it "smaller" by defining the size of meters.

In order to make Background.png "smaller" than its original, actual size, you will need to create a new smaller version of it in some image editing software, which is pretty much what I said from the git-go...

210 X 68 is the minimum size a skin can be in the Illustro suite as it is...

I haven't fully tested, but you might be able to define the skin size specifically, using SkinWidth / SkinHeight in [Rainmeter], but I fear that is going to mess up those "margin" calculations, and I'm not sure how you would address that. It's not just a question of what those number should be, but if it would work right at all due to the "order" that things are evaluated and done in. I suspect that BackgroundMargins will always be done first, based on the original image.

I think the only alternative to creating a new image is to not use the skin "background" functionality, but change things to use Background.png as an actual Image meter, using ScaleMargins to still "protect" those areas from scaling. The trick is going to be having the size of that image properly "react" to the size of the rest of the skin contents. While you can use [SectionVariables] to define the width and height of the image, since it has to be "below", and thus "before", all other meters, you are going to be one update "behind" all the time. So like:

1) Set the size of the background meter to the size of the string meter
2) Set the size of the string meter

See the issue?

[NickV]

Well, JSMorley, you are right (or course) and that leaves me even more confused— because, as I mentioned in my original post, cropping the background.png was one of the first things I tried, and it didn't work. Perhaps I hadn't made all the proper width adjustments in the code, as that point, and so it was stretching my background? In that possible?

In the meantime, in tinkering with the image, trying to maintain its semi-transparency, I messed it up, and apparently had not saved a back-up copy, even though I thought I had. Is there somewhere I can download the file so I can try again?

[jsmorley]

Well, JSMorley, you are right (or course) and that leaves me even more confused— because, as I mentioned in my original post, cropping the background.png was one of the first things I tried, and it didn't work. Perhaps I hadn't made all the proper width adjustments in the code, as that point, and so it was stretching my background? In that possible?

In the meantime, in tinkering with the image, trying to maintain its semi-transparency, I messed it up, and apparently had not saved a back-up copy, even though I thought I had. Is there somewhere I can download the file so I can try again?

C:\Program Files\Rainmeter\Defaults\Skins\illustro\@Resources