InsaneJournal

Tweak says, "I can take my shirt off..."

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!

	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)