Results 1 to 15 of 15

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


Thread: iPhone 4 HTML lockscreens

  1. #1
    Default iPhone 4 HTML lockscreens
    I made an html lockscreen, and designed it to take advantage of the new 640x960 pixel screen, but when I applied it, the background image I chose was stretched, doubled in size, and you could only see the top left 320x480 pixels. The rest of the elements were stretched and if it was supposed to be in the middle, it would be half cut off, in on the right.

    I'm thinking winterboard needs an update. Anyone else have this problem?

  2. #2
    Yes Winterboard renders HTML using the old 320x480 resolution. The way I got around this was to theme the elements for 320x480 and for the background I found a neat little CSS trick. That way it will shrink down the background, and it still seems to be HD and not cutting any pixels out =).

    Code:
    	background-image:url("Background.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    I attached 2 images. One of my lockscreen totally unthemed using Apples way to apply the wallpaper, and my html wallpaper on a page.
    Attached Thumbnails Attached Thumbnails -img_0052-1-.png   -img_0053-1-.png  
    Last edited by Imrac; 08-19-2010 at 03:27 AM.

  3. The Following 2 Users Say Thank You to Imrac For This Useful Post:

    evilshade (08-28-2010), rest_easy (08-27-2010)

  4. #3
    Thanks a lot!

  5. #4
    Quote Originally Posted by Imrac View Post
    Yes Winterboard renders HTML using the old 320x480 resolution. The way I got around this was to theme the elements for 320x480 and for the background I found a neat little CSS trick. That way it will shrink down the background, and it still seems to be HD and not cutting any pixels out =).

    Code:
    	background-image:url("Background.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    I attached 2 images. One of my lockscreen totally unthemed using Apples way to apply the wallpaper, and my html wallpaper on a page.

    Where would you put the CSS code? Sorry, i'm a noob at this. Been trying to get the wallpaper to work with Lockscreen WN

  6. #5
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wallpaper.html/Lockscreen.html</title>
    <style type="text/css">
    body {
    	background-image:url("Wallpaper.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    	margin:0;
    	padding:0;
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    html document, name it either Lockscreen.html or Wallpaper.html

    Then add your Wallpaper.png to the same directory. These should both go in Library/Themes/xxxxxx.theme folder.

  7. The Following User Says Thank You to Imrac For This Useful Post:

    nekotron (09-13-2010)

  8. #6
    Quote Originally Posted by Imrac View Post
    Yes Winterboard renders HTML using the old 320x480 resolution. The way I got around this was to theme the elements for 320x480 and for the background I found a neat little CSS trick. That way it will shrink down the background, and it still seems to be HD and not cutting any pixels out =).

    Code:
    	background-image:url("Background.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    I attached 2 images. One of my lockscreen totally unthemed using Apples way to apply the wallpaper, and my html wallpaper on a page.

    This worked perfectly for me. I loved the weather theme I created, but I was disappointed I couldn't get a background to work with Retina's resolution. This worked very nicely.

    Calling one of the standard/seeded images works too.

    background-image:url("/private/var/stash/Wallpaper/iPhone/[email protected]");

    Thanks a bunch for a great workaround!

  9. #7

  10. The Following User Says Thank You to rest_easy For This Useful Post:

    Imrac (08-30-2010)

  11. #8
    Very awesome! Was hunting for that location =).

  12. #9
    Can you get HTML images in stock folder background.

  13. #10
    What's Jailbreak?
    Join Date
    Mar 2010
    Location
    35 minutes from Chicago
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Is there a variant of this that also works for the SMSBackground.png? I tried naming it SMSBackground.html, but it does nothing. The image is still enlarged and pixelated. Did I do something wrong? Though, the Wallpaper.html document worked like a charm.

  14. #11
    is there any way to do this to the status bar cause my Wifi bars are the same size as the Stock ones but they are Way bigger on the phone.

  15. #12
    What's Jailbreak?
    Join Date
    Mar 2010
    Location
    35 minutes from Chicago
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    If there is no way to get retina display resolution on the SMS background is there a way to change the file resolution of a file on the phone? I've been searching for an application that can see outside of the photo album and can't find one that can resize to the non-retina display (320x480) resolution.

  16. #13
    Default How to insert other theme css code into Lockscreen.html?
    Quote Originally Posted by Imrac View Post
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wallpaper.html/Lockscreen.html</title>
    <style type="text/css">
    body {
    	background-image:url("Wallpaper.png");
    	background-size: 320px 480px;
    	background-repeat:no-repeat;
    	margin:0;
    	padding:0;
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    html document, name it either Lockscreen.html or Wallpaper.html

    Then add your Wallpaper.png to the same directory. These should both go in Library/Themes/xxxxxx.theme folder.
    How to insert other theme codings into the Lockscreen.html?... for example i want to combine the Live Animated Weather with other theme for my lockscreen... I hv both important files, both of the Private folders and both of the lockscreen.html... I just dont know how to insert other theme codings into the other so that both of the theme will combined and executed simultaniously on the lockscreen...

    My themes which i want to combine is: LS Inspired lockscreen theme will function as the widget and the lockscreen background... And the 2nd theme is the UniAWv3 which is the live weather will be animating at the background of the lockscreen...

  17. #14
    Two years later.... Is Winterboard still incapable of displaying 640x960 Lockscreen Background via HTML?!?!

  18. #15
    What's Jailbreak? declanland's Avatar
    Join Date
    Sep 2009
    Location
    Church Warsop
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Quote Originally Posted by consultant1027 View Post
    Two years later.... Is Winterboard still incapable of displaying 640x960 Lockscreen Background via HTML?!?!
    Yes, just add:

    <style>
    body {
    background-image:url("Background.png");
    background-size: 320px 480px;
    background-repeat:no-repeat;
    }
    </style>

    into the header section of your HTML file. Just call it after you close the head (</head>). I'm not sure if Saurik has recently updated anything with Winterboard in terms of html changes. The CSS above is how I overcome the issue though.

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