InsaneJournal

Tweak says, "You are a people too"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-06-04 16:10:00

Current mood:	blah
Current music:	Ray Lamontagne - "How Come"
Entry tags:	layouts: media

Customizable iPhone 4 HTML Template

Live Examples

4:54
Saturday, June 4

AT&T 3G

4:54
Saturday, June 4

AT&T 3G

sender
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed.

The Code

just the background

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 230px x 160px image
- Replace YOUR:TIME with current phone time
- Replace YOUR DAY with current phone date
- Replace YOUR PROVIDER with provider name

full message

<lj-raw>
<div style="background:url('http://i.imgur.com/97DA5.jpg') no-repeat;height:427px;width:193px;">
<img src="YOUR_WALLPAPER_URL" style="width:160px;height:230px;margin:71px 0 0 16px;float:left;">
<img src="http://i.imgur.com/feei8.jpg" style="width:161px;height:242px;margin:-240px 0 0 15px;float:left;" />
<div style="color:#FFF;font-family:Franklin Gothic, Arial, sans-serif;font-size:28px;line-height:18px;text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -1px;margin:-220px 0 0 60px;float:left;text-align:center;">YOUR:TIME<br />
<span style="font-size:8px;text-shadow:none;">YOUR DAY</span></div>
<div style="color:#FFF;font-family:Franklin Gothic, Arial, sans-serif;font-weight:bold;font-size:8px;margin:-242px 0 0 35px;float:left;text-align:center;">YOUR PROVIDER</div>
<img src="http://i.imgur.com/ySotT.jpg" style="width:143px;height:69px;margin:-160px 0 0 25px;float:left;" />
<div style="color:#FFF;font-family:Franklin Gothic, Arial, sans-serif;font-size:10px;line-height:10px;text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -1px;height:32px;width:130px;margin:-156px 0 0 32px;float:left;text-align:center;overflow:auto;"><b>SENDER</b><br />
<span style="text-shadow:none;">MESSAGE</span></div>
<img src="http://i.imgur.com/PHHe3.jpg" style="width67:px;height:138px;margin:-243px 0 0 111px;float:left;" />
</div>
</lj-raw>

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 230px x 160px image
- Replace YOUR:TIME with current phone time
- Replace YOUR DAY with current phone date
- Replace YOUR PROVIDER with provider name
- Replace SENDER with sender's name
- Replace MESSAGE with message (length doesn't matter)
*Note: To see long message, you must highlight and scroll.

The Images

The Base

http://i.imgur.com/97DA5.jpg

The Top Overlay

http://i.imgur.com/PHHe3.jpg

The Slide Bar & Overlay

http://i.imgur.com/feei8.jpg

The Message Box

http://i.imgur.com/ySotT.jpg

Image Source

Questions/Feedback?
Leave a comment to this post. Thanks!

(Post a new comment)

	lobelia 2011-06-04 09:19 pm UTC (link)
	This is really rather marvellous. (Reply to this) (Thread)

	wastintime 2011-06-04 10:38 pm UTC (link)
	Thank you! :D (Reply to this) (Parent)

	bellwetherr 2011-06-05 10:47 pm UTC (link)
	Wow! Incredible! (Reply to this) (Thread)

	wastintime 2011-06-06 07:51 pm UTC (link)
	Thank you. :D (Reply to this) (Parent)

	lyricalemme 2011-06-06 06:45 pm UTC (link)
	I'm using it here as part of my CDJ. Thanks for the code :) (Reply to this) (Thread)

	wastintime 2011-06-06 07:52 pm UTC (link)
	That's so cute! :D (Reply to this) (Parent) (Thread)

	lyricalemme 2011-06-07 03:45 am UTC (link)
	Thanks! (Reply to this) (Parent)

	hammertech 2011-06-06 07:01 pm UTC (link)
	This? Is so amazing, jsyk. (Reply to this) (Thread)

	wastintime 2011-06-06 07:52 pm UTC (link)
	TY TY I blame the prettiness of the images. (Reply to this) (Parent)

take_the_hit
2011-06-17 04:27 am UTC (link)

Okay, so I've been toying with this, because while I think it's great, because it is totally great and amazing and thank you so much!, I wanted it a little different, but my html is failing it appears. I took out the side bar and overlay, doubled the base image size, rotated and cropped it for a larger image, set a permanent background (for my personal tastes this was easier), increased the message box size and the overlay size, however, now I can't get everything to line up right. *facepalm*

This is what I'm getting every time I try altering:

From: Dust
aushggaklssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaushggaklssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaushggaklssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssaushggaklssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

I know my overlays aren't aligned right but for the life of me I'm having a hard time getting them there. This was my closet attempt thus far. Obviously credit will go to you and I really sincerely hope you don't mind me using your work as a base. <3

(Reply to this)

	aleksander_bryn 2011-09-14 10:30 am UTC (link)
	Thanks! This and the other phone ones are just too amazing! (Reply to this)

	ronicav 2012-03-03 10:00 am UTC (link)
	love it but i have a question! how would i make it smaller? (Reply to this)

	pantiago 2012-03-24 07:36 pm UTC (link)
	is there anyway you could show us the same tutorial but with a white iphone? (Reply to this)

	pforparsnip 2012-07-05 01:13 am UTC (link)
	do you have the ability to make it with the text message template background instead of the image? Just curious (Reply to this)