Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Lockscreen: LockMS - Rough Draft Release

UCLAKoolman said:
It's cool to see some of the changes you all are implementing to the LockMS theme, but it seems to me you're sucking most of the beauty out of the original design
Click to expand...

Agreed, I don't like the ugly Times New Roman font and awkward layout. Can you guys just start another thread? There are many duplicate threads in MacRumors anyways :p
 
tablo13 said:
Agreed, I don't like the ugly Times New Roman font and awkward layout.
Click to expand...
I thought the point was that it was easily changed to whatever font/size/location you wanted. Also, I like the fact that many people on this thread are coding for the first time in their life (at least that's the impression I get).
 
Question.

Just installed this from Cydia. Can't seem to get the green slide to unlock icon to disappear, any ideas?

Also, it says 05:33 PM. Any way to remove the 0.
 
silentsim said:
Question.

Just installed this from Cydia. Can't seem to get the green slide to unlock icon to disappear, any ideas?

Also, it says 05:33 PM. Any way to remove the 0.
Click to expand...
Get i4 Invisible Slider from Cydia.

To remove the leading zero, you'll need to play around with the code. Look at "LockBackground.html" in the theme's folder.
 
dgstan said:
Get i4 Invisible Slider from Cydia.

To remove the leading zero, you'll need to play around with the code. Look at "LockBackground.html" in the theme's folder.
Click to expand...

Cheers. One more thing. There seems to be a black backdrop over the date, and it seems to cut off around where the time is displayed. Any way to fix this? I will post an image shortly.
4921305635_e82cae9895_b.jpg


if you see here it ends around the beginning of the 5:37 time so it makes the date seem less colorful then it should. anyone know what that is??

Edit: Also, i tried changing my lock wallpaper, and it Winterboard have checkmarked User lockscreen wallpaper.

But it is still showing it in a black background. am i doing something wrong?
 
dgstan said:
I thought the point was that it was easily changed to whatever font/size/location you wanted. Also, I like the fact that many people on this thread are coding for the first time in their life (at least that's the impression I get).
Click to expand...
Where would I start to change out the font to the one I ported in to the rest of my phone? Thanks in advance. I am new at this, as is probably obvious from my question.
 
silentsim said:
Cheers. One more thing. There seems to be a black backdrop over the date, and it seems to cut off around where the time is displayed. Any way to fix this? I will post an image shortly.
4921305635_e82cae9895_b.jpg


if you see here it ends around the beginning of the 5:37 time so it makes the date seem less colorful then it should. anyone know what that is??

Edit: Also, i tried changing my lock wallpaper, and it Winterboard have checkmarked User lockscreen wallpaper.

But it is still showing it in a black background. am i doing something wrong?
Click to expand...

I believe it's lockinfo. Go into lockinfo settings and change the transparency on the lockscreen.
 
think i'm happy

though i think adding a drop shadow to the time in photoshop might be a good idea..
 

Attachments

  • IMG_0001[1].PNG
    IMG_0001[1].PNG
    773.4 KB · Views: 102
Hey everyone! Here's my lockscreen:

YFVgt.png


I have 2 questions: 1st, how do I reverse the positioning of the icon and the city text? Here's is my CSS (I don't know CSS, hacked the positioning together by trial and error):

/* Inspired by 'Jimmy' of the MacThemes forums */

#WeatherContainer{
opacity: 1;
margin-top: 0px;
width: 100%;
background-color: INVISIBLE;
color: white;
}

#TextContainer{
float: right;
padding: 5px 5px 5px 10px;
margin: 10 10px 0 0px;
font-family: Helvetica, sans-serif;
font-size: medium;
text-shadow: rgba(0,0,0,0.7) 0 0 2px;
}

#city{
text-transform: capitalize;
font-weight: bold;
}

#TextContainer p{
padding: 0;
margin: 0;
}

#desc{
text-transform: capitalize;
display: none;
}

#weatherIcon{
height: 64px;
width: 64px;
float: right;
border: none;
padding: 5px 5px 5px 10px;
margin: 0 0px 0 10px;
}
Click to expand...

My 2nd question: Sometimes I notice that the weather app is loading the weather, and I end up with a box where the icon should be. Is there a way to get the program to keep the last weather history in memory, and then only when it gets newer info to update it instead of having a blank icon? Thanks!
 
nguyenvn said:
I believe it's lockinfo. Go into lockinfo settings and change the transparency on the lockscreen.
Click to expand...

you nailed it! set transparency to 0 and it looks better now. Now i just don't know how to change the lock screen wallpaper..then I am done! any ideas? I have a PNG file.

edit: figured it out :D

I have lockinfo set to hide stuff with empty notifications so this is my final result (using a wallpaper graciously posted here!)

4921993832_f989e6aec6_b.jpg
 
Bigwaved said:
Where would I start to change out the font to the one I ported in to the rest of my phone? Thanks in advance. I am new at this, as is probably obvious from my question.
Click to expand...
SSH into the phone and go to /Library/Themes/LockMS.theme

In there you'll find an html file called LockBackground.html. Open that up and you'll see most of the definitions for the elements that make up the lockscreen.

You should see a line like this:
font-family:"American Typewriter Condensed";
That controls the font used. Edit it to whatever font you would like. You'll also see lines that define the locations (left: / top:) and other attributes. Play around with it and have fun.

PS - I use WinSCP to shell into the phone. I edit the files right on the phone so I don't have to copy files back and forth.
 
dgstan said:
SSH into the phone and go to /Library/Themes/LockMS.theme

In there you'll find an html file called LockBackground.html. Open that up and you'll see most of the definitions for the elements that make up the lockscreen.

You should see a line like this:
font-family:"American Typewriter Condensed";
That controls the font used. Edit it to whatever font you would like. You'll also see lines that define the locations (left: / top:) and other attributes. Play around with it and have fun.

PS - I use WinSCP to shell into the phone. I edit the files right on the phone so I don't have to copy files back and forth.
Click to expand...
Thank you. I will give it a shot. I will have to use Cyberduck though. ;) Have the fun of JBing is learning about this stuff.
 
dgstan said:
SSH into the phone and go to /Library/Themes/LockMS.theme

In there you'll find an html file called LockBackground.html. Open that up and you'll see most of the definitions for the elements that make up the lockscreen.

You should see a line like this:
font-family:"American Typewriter Condensed";
That controls the font used. Edit it to whatever font you would like. You'll also see lines that define the locations (left: / top:) and other attributes. Play around with it and have fun.

PS - I use WinSCP to shell into the phone. I edit the files right on the phone so I don't have to copy files back and forth.
Click to expand...
Sorry to be an idiot, but when I select edit in Cyberduck, it opens a tab in Firefox that shows the widget working, not any code. I do not know how to selct a different way to edit, so I will need to search around to figure that out prior to being able to change the font to "Aubry" from iPhoneRuler.
 
silentsim said:
you nailed it! set transparency to 0 and it looks better now. Now i just don't know how to change the lock screen wallpaper..then I am done! any ideas? I have a PNG file.

edit: figured it out :D

I have lockinfo set to hide stuff with empty notifications so this is my final result (using a wallpaper graciously posted here!)

4921993832_f989e6aec6_b.jpg
Click to expand...

You can still keep transparency just don't set it to fullscreen. Cells and Headers is fine.
 
Bigwaved said:
Sorry to be an idiot, but when I select edit in Cyberduck, it opens a tab in Firefox that shows the widget working, not any code. I do not know how to selct a different way to edit, so I will need to search around to figure that out prior to being able to change the font to "Aubry" from iPhoneRuler.
Click to expand...
Still no luck with this. I manged to view the code, but I could not edit it. does anyone using cyberduck care to teach me a bit or point me in the right direction?
 
Bigwaved said:
Still no luck with this. I manged to view the code, but I could not edit it. does anyone using cyberduck care to teach me a bit or point me in the right direction?
Click to expand...

drag the file to your desktop and edit the file with text wrangler. when finished editing, copy it back to the theme folder.
 
When downloading this theme through cydia is it possible to change your background without SSH? I am new to themes and winterboard.
 
Thanks OP!

After some rearrangements here and there along with some inspirations from other posters in the thread, I've finally found a lock-theme that will tide me over until more dedicated retina themes are released.

I shrank the text a bit and reorganized it so it wouldn't conflict with Lockinfo.

I think it suits my home screen quite nice too :)
Once the orange version of sunny-side is out, it'll be a great match.


IMG_01801.png
 
UCLAKoolman said:
It's cool to see some of the changes you all are implementing to the LockMS theme, but it seems to me you're sucking most of the beauty out of the original design
Click to expand...

Maccleduff said:
Agreed. The font in LockMS2 is just terrible imo and looks really dated (maybe that's just me tho :p)

On the other hand the seconds implementation is pretty cool, how can I add that to the original LockMS?
Click to expand...

I hear what you guys are saying. I agree. The resulting themes thus far from the branched off version aren't stellar.

However, from the standpoint of a coder, the rewritten code(with bits and fragments used from existing code) that I've done offers much more flexibility in the ability to mold this theme. The original design was based on images. Thus, when swapping for a new look, one must re-create all the images in the new style, which in my humbly opinion is a PAIN. The version that I've created outputs entirely in text form(except for the weather icon... which is... well a picture...). This enables for font change at a change of a single line of CSS code... or if you so chose, have EACH letter a different type of font and positioned precisely where you want it in any orientation on the screen--the flexibility is THAT much.

I'm a terribad at designing. ^^ I can't design if my life depends on it. I simply offer to you guys an easier(in my opinion) method to create themes and was hoping people would pick it up and spit out all sorts of interesting creations since tweaking the theme isn't so tedious.

At the moment, fontSwap isn't working and there aren't that many fonts available on the iOS4, but I'm keeping my eyes on this site: http://www.iphoneruler.net/tag/iphone4

Hopefully, we'll get nicer fonts that are compatible for iphone4.

Also, I did not mean to "thread-jack" or steal this design/theme... Thus, what I created is not LockMS2... I simply frankenstein it into another form. All credit goes to the original creator. I simply... ride on his idea.:eek:

So if you know CSS, get crackin'. The code layout is very self explanatory.

EDIT: Also noteworthy is the rewritten weather script I've done is very stable. I've been using it since... I finished converting it. Haven't crapped out on me once. Unlocking the phone and then immediately locking it to view the lock screen again will still properly load the weather.(it consistently crapped out on me before.)
 
weemanpow3 said:
Fixed, and it now fills in the zero if single digit. Use this HTML code instead. Example picture below.

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: 265px 0 0 0;
			height: 480px;
			width: 320px;
			background-image: url(Private/Background.png);
			background-size: 61%;}
	</style>
</head>
<body>
<base href="Private"/>
<div style="position:relative; font-size:50px; z-index:2;">

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

<script type="text/javascript">

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();
</script>
</div>
<div style="position:absolute; top:126px; left:6px; font-family: Verdana; margin:auto; color:#61bee5; font-size:50px; z-index:1;">
  <script language="JavaScript" type="text/javascript">
mymonth=new Date();
mymonth=mymonth.getMonth()+1;
if (mymonth==1){document.write("JANUARY");}
else if (mymonth==2){document.write("FEBRUARY");}
else if (mymonth==3){document.write("MARCH");}
else if (mymonth==4){document.write("APRIL");}
else if (mymonth==5){document.write("MAY");}
else if (mymonth==6){document.write("JUNE");}
else if (mymonth==7){document.write("JULY");}
else if (mymonth==8){document.write("AUGUST");}
else if (mymonth==9){document.write("SEPTEMBER");}
else if (mymonth==10){document.write("OCTOBER");}
else if (mymonth==11){document.write("NOVEMBER");}
else if (mymonth==12){document.write("DECEMBER");}
</script>
</div>

<div style="position:absolute; top:181px; left:128px; color:#ffdc92; font-family: Verdana; font-weight:lighter; font-size:25px; z-index:3; width:100;">
<script>
day = new Date();
day = day.getDay();
arday = new Array("SUNDAY", "MONDAY", "TUESDAY", "WEDNESSDAY", "THURSDAY", "FRIDAY", "SATURDAY");
document.write("" + arday[day] + "");
</SCRIPT>
</div>

<div style="position:absolute; top:158px; left:3px; font-family: Helvetica Neue; color:#FFFFFF; font-size:115px; font-weight:lighter; z-index:4; width:100;">
<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:197px; left:143px; color:#9dfa99; font-family: Helvetica Neue; font-size:68px; font-weight:lighter; z-index:10; width:100;">
<script language="JavaScript" type="text/javascript">
<!-- date
myDate=new Date(); 
myDate=myDate.getFullYear(); 
if (myDate==2010){document.write("2010");}
else if (myDate==2011){document.write("2011");}
else if (myDate==2012){document.write("2012");}
else if (myDate==2013){document.write("2013");}
else if (myDate==2014){document.write("2014");}
else if (myDate==2015){document.write("2015");}
document.close()
</script> 
</div>

</body></html>
Click to expand...

Will this make the time image fit the screen like in the thumbnail you attached? I'd prefer to keep the off the screen look of the original theme, but have the single digit dates have "0" before them. If this code will do just that, then nevermind!

Edit: I figured out which part of this code to add to the theme I like. Thanks for the work you put into this. I changed the font to Arial to blend in better with the time

Result:
20d46fc6.jpg
 
i cant get the dzendeh weather widget to work
-i download the zip
-changed 'Defiance, Ohio' to 'Boynton Beach, Florida'
-ssh to /private/var/stash/Themes
-activated it on winterboard and respringed

im new to iphones
any ideas?
 
As am example of what we can achieve with a simple style sheet and moving the component clusters around:

img0188.png


You can go from the clunky layout I had before to this stylistic(maybe?) layout.

SkyFlakes: I'm not sure why the original weather code posted by dzendeh is not working sometimes. Though, I've rewritten it and it's very stable for me at least. You can obtain the new script inside this theme I made: http://www.mediafire.com/?0keeym30v08ze04

Though it's not the same as the original posted theme, so you may not be able to just merge the two...
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back