+ Reply
Page 1 of 2 12 LastLast
Results 1 to 20 of 22

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


Thread: Help with HTML theme

is a discussion within the

Skinning / Themes Discussion

forums, a part of the

Design and Media For the iPhone / iPod Touch

section;
Hi, can anyone help me with my theme It currently calls up a 'black' background by default which overrides my wallpaper unless I place 'wallpaper.png' in the same folder, this
...
  1. #1
    iPhoneaholic metaljay's Avatar
    Join Date
    Nov 2007
    Location
    England
    Posts
    482
    Thanks
    26
    Thanked 27 Times in 26 Posts

    Default Help with HTML theme
    Hi, can anyone help me with my theme
    It currently calls up a 'black' background by default which overrides my wallpaper unless I place 'wallpaper.png' in the same folder, this is annoying as it overrides the apple wallpaper and changes the colour of the folder back ground to black

    Any ideas?

    Code:
    <html>
    <head><title>newclock</title></head>
    <style>
    
    
    * * SPAN#calendar*
    {
    * * * * font-family: Helvetica;*
    * * * * text-align: center;
    * * * * color: #ffffff;
    * * * * text-shadow: #000000 0px -1px opx;
    * * * * font-size: 18px;
    }
    * * * **
    </style>
    
    <script type="text/javascript">
    function init ( )
    {
    * timeDisplay = document.createTextNode ( "" );
    * document.getElementById("clock").appendChild ( timeDisplay );
    }
    
    
    function init3 ( )
    {
    * timeDisplay = document.createTextNode ( "" );
    * document.getElementById("calendar").appendChild ( timeDisplay );
    }
    
    function calendarDate ( )
    {
    * var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
    * var this_month_name_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December") * * *//predefine month names
    * **
    * var this_date_timestamp = new Date() * *
    
    * var this_weekday = this_date_timestamp.getDay() * *
    * var this_date = this_date_timestamp.getDate() * *
    * var this_month = this_date_timestamp.getMonth() * *
    
    * end = "th";
    * * * * if (this_date == 1 || this_date == 21 || this_date == 31) end = "st";
    * * * * if (this_date == 2 || this_date == 22) end = "nd";
    * * * * if (this_date == 3 || this_date == 23) end = "rd";
    
    * document.getElementById("calendar").firstChild.nodeValue = this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date + end //concat long date string
    }
    
    </script>
    </head>
    
    
    <body bgcolor="black" background="Wallpaper.png">
    <table style="position: absolute; top: 290px; left: 0px; width: 320px; height: 461px;" cellspacing="0" cellpadding="0" align="center">
    <tr align="center" valign="top" *border="0" cellpadding="0">
    * * <td style="padding-top:12px;" background="datewidget.png" height="60" valign="top">
    * * <span id="clock">
    * * * <script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span><span id="ampm">
    * * * * <script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>
    * * </span><br>
    * * * * <span id="calendar">
    * * * * <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
    * * * * </span>
    * * </td>
    </tr>
    <tr>
    * * <td align="center" valign="top">
    * * * * <span id="calendar">
    * * * * <script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
    * * * * </span>
    * * </td>
    </tr>
    </table>
    
    </body>
    </html>
    Thanks


    Like A Boss

  2. #2
    iPhoneaholic metaljay's Avatar
    Join Date
    Nov 2007
    Location
    England
    Posts
    482
    Thanks
    26
    Thanked 27 Times in 26 Posts

    Bump please


    Like A Boss

  3. #3
    iPhoneaholic metaljay's Avatar
    Join Date
    Nov 2007
    Location
    England
    Posts
    482
    Thanks
    26
    Thanked 27 Times in 26 Posts

    Bump anyone?

    It should be a small fix for a theme creator?


    Like A Boss

  4. #4
    Green Apple
    Join Date
    Feb 2009
    Posts
    96
    Thanks
    9
    Thanked 15 Times in 12 Posts

    have you tried

    <body bgcolor="transparent">

    (its been a while since i was heavy into iPhone theming.. getting back into it.)

  5. #5
    iPhoneaholic metaljay's Avatar
    Join Date
    Nov 2007
    Location
    England
    Posts
    482
    Thanks
    26
    Thanked 27 Times in 26 Posts

    Quote Originally Posted by StaticFX View Post
    have you tried

    <body bgcolor="transparent">

    (its been a while since i was heavy into iPhone theming.. getting back into it.)
    sadly no, just tried it.
    Any1 else have any ideas?


    Like A Boss

  6. #6
    Livin the iPhone Life BenderRodriguez's Avatar
    Join Date
    Apr 2008
    Location
    The Future
    Posts
    2,139
    Thanks
    108
    Thanked 239 Times in 197 Posts

    MTry creating a transparent png in photoshop for the background

    I have a degree in web page coding so if that doesn't work I'll see whats next

    This might work
    <body style="background-color:transparent;">

    And would run faster then loading a transparent image that it also has to stretch and manipulate to the right size
    Last edited by BenderRodriguez; 01-31-2012 at 09:19 AM.

  7. #7
    Green Apple
    Join Date
    Feb 2009
    Posts
    96
    Thanks
    9
    Thanked 15 Times in 12 Posts

    well.. you could also, just use the "User Background" in Winterboard... just check it and drag it above your theme

  8. #8
    My iPhone is a Part of Me
    Join Date
    Aug 2009
    Posts
    666
    Thanks
    325
    Thanked 2,140 Times in 490 Posts

    I would add another section to the <style> ....... </style> part
    body {
    background-color: transparent; #if transparent does not work try "none", but transparent should do it
    top: 0px;
    height: 480px;
    width: 320px;
    }

    and change the
    <body bgcolor="black" background="Wallpaper.png">
    to a simple <body> tag.

  9. #9
    Livin the iPhone Life BenderRodriguez's Avatar
    Join Date
    Apr 2008
    Location
    The Future
    Posts
    2,139
    Thanks
    108
    Thanked 239 Times in 197 Posts

    Quote Originally Posted by rasputin007 View Post
    I would add another section to the <style> ....... </style> part
    body {
    background-color: transparent; #if transparent does not work try "none", but transparent should do it
    top: 0px;
    height: 480px;
    width: 320px;
    }

    and change the
    <body bgcolor="black" background="Wallpaper.png">
    to a simple <body> tag.
    That would work to

  10. #10
    What's Jailbreak?
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    yes,it is.

  11. #11
    iPhoneaholic metaljay's Avatar
    Join Date
    Nov 2007
    Location
    England
    Posts
    482
    Thanks
    26
    Thanked 27 Times in 26 Posts

    Quote Originally Posted by rasputin007 View Post
    I would add another section to the <style> ....... </style> part
    body {
    background-color: transparent; #if transparent does not work try "none", but transparent should do it
    top: 0px;
    height: 480px;
    width: 320px;
    }

    and change the
    <body bgcolor="black" background="Wallpaper.png">
    to a simple <body> tag.
    I'm struggling to understand what you mean bro, can you just copy and paste the entire code above, then repaste your amendment


    Like A Boss

  12. #12
    My iPhone is a Part of Me
    Join Date
    Aug 2009
    Posts
    666
    Thanks
    325
    Thanked 2,140 Times in 490 Posts

    The top part of your html page, where the <style> tag are it should look like this

    <style>

    body {
    background-color: transparent;
    top: 0px;
    height: 480px;
    width: 320px;
    }
    * * SPAN#calendar*
    {
    * * * * font-family: Helvetica;*
    * * * * text-align: center;
    * * * * color: #ffffff;
    * * * * text-shadow: #000000 0px -1px opx;
    * * * * font-size: 18px;
    }
    * * * **
    </style>


    and change the

    </head>

    <body bgcolor="black" background="Wallpaper.png">
    <table style="position: absolute; top: 290px; left: 0px; width: 320px; height: 461px;" cellspacing="0" cellpadding="0" align="center">


    to

    </head>

    <body>
    <table style="position: absolute; top: 290px; left: 0px; width: 320px; height: 461px;" cellspacing="0" cellpadding="0" align="center">
    Last edited by rasputin007; 02-01-2012 at 04:07 AM.

  13. #13
    Livin the iPhone Life BenderRodriguez's Avatar
    Join Date
    Apr 2008
    Location
    The Future
    Posts
    2,139
    Thanks
    108
    Thanked 239 Times in 197 Posts

    <head>
    <style>
    body {
    background-color: transparent;
    top: 0px;
    height: 480px;
    width: 320px;
    }
    </style>
    </head>
    <body>

    You will probably have to write <JavaScript style or something> for the style I forget the exact line

  14. #14
    My iPhone is a Part of Me
    Join Date
    Aug 2009
    Posts
    666
    Thanks
    325
    Thanked 2,140 Times in 490 Posts

    No you don't need a css reference in the <head> part as this is already defined by the <style> </style> tags.
    You only need a css or javascript reference in the header if you need external css or js files, but if you use <style></style> tags for css and <script></script> tags for javascript in one html page then that is OK.

    EDIT:
    You could use

    <script type="text/javascript">

    "Your javascript here"

    </script>

    but it works with plain

    <script>

    "Your javascript here"

    </script>

    as well.
    Last edited by rasputin007; 02-01-2012 at 04:21 AM.

  15. #15
    Livin the iPhone Life BenderRodriguez's Avatar
    Join Date
    Apr 2008
    Location
    The Future
    Posts
    2,139
    Thanks
    108
    Thanked 239 Times in 197 Posts

    Quote Originally Posted by rasputin007 View Post
    No you don't need a css reference in the <head> part as this is already defined by the <style> </style> tags.
    You only need a css or javascript reference in the header if you need external css or js files, but if you use <style></style> tags for css and <script></script> tags for javascript in one html page then that is OK.

    EDIT:
    You could use

    <script type="text/javascript">

    "Your javascript here"

    </script>

    but it works with plain

    <script>

    "Your javascript here"

    </script>

    as well.
    Hmmm nice faster coding

  16. #16
    iPhoneaholic metaljay's Avatar
    Join Date
    Nov 2007
    Location
    England
    Posts
    482
    Thanks
    26
    Thanked 27 Times in 26 Posts

    your speaking spanish to me lol

    Can i be cheeky and ask you to edit the entire code and re paste it for me?
    Code:
    <html>
    <head><title>newclock</title></head>
    <style>
    
    
        SPAN#calendar 
    {
    	font-family: Helvetica; 
    	text-align: center;
    	color: #ffffff;
    	text-shadow: #000000 0px -1px opx;
    	font-size: 18px;
    }
    	
    </style>
    
    <script type="text/javascript">
    function init ( )
    {
      timeDisplay = document.createTextNode ( "" );
      document.getElementById("clock").appendChild ( timeDisplay );
    }
    
    
    function init3 ( )
    {
      timeDisplay = document.createTextNode ( "" );
      document.getElementById("calendar").appendChild ( timeDisplay );
    }
    
    function calendarDate ( )
    {
      var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
      var this_month_name_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December")	    //predefine month names
        
      var this_date_timestamp = new Date()	  
    
      var this_weekday = this_date_timestamp.getDay()    
      var this_date = this_date_timestamp.getDate()    
      var this_month = this_date_timestamp.getMonth()    
    
      end = "th";
    	if (this_date == 1 || this_date == 21 || this_date == 31) end = "st";
    	if (this_date == 2 || this_date == 22) end = "nd";
    	if (this_date == 3 || this_date == 23) end = "rd";
    
      document.getElementById("calendar").firstChild.nodeValue = this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date + end //concat long date string
    }
    
    </script>
    </head>
    
    
    <body bgcolor="black" background="Wallpaper.png">
    <table style="position: absolute; top: 290px; left: 0px; width: 320px; height: 461px;" cellspacing="0" cellpadding="0" align="center">
    <tr align="center" valign="top"  border="0" cellpadding="0">
        <td style="padding-top:12px;" background="datewidget.png" height="60" valign="top">
        <span id="clock">
          <script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span><span id="ampm">
    	<script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>
        </span><br>
    	<span id="calendar">
    	<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
    	</span>
        </td>
    </tr>
    <tr>
        <td align="center" valign="top">
    	<span id="calendar">
    	<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
    	</span>
        </td>
    </tr>
    </table>
    
    </body>
    </html>


    Like A Boss

  17. #17
    My iPhone is a Part of Me
    Join Date
    Aug 2009
    Posts
    666
    Thanks
    325
    Thanked 2,140 Times in 490 Posts

    OK, I have tried to add my suggestion and then post the code here, but I always end up with this fu***** security window, even when typing it correctly up comes the next effing window, so after gone through 3 windows without any progress, I thought screw that idea.
    So, then I thought I make a LockBackground.html and attach it and that when the trouble started.
    Your example code did nothing except creating a blank screen, after some search I saw that you had added some javascript into the table, which is inside the <body> tag, apart from that there was no initiation of the functions and no css code for amPM or clock, but yet your code referred to it.
    To cut it short I used an old LockBackground.html from an old theme and changed it to your layout, e.g. table size and position etc, as well as leaving in the "datewidget.png" as the table background.
    The only thing you have to do now is to change the font size and the font color. That you do in the SPAN#textTime for the clock, the SPAN#textDay for the weekday and SPAN#textDate for the date, all sections are at the top of the code.
    rgba (0,0,0,1.0) means red_green_blue_alpha (value of red [0 to 255],value of green[0 to 255], value of blue[0 to 255], transparency [0 to 1.0 -0 means full transparency and 1.0 means no transparency)
    You might want to reduce the font size as well.
    Just play around with it, at least that one works.

  18. The Following User Says Thank You to rasputin007 For This Useful Post:

    metaljay (02-01-2012)

  19. #18
    iPhoneaholic metaljay's Avatar
    Join Date
    Nov 2007
    Location
    England
    Posts
    482
    Thanks
    26
    Thanked 27 Times in 26 Posts

    I've changed the colours and font to how I prefer it, but what do I need to remove to get rid of the time widget?

    BUT, it doesn't work when I apply it via winter board, I get a glitchy screen that takes up the top half of the screen, then disappears to my wallpaper and the date/time is no where to be seen??

    Edit, renamed it too Wallpaper.html

    Now my springboard is Black (overrides my white wallpaper) and there is no date or time still
    When I open a folder, my wallpaper reappears

    Edit2 I've spent awhile playing with it, really above my head now
    Please please can you just add my font and size etc from my above code and upload that?
    Last edited by metaljay; 02-01-2012 at 03:51 PM.


    Like A Boss

  20. #19
    My iPhone is a Part of Me
    Join Date
    Aug 2009
    Posts
    666
    Thanks
    325
    Thanked 2,140 Times in 490 Posts

    OK, can do, but have to use the settings from the SPAN#calender as there are no others.
    If you do not want the time then delete the line
    <span id="textTime"></span><br> from inside the <table> tag. or set all alpha values of the SPAN#textTime to 0.0, e.g. rgba (0,0,0,0.0), which is full transparency.
    As I have taken the table position from your file, it is a bit confusing. First we declare the body as 320x480, then begin the table at 290 pixels from the top with a height of 461, so the table is partly outside the display as only the top 190 pixels are visible (290+190=480). But that is not too important.
    If the file is a LockBackground.html file then it will be displayed on the lockscreen, if it is a Wallpaper.html file it will be displayed as the wallpaper on the springboard. Wallpaper.html has a higher priority then a Wallpaper.png file, which means that the iPhone first looks if there is a Wallpaper.html file, if there is then it will not load the wallpaper.png file as the Springboard background. However the iPhone will use the the wallpaper you selected in Settings->Wallpaper as the wallpaper it shows, with some transparency, when you open a folder on the Springboard.
    If there is no Wallpaper.html file the iPhone will choose the Wallpaper.png in the Winterboard theme, if there is neither a Wallpaper.html nor a Wallpaper.png in the Winterboard theme folder then the iPhone will select the wallpaper you choose in Settings->Wallpaper.
    Because you had a Wallpaper.html the iPhone selected that as the Springboard background and because the background-color was set as transparent in that Wallpaper.html file you are left with the "default" iOS background color, which is black. That's why you see only a black background when you renamed the LockBackground.html to Wallpaper.html.
    If you wanted to use a background picture then you have to change the line
    background-color: transparent;
    to
    background-image:url("myPicture.png");
    and copy the background picture you want into the same Winterboard theme folder where the Wallpaper.html is and it needs to have the name myPicture.png.
    If you now copy Wallpaper.html and rename it to LockBackground.html then you will have the same look on the Lockscreen and the Springboard.

  21. #20
    My iPhone is a Part of Me
    Join Date
    Aug 2009
    Posts
    666
    Thanks
    325
    Thanked 2,140 Times in 490 Posts

    OK
    Attached is the theme, where I set the time color to full transparency, so you don't see it. I set the color of the weekday and the date to white with a font size of 18px and used the Helvetica font, just as it was in your original file.
    Next the transparent background. It does not work in iOS5, because of the reasons I mentioned in my previous post. The iPhone will not load the selected wallpaper/lockscreen wallpaper and the html pages, it only loads the html pages as they have a higher priority. The background is transparent but you see black as that is the "default" iOS color if there is no background, image or color, defined.
    So I have added a background image to both, a ls.jpg for the lockscreen and a wp.jpg for the wallpaper.
    Replace those files with what ever background image you want, but keep the file names the same (ls.jpg and wp.jpg).
    I have choosen to use jpg format as they are only 10% the size as if they were png files.
    The ls.jpg and wp.jpg are both 320x480 in size, but would also work on a retina display as the iPhone automatically adjusts html pages to fit the display. I used once a 800x1200 jpg picture as background for the LockBackground.html and it worked perfect on SD and HD display.
    I hope we are getting a bit closer to what you want.

  22. The Following User Says Thank You to rasputin007 For This Useful Post:

    metaljay (02-03-2012)

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