InsaneJournal

Tweak says, "Idiot-to-English translator"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-06-03 22:55:00

Current mood:	chipper
Current music:	Carrie Underwood - Don't Forget To Remember Me
Entry tags:	layouts: media

Customizable Droid HTML Template

Live Examples

10:41 AM

10:41 AM

Kris Allen

Yesterday, 5:36 PM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec libero velit, id viverra metus. Nullam pretium quam at nisl porta rhoncus. Praesent et cursus dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec libero velit, id viverra metus. Nullam pretium quam at nisl porta rhoncus. Praesent et cursus dui.

The Code

just the background

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 228px x 160px image
- Replace YOUR:TIME AM/PM with current phone time

full message

<lj-raw>
<div style="background:url('http://i.imgur.com/ltZxo.png') no-repeat;height:406px;width:209px;">
<img src="YOUR_WALLPAPER_URL" style="width:160px;height:228px;margin:70px 0 0 20px;float:left;" />
<img src="http://i.imgur.com/zurMb.png" style="width:149px;height:166px;margin:-224px 0 0 25px;float:left;">
<img src="http://i.imgur.com/UKg1H.png" style="width:161px;height:27px;margin:-20px 0 0 20px;float:left;" />
<div style="color:#FFF;font-family:Franklin Gothic, Arial, sans-serif;font-weight:bold;font-size:7px;margin:-246px 0 0 142px;float:left;">YOUR:TIME AM/PM</div>
<div style="color:#000;font-family:Franklin Gothic, Arial, sans-serif;font-weight:bold;font-size:10px;margin:-204px 0 0 34px;float:left;">SENDER'S NAME</div>
<div style="color:#000;font-family:Franklin Gothic, Arial, sans-serif;font-size:7px;margin:-194px 0 0 34px;float:left;">MESSAGE DAY, MESSAGE:TIME AM/PM</div>
<img src="http://i.imgur.com/lJsAA.png" style="width:31px;height:31px;margin:-208px 0 0 136px;float:left;">
<img src="MESSAGE_ICON_URL" style="width:25px;height:25px;margin:-205px 0 0 139px;float:left;">
<div style="color:#000;font-family:Franklin Gothic, Arial, sans-serif;font-size:8px;margin:-172px 0 0 33px;float:left;height:50px;width:135px;text-align:justify;overflow:auto;">YOUR MESSAGE</div>
<img src="http://i.imgur.com/bTgXV.png" style="width:104px;height:286px;margin:-276px 0 0 10px;float:left;" />
</div>
</lj-raw>

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 228px x 160px image
- Replace YOUR:TIME AM/PM with current phone time
- Replace SENDER'S NAME with name of sender
- Replace MESSAGE DAY, MESSAGE:TIME AM/PM with day and time of message
- Replace MESSAGE_ICON_URL with URL of a square image
- Replace MESSAGE with message (length doesn't matter)

The Images

The Base

http://i.imgur.com/ltZxo.png

The Overlay

http://i.imgur.com/bTgXV.png

The Bottom Bar

http://i.imgur.com/UKg1H.png

The Message Back

http://i.imgur.com/zurMb.png

The Icon Border

http://i.imgur.com/lJsAA.png

Image Source

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

	lobelia 2011-06-04 09:22 pm UTC (link)
	THIS ONE, too. I literally squeaked (quite embarrassingly!) when I saw that there were more than one. Brilliant, and such! (Reply to this) (Thread)

	wastintime 2011-06-04 10:37 pm UTC (link)
	:D! Thanks! I had a lot of fun tinkering around and making them. (Reply to this) (Parent)

	shedaisy 2011-10-22 07:33 pm UTC (link)
	Is there anyway to make them smaller? As much as I've toyed with these sometimes always ends up being bigger than the rest! (Reply to this)