+ Reply
Results 1 to 11 of 11

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: HTML Lockscreen help

is a discussion within the

Skinning / Themes Discussion

forums, a part of the

Design and Media For the iPhone / iPod Touch

section;
Hi, I've been playing around with this theme for quite awhile now, and since getting my iphone 4 it hasnt worked right. I'm no expert at HTML, but wondered what
...
  1. #1
    iPhone? More like MyPhone KingRedmer's Avatar
    Join Date
    Jul 2007
    Location
    Rochester Hills, MI
    Posts
    172
    Thanks
    32
    Thanked 10 Times in 9 Posts

    Default HTML Lockscreen help
    Hi, I've been playing around with this theme for quite awhile now, and since getting my iphone 4 it hasnt worked right. I'm no expert at HTML, but wondered what I could do to fix this, or if someone out there could tell me what I needed to add to get it to work.

    I have an HTML clock image with a transparent background, that I want to call whatever image is set through settings to be the background. When I do I get a really zoomed in background. I know its because my html is written for a non-retina device, but I dont know what to do to fix it.

    Please help. Attached are a wallpaper, an image of how my html renders it, and my theme.
    Attached Thumbnails Attached Thumbnails HTML Lockscreen help-photo-1-1-.jpg   HTML Lockscreen help-photo-2-1-.png  
    Attached Files Attached Files

  2. #2
    iPhone? More like MyPhone KingRedmer's Avatar
    Join Date
    Jul 2007
    Location
    Rochester Hills, MI
    Posts
    172
    Thanks
    32
    Thanked 10 Times in 9 Posts

    Bump

    I'm surprised at the lack of responses. Any suggestions would be appreciated.

  3. #3
    Green Apple
    Join Date
    May 2010
    Posts
    64
    Thanks
    26
    Thanked 29 Times in 22 Posts

    im very curious about this issue, my attempt to solve it is at the link below, ive never worked with retina devices so it may do nothing please keep me informed as to the actual solution (if one is found).

    MEGAUPLOAD - The leading online storage and file delivery service

  4. #4
    iPhone? More like MyPhone KingRedmer's Avatar
    Join Date
    Jul 2007
    Location
    Rochester Hills, MI
    Posts
    172
    Thanks
    32
    Thanked 10 Times in 9 Posts

    Sorry I didn't respond right away. I appreciate your effort, but got the same results with your edited version. A friend of mine mentioned that I might need to do a CSS overlay using the clock.png. Any ideas what that means?

  5. #5
    iPhone? More like MyPhone
    Join Date
    Mar 2008
    Posts
    270
    Thanks
    27
    Thanked 44 Times in 34 Posts

    Here is how you fix your problem.

    this will display the iPhone background only on firmwares 4.1 and bellow (4.2.1 you cant do it)

    Code:
    <html><head>
    <style>
    #Layer{width: 322px; height: 482px; position: absolute; top: -1px; right: 0px; down: 0px; left: -1px;}
    .stretch {width:100%; height:100%;}
    </style>
    <body>
    <table><td><div id="Layer"><img src="/private/var/mobile/Library/SpringBoard/HomeBackground.jpg" class="stretch"/></div></table></td>
    </body></html>
    Apple are Control freaks we need to stop them before they take over the world!!

  6. #6
    iPhone? More like MyPhone KingRedmer's Avatar
    Join Date
    Jul 2007
    Location
    Rochester Hills, MI
    Posts
    172
    Thanks
    32
    Thanked 10 Times in 9 Posts

    Thank you for replying. I run into the problem of not knowing how to integrate that code into my existing HTML code. Just pasting it in there leaves me a blank screen. Where should this go in my LockBackground.html file?

  7. #7
    desconocido
    Join Date
    Sep 2008
    Posts
    2,858
    Thanks
    2,864
    Thanked 24,878 Times in 2,435 Posts

    try this, this should fix it

    replace the image Wall.png for the one you want to show

    if you wanna display an image from your camera roll

    search this

    <div id="Layer"><img src="Wall.png" class="stretch"/></div>

    and replace with this

    <div id="Layer"><img src="/var/mobile/Library/SpringBoard/LockBackground.jpg" class="stretch"/></div>

  8. #8
    iPhone? More like MyPhone KingRedmer's Avatar
    Join Date
    Jul 2007
    Location
    Rochester Hills, MI
    Posts
    172
    Thanks
    32
    Thanked 10 Times in 9 Posts

    Thank you so much! This is almost exactly what I wanted. Only downside is the clock isn't positioned correct. Can I adjust it based on the old lockscreen.html or will the whole "stretch" thing mess that up?
    Again, great work and thanks soo much!
    Attached Thumbnails Attached Thumbnails HTML Lockscreen help-imageuploadedbymodmyi.jpg  

  9. #9
    desconocido
    Join Date
    Sep 2008
    Posts
    2,858
    Thanks
    2,864
    Thanked 24,878 Times in 2,435 Posts

    its easy .... open the HTML and replace yours with these lines


    Code:
    <style> 
    
    
    #Layer{width: 320px; height: 480px; position: absolute; top: 0px; right: 0px; down: 0px; left: 0px;} 
    #Layer1{width: 320px; height: 480px; position: absolute; top: 30px; right: 0px; down: 0px; left: 0px;} 
    
    .stretch {width:100%; height:100%;} 
    
    
    </style>
    
    <body> 
    
    <table><td> 
    
    
    <div id="Layer"><img src="Wall.png" class="stretch"/></div> 
    <div id="Layer1"><img src="Clock.png" class="stretch"/></div> 
    
    <style>


    if t Clock.png its not aligned still ... search this line and change the red value


    #Layer1{width: 320px; height: 480px; position: absolute; top: 30px; right: 0px; down: 0px; left: 0px;}


    -------------

  10. #10
    iPhone? More like MyPhone KingRedmer's Avatar
    Join Date
    Jul 2007
    Location
    Rochester Hills, MI
    Posts
    172
    Thanks
    32
    Thanked 10 Times in 9 Posts

    Thanks again for your reply. Am I right in saying that these changes adjust the layer with the gray bar on it? Because using your changes end up with the clock still offset, just higher (see pic). I wonder does the position of the actual clock need to change, and not just the background?
    Attached Thumbnails Attached Thumbnails HTML Lockscreen help-imageuploadedbymodmyi.jpg  

  11. #11
    iPhone? More like MyPhone KingRedmer's Avatar
    Join Date
    Jul 2007
    Location
    Rochester Hills, MI
    Posts
    172
    Thanks
    32
    Thanked 10 Times in 9 Posts

    Ok I think I have it figured. I had to add left: 0px to the clock and date as well as adjust their top positions. Thanks again for all your help. When I'm at a computer later I can upload the whole theme now that it's adjusted.
    Attached Thumbnails Attached Thumbnails HTML Lockscreen help-imageuploadedbymodmyi.jpg  

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts