Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Lockscreen: LockMS - Rough Draft Release
- Thread starter mschindelh
- Start date
- Sort by reaction score
nice weather theme!!! IM LOVIN IT!!! PROPZ TO ALL THE DEVELOPERS!!
Can I make this one clock top and weather bottom?
Too bad, the iPhone does not know the font-family: Helvetica Neue 
I have changed all the text, except for the time, but the year just looks awful. I like the very thin design best, so I will stick with the images, for now.
Here is my complete solution for LockBackground.html:
I have changed all the text, except for the time, but the year just looks awful. I like the very thin design best, so I will stick with the images, for now.
Here is my complete solution for LockBackground.html:
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: none;
margin: 0;
padding: 20px 0 0 0;
height: 480px;
width: 320px;
// background-image: url("Private/4all/images/wallpaper/Background.png");
background-image: url("/private/var/mobile/Library/SpringBoard/LockBackground.jpg");
background-size: 61%;
}
</style>
<script type="text/javascript" src="Private/configureMe.js"></script>
<script type="text/javascript" src="Private/weather/Wallpaper.js"></script>
</head>
<body onload="onLoad()">
<base href="Private"/>
<div id="WeatherContainer">
<div id="TextContainer">
<p id="city">Loading...</p>
<p id="temp">3º</p>
<p id="desc">-</p>
</div>
<img id="weatherIcon" src=""/>
</div>
<div style="position:relative; font-size:50px; z-index:2;">
<table id="TimeContainer">
<td height="40" border="0">
<img src="Private/images/time/8.png" name="hr1" width="80" height="105" heigth="69"><img
src="Private/images/time/dgb.gif" name="b1" width="2" heigth="69"><img
src="Private/images/time/8.png" name="hr2" width="80" height="105" heigth="69"><img
src="Private/images/time/dgc.gif" name="c" width="40" height="85" heigth="69"><img
src="Private/images/time/8.png" name="mn1" width="80" height="105" heigth="69"><img
src="Private/images/time/dgb.gif" name="b2" width="2" heigth="69"><img
src="Private/images/time/8.png" name="mn2" width="80" height="105" heigth="69">
</td>
</table>
<script type="text/javascript">
/* time --------- START --------- */
function dotime(){
theTime = setTimeout('dotime()', 1000);
d = new Date();
hr = d.getHours() + 100;
mn = d.getMinutes() + 100;
se = d.getSeconds() + 100;
if (twentyFourHourClock){
document.c.src = "Private/4all/images/time/24.png";
}
else{
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);}
if (am_pm=='am'){document.c.src = "Private/4all//images/time/AM.png";}
else if(am_pm=='pm'){document.c.src = "Private/4all/images/time/PM.png";}
}
tot='' + hr + mn + se;
document.hr1.src = "Private/4all/images/time/" + tot.substring(1, 2) + ".png";
document.hr2.src = "Private/4all/images/time/" + tot.substring(2, 3) + ".png";
document.mn1.src = "Private/4all/images/time/" + tot.substring(4, 5) + ".png";
document.mn2.src = "Private/4all/images/time/" + tot.substring(5, 6) + ".png";
}
dotime();
/* time --------- END --------- */
</script>
</div>
<!-- <div style="position:absolute; top:320px; left:9px; color:red; font-size:80px; z-index:1; width:100;"> -->
<div style="position:absolute; top:303px; left:15px; font-family:Helvetica Neue; margin:auto; font-weight:lighter; color:#61bee5; font-size:70px; z-index:1;">
<script language="JavaScript" type="text/javascript">
/* month --------- START --------- */
numMonth=new Date();
numMonth=numMonth.getMonth();
if (language == "de"){
arMonth = new Array("JANUAR", "FEBRUAR", "MÄRZ", "APRIL", "MAI", "JUNI", "JULI", "AUGUST", "SEPTEMBER", "OKTOBER", "NOVEMBER", "DEZEMBER");
}
else if (language == "en"){
arMonth = new Array("JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER");
}
document.write(arMonth[numMonth]);
/* month --------- END --------- */
</script>
</div>
<div style="position:absolute; top:225px; left:130px; font-family:Helvetica Neue; margin:auto; color:#ffdc92; font-size:35px; font-weight:400; z-index:3;">
<script>
/* day of the week --------- START --------- */
day = new Date();
day = day.getDay();
// arday = new Array("Sun.png", "Mon.png", "Tue.png", "Wed.png", "Thu.png", "Fri.png", "Sat.png");
// document.write("<img width=230 src='Private/" +language + "/images/day/" + arday[day] + "'>");
if (language == "de"){
arDay = new Array("SONNTAG", "MONTAG", "DIENSTAG", "MITTWOCH", "DONNERSTAG", "FREITAG", "SAMSTAG");
}
else if (language == "en"){
arDay = new Array("SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY");
}
document.write(arDay[day]);
/* day of the week --------- END --------- */
</script>
</div>
<div style="position:absolute; top:200px; left:-6px; color:red; font-size:80px; z-index:4; width:100;">
<script language="javascript">
/* day --------- START --------- */
var picture='';
myday = new Date();
myday = myday.getDate();
if (myday < 10){
preDay = "0";
}
else{
preDay = "";
}
picture="<span style='font-family: Helvetica Neue; font-size: 90pt; color: #FFFFFF;'>" + preDay + myday + "</span>"
document.write(picture);
/* day --------- END --------- */
</script>
</div>
<div style="position:absolute; top:246px; left:140px; font-family:Helvetica Neue; margin:auto; color:#d6d6d6; font-size:70px; font-weight:100; z-index:4;">
<script language="JavaScript" type="text/javascript">
/* year --------- START --------- */
myDate = new Date();
myDate = myDate.getFullYear() - 2010;
arYear = new Array("2010", "2011", "2012", "2013", "2014", "2015", "2016");
document.write(arYear[myDate]);
document.close();
/* year --------- END --------- */
</script>
</div>
</body></html>If you think to change the put the whole block of date&time on top and the weather on the bottom, yes, why not
I will come up with a solution, but not tonight
I'll get back to you tomorrow and make a switch/style for that.
You just need to edit your favorite css-style-file. They are called 'originalBubble', 'myopia', 'iconOnly' and 'split'. The last one is activated by default in the "configureMe.js"-file. So open "split.css" and play with the position and size of the icon.
Code:
#weatherIcon{
height:128px;
width:128px;
float:right;
border:none;
padding: 0px 0px 5px 10px;
margin: 0 0px 0 10px;
}change the height and width accordingly, e.g. 64px; for half the size.
If you think to change the put the whole block of date&time on top and the weather on the bottom, yes, why not
I will come up with a solution, but not tonight
You need to Change the position number for each element that you want to move. For eg: For time to move up or down, you need to change top variable in this line: "position: absolute; top: -220px; left: 6px; width: 320px; height: 461px;"
To move it down, you need to change top: -220px to -210px or wherever you want to move; that means you need to play around this setting for each element until you find where you wanna place.
heres the screenshot for my lockscreen...
Attachments
for those of you who changed the pics to text, are you finding it loads quicker? mine takes a few seconds to load if my screen has been off for a while and my lock keypad comes up... weather takes even longer
also someone asked before and i didn't see an answer, is there a way to edit the background of the lockscreen when your passcode comes up? it does look pretty bad with all the text behind the numbers.
is there anyway to have your passcode screen come up AFTER you slide to unlock? so no matter what i can always see my lockscreen without having to type in the password?
thanks!!
also someone asked before and i didn't see an answer, is there a way to edit the background of the lockscreen when your passcode comes up? it does look pretty bad with all the text behind the numbers.
is there anyway to have your passcode screen come up AFTER you slide to unlock? so no matter what i can always see my lockscreen without having to type in the password?
thanks!!
how did you change the color of the year? are you using text instead of the images? i thought someone said you couldn't get the real thin year or something with text...
Just opened the images with gimp and changed the color. So I have separate themes upped for different Year colors.
i just changed the string "Sync in Progress" to " syncing". now, when i sync, the words are not over the city name (your mileage may vary, my city is "Brooklyn"). but the idea works...
so i just did this, but now my Date converted back to being slightly cut off by the lockinfo. where do i change it back now? i have lockinfo at the bottom half.
or is there a way to add that weather fix to the bottom and still have the invisible slider, since i wont use lockinfo on top of the lockms with weather
After much futzing around, here's what I ended up with. Decided to ditch LockInfo altogether (except for the slider lock). I'll probably play around with the colors and size of the month text, but it'll work for now...
Thanks for all the hard work guys!
Just noticed an error I am having with this theme and biteSMS.
When I receive a text and the screen lights up, I have the >> arrow image displaying with "slide to view" text showing (almost like slide to unlock). If I let the screen go off, and then turn it on again, the biteSMS pop up is still there but the "slide to view" is now gone.
Is there a way to remove the "slide to view" completely so if I'm actually at my phone receiving text messages that I won't see it?
When I receive a text and the screen lights up, I have the >> arrow image displaying with "slide to view" text showing (almost like slide to unlock). If I let the screen go off, and then turn it on again, the biteSMS pop up is still there but the "slide to view" is now gone.
Is there a way to remove the "slide to view" completely so if I'm actually at my phone receiving text messages that I won't see it?
You need to go to the biteSMS app and within that, go into your language folder, open bitesms.strings, find the slide to view string and remove everything between the quotes, leaving slide to view = ""
Thanks for the suggestion, didn't know biteSMS had its own set of strings. I edited the file and searched for "slide to view" and removed every instance of it in the entire file and it still displays on my lockscreen. Sigh.
did you do the same thing with the Springboard.springs file in the Springboard app in Core Services (in System/Library)?
Nice job adding to the evolution of this theme! So glad to see the background.png issue solved.
Now we just need to render the date with html instead of using graphics.
After much futzing around, here's what I ended up with. Decided to ditch LockInfo altogether (except for the slider lock). I'll probably play around with the colors and size of the month text, but it'll work for now...
Thanks for all the hard work guys!
how did you get it to look like this?
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?
another bitesms issue, since i installed this lockscreen bite's quickreply when my phone is locked is not working. it just shows the normal sms alert. any ideas? Edit: it's working properly now.. not sure what changed...
also anyone having any issues with the weather part not showing correct graphic? its nighttime here, and its mostly showing the moon, but occasional it'll show the sun ?? (this is after loading)
also anyone having any issues with the weather part not showing correct graphic? its nighttime here, and its mostly showing the moon, but occasional it'll show the sun ?? (this is after loading)