hey,

i decided to make my own skin for rainlendar and i used the tutorial in the help section.
because i am really new to this it is just a simple design

now i have the problem, that i would like to make a skin based on images like the shadow4 skin. I would like to know how i can make a png with numbers and integrate them in the skin?

i would appreciate if you could explain it step by step so i can really learn the process and do it on my own in the future.

thanks in advance

greetz

Well, all you need to do is to create the image and define it as bitmapfont element in the <elements> section. Each character must take the same amount of space in the image so the height (or width depending which way you lay out the characters) must be equally dividable with the number of characters (e.g. if the image contains numbers from 0 to 9 and the height of one character is 20 pixels the total height of the image must be 200 pixels). You can first take one of the Shadow4's numbers pngs and use it in your skin and then start to modify it and see how things change.

thanks for the help...but its still not working...i think theres still a mistake somewhere.

i tried to integrate the numbers-large-white.png from the shadow4 skin to see if it is a problem with my image or the with the xml...when i use the shadow4 numbers this is my outcome



so i figured it there must be something wron in the skin file...if someone could what i would really appreciate it, because iam really new with this

<?xml version="1.0" encoding="UTF-8"?>
<skin version="1.0">
<elements>
<font id="font.normal" facename="Andalus" weight="bold" size="11" />
<font id="font.bold" facename="Andalus" weight="bold" size="15" />
<font id="font.small" facename="Andalus" size="10" />
<font id="font.tiny" facename="Andalus" weight="bold" size="9" />
<font id="font.smallb" facename="Andalus" weight="bold" size="10" />
<font id="font.tinyb" facename="Andalus" size="10" />
<bitmap id="bitmap.calendar.background" file="images/background.png" />
<bitmap id="bitmap.today.rectangle" file="images/Today-Rectangle.png" />
<bitmap id="bitmap.numbers.white" file="images/Numbers-Large-White.png" alphabet="0123456789:AP/-." separation="-12" />
</elements>

<window id="calendar" w="165" threshold="48" default="1">
<image id="calendar.background" element="bitmap.calendar.background" w="165" h="165" />
<image id="calendar.edge" element="color.edge" x="0" y="0" w="165" h="170" />
<month id="calendar.month" element="font.bold" color="255, 255, 255" x="82" y="0" w="125" align="TOP-CENTER" showmonth="%Visible_month%" />
<year id="calendar.year" element="font.small" origin="TOP-RIGHT" x="-10" y="165" align="BOTTOM-RIGHT" showmonth="%Visible_month%" />
<calendar id="calendar.calendar" x="5" y="25" w="160" h="120" layout="GRID" >
<days>
<appearance layer="0" priority="-1" element="bitmap.numbers.white" align="CENTER" />
</days>
<weekends>
<appearance layer="0" priority="0" element="font.normal" color="160, 0, 55" align="CENTER" />
</weekends>
<exdays>
<appearance priority="-1" element="font.normal" color="128, 128, 128" align="CENTER" />
</exdays>
<exweekends>
<appearance priority="-1" element="font.normal" color="100, 0, 0" align="CENTER" />
</exweekends>
<today>
<appearance layer="10" element="bitmap.today.rectangle" align="CENTER" />
</today>
<events>
<appearance layer="0" priority="100" element="font.normal" color="0, 148, 255" align="CENTER"/>
</events>
<weekdays abreviate="1">
<appearance element="font.tiny" color="255, 255, 255" align="CENTER" />
</weekdays>
</calendar>
</window>

<window id="Event List" w="165" threshold="48" default="1">
<image id="Event List.background" element="bitmap.calendar.background" origin1="TOP-LEFT" x1="0" y1="0" origin2="BOTTOM-RIGHT" x2="0" y2="0" minsizefromimage="0" />
<text id="Event List.header" element="font.bold" x="5" y="5" align="TOP-LEFT" text="Termine" />
<eventlist id="Event List.eventlist" origin1="TOP-LEFT" x1="10" y1="30" origin2="BOTTOM-RIGHT" x2="-10" y2="-10">
<header>
<appearance element="font.tinyb" color="255, 255, 255" align="TOP-LEFT" />
</header>
<item>
<appearance element="font.tinyb" color="0, 148, 255" align="TOP-LEFT" />
</item>
<separator id="Event List.separator" padding="0, 1, 0, 0" />
</eventlist>
</window>

<window id="Todo List" w="165" threshold="48" default="1">
<image id="Todo List.background" element="bitmap.calendar.background" origin1="TOP-LEFT" x1="0" y1="0" origin2="BOTTOM-RIGHT" x2="0" y2="0" minsizefromimage="0" />
<text id="Todo List.header" element="font.bold" x="5" y="5" align="TOP-LEFT" text="Aufgaben" />
<todolist id="Todo List.todolist" origin1="TOP-LEFT" x1="10" y1="30" origin2="BOTTOM-RIGHT" x2="-10" y2="-10">
<header>
<appearance element="font.tinyb" color="255, 255, 255" align="TOP-LEFT" />
</header>
<item>
<appearance element="font.tinyb" color="255, 255, 255" align="TOP-LEFT" />
</item>
<separator id="Todo List.separator" padding="0, 1, 0, 0" />
</todolist>
</window>

</skin>

You need to use the <bitmapfont ...> tag instead just <bitmap ...>.

thanks a lot for the fast help...it works now...i couldn't figure it out

there is a another thing id like to know...do you have an advice on how to make the numbers image so that each number is 20x20 on 20x320 canvas?
iam using paint.net and maybe there is a plugin or maybe another tool which is able to give each number the same space in an image automatically.

thanks in advance

I'm not too familiar with Paint.net but at least in Photoshop it's possible to define the vertical distance for the lines so you can just set the alignment to center, enter the numbers on top of each other and crop the image to the correct size.