As this is constantly asked, I will now try to explain how to edit the script (and which parts) for using my widgets on smaller devices than the iPhone 6+.

That does not describe the ’scaling method‘, but the right way to make the widgets to fit your device.

At first it’s good to know, that every script has the same base frame, its divided into 4 sections

<head part>
<style part>
<script part>
<body part>

 

Well, let us start ..  you open the html file with a text-editor and you will see at first the <head> part .. there is nothing to change 😉

<?xml version="1.0" encoding="ISO-8859-1"?>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta http-equiv="refresh" content="600; url=Wallpaper.html"/>
</head>

 

Then follows the <style> part. As first you see the part for clock, date etc. (there is for now nothing to change) and then follows the part for the weather .. there is a little bit to change ..

<!-- Style section Clock/Date-->
<style>

@font-face {
font-family: Default1;
src: url(Default1.otf);
}
body {
margin: 0;
}

SPAN#clock
{
font-family: Default1;
color: #363636;
// text-shadow: 1px 1px 1px #000;
font-size: 30px;
opacity: 0.9;
}

SPAN#ampm
{
display: none;
font-family: Helvetica;
font-weight: normal;
color: #fff;
font-size: 56px;
opacity: 0.4;
}

SPAN#date
{
// display: none;
color: #363636;
// text-shadow: 1px 1px 1px #000;
font-family: Default1;
text-transform: uppercase;
font-size: 20px;
opacity: 0.7;
}

<!---------------------------------------------------------------------------------------------------------------->

<!-- Style section Weather Widget-->

#WeatherContainer{
background-color: rgba(0,0,0,0);
}

#TextContainer{
font-size:25px;
font-family: Helvetica;
color:#000000;
}

#city{
position: absolute; top: 95px; right: 0px; down: 0px; left: 10px; width: 414px; height: 736px; <=there you have to enter your dimensions
display: none;
text-align: left;
font-family: Default1;
font-size: 26px;
// text-shadow: 1px 4px 4px rgba(0,0,0,0.5);
text-transform: uppercase;
color: #ffffff;
opacity: 0.5;
z-index: 1000;
}

#temp{
position: absolute; top: 434px; left: 0px; width: 414px; height: 736px; <=there you have to enter your dimensions
// display: none;
text-align: center;
font-family: Default1;
font-size: 20px;
// text-shadow: 0px 0px 10px #fff;
color: #363636;
z-index: 1000;
}

#hilo{
position: absolute; top: 25px; left: 10px; width: 414px; height: 736px; <=there you have to enter your dimensions
display: none;
text-align: left;
font-family: Default1;
font-size: 20px;
text-shadow: 1px 4px 4px rgba(0,0,0,0.5);
color: silver;
z-index: 1000;
}

#desc{
position: absolute; top: 457px; left: 58px; width: 414px; height: 736px; <=there you have to enter your dimensions
display: none;
text-align: left;
font-family: Helvetica;
font-size: 14px;
font-weight: bold;
padding-top:0px;
text-shadow: 1px 4px 4px rgba(0,0,0,0.5);
color: transparent;
}

#TextContainer p{
margin:0;
}

#weatherIcon{
position: absolute; top: 0px; left: -62px;
display: none;
width:445px;
z-index:500;
}

#weatherIcon1{
position: absolute; top: 409px; left: 187px;
// display: none;
width:40px;
z-index:1000;
}
</style>

 

Then comes the long script part .. I will not paste here, because there is nothing to change 😉

And nearly at the bottom of the script is the body part, there we have again a little bit to do ..

<!-- Display All - Weather-Clock-Date -->

<body bgcolor="Transparent" onload="init()">
<div>
<div id="WeatherContainer"> <div id="TextContainer"> <p id="city">Home</p> <p id="temp">&#176;</p> <p id="desc">NA</p> </div>
<img id="weatherIcon" src=""/> </div>
<img id="weatherIcon1" src=""/> </div>
<div id="hilo">hilo</div>

 

<table style="position: absolute; top: 360px; left: 0px; width: 414px; height: 736px; <=there you have to enter your dimensions z-index:1000; cellspacing="0" cellpadding="0">
<tr>
<td width="308" align="center" valign="top">
<span id="clock">
<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script>
</span>
</td>
</tr>
</table>

<table style="position: absolute; top: 360px; left: 50px; width: 414px; height: 736px; <=there you have to enter your dimensions cellspacing="0" cellpadding="0">
<tr>
<td width="308" align="center" valign="top">
<span id="ampm">
<script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script></span>
</tr>
</table>

<table style="position: absolute; top: 388px; left: 0px; width: 414px; height: 736px; <=there you have to enter your dimensions z-index:1000; cellspacing="0" cellpadding="0">
<td width="308" align="center" valign="top">
<span id="date">
<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script></span>
</td></table>

</body>
</html>

 

Now, the widget should be at least in the frame of your display. And now we can change the appearance .. the next step is to edit the positions of each part, that is not correctly displayed. That you do again at style part (for the weather) and body part (for clock and date).

With changing the px number at ‚top‘ you can move each thing up and down .. and with changing the px number at ‚left‘ you can move each thing more to the right or the left.

editing top = The higher the px number, the more to the bottom .. the lower the px, the more to the top.

editing left = The higher the px number, the more to the right .. the lower the px number, the more to the left.

for example the temperature ..

#temp{
position: absolute; top: 434px; left: 0px; width: (yours)px; height: (yours)px;
text-align: center;
font-family: Default1;
font-size: 20px;
// text-shadow: 0px 0px 10px #fff;
color: #363636;
z-index: 1000;
}

 

One more thing .. is one (or more) layer included (OverlayHD.png), then you have to change those sizes too ..

#Layer {
width: 414px; <=there you have to enter your dimensions
height: 736px; <=there you have to enter your dimensions
position: absolute;
top: 0px;
right: 0px;
down: 0px;
left: 0px;
z-index: 0;

}

.stretch {
width:100%;
height:100%;
}

 

I think ‚font-size‘ and ‚color‘ does not need an explanation .. and the weather icon you can change here ..

#weatherIcon1{
position: absolute; top: 409px; left: 187px; <= this is again the position
width:40px; <= that is the size of the weather icon
z-index:1000;
}

 

When the widget contains a second additionally widget (like the battery widget for example), then you go in that folder and look for another file (html or css). There you also have to edit every ‚height‘ and ‚width‘ .. maybe also the positions like already explained above.

I think that’s it and hopefully it helps .. give it a try 🙂

Mone
18. Februar 2015