Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
For those that want the background of the lockscreen to be defined on the phone through the Wallpaper Menu, and to able to change it without having to ssh in new backgrounds and rename things and what not, change your LockBackground.html to this under the <style> section (obviously properly indented and all:

Code:
background-image: url(/private/var/mobile/Library/SpringBoard/LockBackground.jpg);

Now when you change your lockscreen background in Settings -> General -> Wallpaper, the lockscreen background will change. (Note: Requires a respring for the wallpaper to change, i'm trying to find a way to get it to refresh when you wake the phone, don't know if its possible.

My next thing is to work out how to display new SMS/Missed Calls/New Email on the lockscreen using HTML/css/js.... anyone want to point me in the right direction?

i've tried changing background url to your tip but i can't seem to get it to work. i still get a black bg even after respring. anyone having the same issue?
 
You can get the theme with the weather-widget included from here: LockMS_Weather.theme
To install, unzip it and copy the theme-file(s)/directory (LockMS_Weather.theme) into /private/var/stash/Themes on your iPhone 4; you need Winterboard from the Cydia-Store to activate it.

First of all many thanks to all of you. I used the WeatherWidget.theme from Adam Watkins (special thanks to you) and I did the implementation for this project.

I tried to clean up (No offense. Still, there is much place for further improvement) and simplified the code as much as possible.

choosing your language:
In the theme, you'll find the "configureMe.js" file, where you can edit the language (bottom line). Currently there only are two languages supported: english "en" and german "de". You will find the images in the corresponding folders (under "Private").

Be sure to set the suitable value for the twentyFourHourClock.

choosing your weather:
Use the locale variable in "configureMe.js" to set your location, isCelsius should be known.

There are several themes/styles ('originalBubble', 'myopia', 'iconOnly' and 'split'). I adapted most of them. You need to adjust the other ones, if want to try them out. Make sure to set the appropriate values for #TimeContainer in the corresponding css-files. Be sure to try out the different iconSets (new sets highly appreciated).


Knock yourselves out,

daze

--------------------
Edit 100819_2044:
- added temperature sign-C or F
- further simplified the selections
- added 0-prefix (zero) for single-digit days


good job, is there a way to add email widget to this to show new emails on the lockscreen?
 
what is the code again to change the size of the date? its slightly covering my infolock
 
how did you get it to look like this?
Are you talking about the size and location of the elements? Just go edit the "LockBackground.html" file until it looks the way you want it to.

I've read every entry in this thread, but they're all starting to meld together. How did you get the time on the bottom and the date/day info on top?
Like I said, I futzed around with the "LockBackground.html" file. I'm not an HTML programmer, but have done my share of C and C-Shell (along with some esoteric software-specific languages). I have no problem hacking around and making it work. I used WinSCP to tunnel in and edit the file right on the phone. Just play with it. It's rather simple. Remember to keep a backup in case you screw up. Also, a Respring is required to see your changes.

Here's the a copy of my final version so you can see what I modified.

Code:
<?xml version="1.0" encoding="utf-8"?>
<html><head>
    <base href="Private"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style>
	body {
	background-color: #000000;
	margin: 0;
	padding: 620px 0 0 0;
	height: 960px;
	width: 640px;
       background-size: 61%;
       background-image: url(/private/var/mobile/Library/SpringBoard/LockBackground.jpg);
	}
	</style>
</head>
<body>
<base href="Private"/>
<div style="position:relative; font-size:50px; z-index:2;">

<table style="position: absolute; top: -470px; left: 0px; width: 320px; height: 50px;" cellspacing="" cellpadding="" align="center">
<td height="40" border="0">
<img src="Private/dg8.gif" name="hr1" width="68" height="105" heigth="69"><img 
src="Private/dgb.gif" name="b1" width="2" heigth="29"><img 
src="Private/8.png" name="hr2" width="68" height="105" heigth="69"><img 
src="Private/dgc.gif" name="c" width="35" height="85" heigth="69"><img 
src="Private/8.png" name="mn1" width="68" height="105" heigth="69"><img 
src="Private/dgb.gif" name="b2" width="2" heigth="69"><img 
src="Private/8.png" name="mn2" width="68" height="105" heigth="69"></td>
</table>

<script type="text/javascript"><!-- start

dg0 = new Image();dg0.src="Private/0.png";
dg1 = new Image();dg1.src="Private/1.png";
dg2 = new Image();dg2.src="Private/2.png";
dg3 = new Image();dg3.src="Private/3.png";
dg4 = new Image();dg4.src="Private/4.png";
dg5 = new Image();dg5.src="Private/5.png";
dg6 = new Image();dg6.src="Private/6.png";
dg7 = new Image();dg7.src="Private/7.png";
dg8 = new Image();dg8.src="Private/8.png";
dg9 = new Image();dg9.src="Private/9.png";
dgc = new Image();dgc.src="Private/dgc.gif";
dgz = new Image();dgz.src="Private/dgz.gif";
dgb = new Image();dgb.src="Private/dgb.gif";


function dotime(){ 
theTime=setTimeout('dotime()',1000);
d = new Date();
hr = d.getHours()+100;
mn = d.getMinutes()+100;
se = d.getSeconds()+100;
if(hr==100){hr=112;am_pm='am';}
else if(hr<112){am_pm='am';}
else if(hr==112){am_pm='pm';}
else if(hr>112){am_pm='pm';hr=(hr-12);}
tot=''+hr+mn+se;

if (am_pm=='am'){document.c.src = 'Private/AM.png';}
else if(am_pm=='pm'){document.c.src = 'Private/PM.png';}
document.hr1.src = 'Private/'+tot.substring(1,2)+'.png';
document.hr2.src = 'Private/'+tot.substring(2,3)+'.png';
document.mn1.src = 'Private/'+tot.substring(4,5)+'.png';
document.mn2.src = 'Private/'+tot.substring(5,6)+'.png';
}

dotime();
//end -->
</script>
</div>
<div style="position:absolute; top:100px; left:12px; color:red; font-size:80px; z-index:1; width:100;">
  <script language="JavaScript" type="text/javascript">
<!--
mymonth=new Date();
mymonth=mymonth.getMonth()+1;
if (mymonth==1){document.write("<img width=420 src=Private/January.png>");
}
else if (mymonth==2){document.write("<img width=420 src=Private/February.png>");
}
else if (mymonth==3){document.write("<img width=420 src=Private/March.png>");
}
else if (mymonth==4){document.write("<img width=420 src=Private/April.png>");
}
else if (mymonth==5){document.write("<img width=420 src=Private/May.png>");
}
else if (mymonth==6){document.write("<img width=420 src=Private/June.png>");
}
else if (mymonth==7){document.write("<img width=420 src=Private/July.png>");
}
else if (mymonth==8){document.write("<img width=420 src=Private/August.png>");
}
else if (mymonth==9){document.write("<img width=420 src=Private/September.png>");
}
else if (mymonth==10){document.write("<img width=420 src=Private/October.png>");
}
else if (mymonth==11){document.write("<img width=420 src=Private/November.png>");
}
else if (mymonth==12){document.write("<img width=420 src=Private/December.png>");
}
if (mymonth==10 && mydate==31){document.write("<img width=auto src=holiday/hallowen.bmp>");
}

//-->
</script>
</div>

<div style="position:absolute; top:21px; left:130px; color:red; font-size:80px; z-index:3; width:100;">
<script>
day = new Date();
day = day.getDay();
arday = new Array("Private/Sunday.png", "Private/Monday.png", "Private/Tuesday.png", 
"Private/Wednesday.png", "Private/Thursday.png", "Private/Friday.png", "Private/Saturday.png");

document.write("<img width=230 src='" + arday[day] + "'>");
// End -->
</SCRIPT>
</div>

<div style="position:absolute; top:-9px; left:3px; font-family: Helvetica Neue; color:#FFFFFF; font-size:110px; font-weight:lighter; z-index:4; width:110;">
<script language="javascript"> 

myday=new Date(); 
myday=myday.getDate(); 
if (myday==01){document.write("01");}
else if (myday==02){document.write("02");}
else if (myday==03){document.write("03");}
else if (myday==04){document.write("04");}
else if (myday==05){document.write("05");}
else if (myday==06){document.write("06");}
else if (myday==07){document.write("07");}
else if (myday==08){document.write("08");}
else if (myday==09){document.write("09");}
else if (myday==10){document.write("10");}
else if (myday==11){document.write("11");}
else if (myday==12){document.write("12");}
else if (myday==13){document.write("13");}
else if (myday==14){document.write("14");}
else if (myday==15){document.write("15");}
else if (myday==16){document.write("16");}
else if (myday==17){document.write("17");}
else if (myday==18){document.write("18");}
else if (myday==19){document.write("19");}
else if (myday==20){document.write("20");}
else if (myday==21){document.write("21");}
else if (myday==22){document.write("22");}
else if (myday==23){document.write("23");}
else if (myday==24){document.write("24");}
else if (myday==25){document.write("25");}
else if (myday==26){document.write("26");}
else if (myday==27){document.write("27");}
else if (myday==28){document.write("28");}
else if (myday==29){document.write("29");}
else if (myday==30){document.write("30");}
else if (myday==31){document.write("31");}
document.close()

</script>
</div>

<div style="position:absolute; top:46px; left:130px; color:red; font-size:80px; z-index:10; width:100;">
<script language="JavaScript" type="text/javascript">
<!-- date
myDate=new Date(); 
myDate=myDate.getFullYear(); 
if (myDate==2010){document.write("<img width=170 src=Private/2010.png>");
}
else if (myDate==2011){document.write("<img width=170 src=Private/2011.png>");
}
else if (myDate==2012){document.write("<img width=170 src=Private/2012.png>");
}
else if (myDate==2013){document.write("<img src=Private/2010.png>");
}
else if (myDate==2014){document.write("<img src=Private/2010.png>");
}
else if (myDate==2015){document.write("<img src=Private/2010.png>");
}
document.close()
//--> 
</script> 

</div>

</div>

</body></html>
 
Does anyone here know how I can get my password keypad (which pops up after tap-to-unlock) to be invisible? So I'd tap, and nothing would happen, then I'd punch in, for example, four taps in the lower right corner (for 9).

Is this possible?
 
I found a nice freeware .png editor called "Paint.net". Using it, I went through all the months and normalized their sizes so they all take up the same amount of space on the screen. I made the short ones longer and the long ones shorter.

2jaexon.png
 
Thanks to all those who have kept editing this great theme. I've just got to figure out a way to get dgstan's layout in the text format that weemanpow3 posted earlier.

@dgstan any chance you could upload your background picture please?
 
Ok i downloaded the zip file and I was able to drag and drop it and it's showing in winterboard but not letting me use it. It's at the top of winterboard. Was I supposed to drag the zip file or unzip it??
 
Ok i downloaded the zip file and I was able to drag and drop it and it's showing in winterboard but not letting me use it. It's at the top of winterboard. Was I supposed to drag the zip file or unzip it??

unzip it :) then copy the whole .theme-folder
 
New release: LockMS_Weather

change log:
Edit 100820_1215:
- new stylesheets for different layout 'original', 'timetop' and 'datetop' (look inside the configureMe.js file)
- new switch showWeather to turn weather information on (true) or off (false)
- new switch doMostlyText to turn text-mode on (true) or off (false) - I still like the graphical display better
- further code-optimization
 
are you asking how to change f to c?

it's in the configureMe.js file...

where it says: var isCelsius = false change the false to true to display celsius

No. I have done that. What I am seeking advice on is the actual 'C' or 'F' that is supposed to appear after the temp digits like 21 C.

Thanks.
 
Maybe this is a stupid question, but is it possible to get this with the weather on top, the date/time right underneath, and then the regular (stock) sliders at the bottom?
 
Maybe this is a stupid question, but is it possible to get this with the weather on top, the date/time right underneath, and then the regular (stock) sliders at the bottom?

It is now the default style, you only need to remove the folder called "Bundles". Get the theme from here: LockMS_Weather
 
There was a comment somewhere earlier in the thread regarding lockscreen notifications for unread messages, missed calls etc.

Does anybody know if this is possible with iOS4? Statusnotifier used to have a URL exposed locally that lockscreens would hit (port 16336 I think) to determine unread messages.

I read somewhere that the statusnotifier fix fixed the issue but I think all it did was uninstall statusnotifier and install Reminder and libstatusbar.

Any ideas?

Edit: Forgot to say, this is an amazing LockScreen and a great effort by everybody. Really love how this all came together.
 
It is now the default style, you only need to remove the folder called "Bundles". Get the theme from here: LockMS_Weather

Thank you for the reply. I just tried the latest version and the position is great, but the individual elements (time/date/etc) are reversed. I guess what I'd love is an Original, centered style. Basically where the time is at the bottom, just above the stock slider. Is that possible?
 
is there a fix to show the charging screen when plugged in? I really never noticed that it didn't show up until yesterday and as small of an annoyance it is, its still kinda handy to show the charging status especially if you dont use the battery percentage in the task bar
 
Does anyone know if there's such thing as a iPhone emulator?
Would be really handy
Something I could use to test out any changes to my lockscreen.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.