InsaneJournal

Tweak says, "Just my allergies."

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!

	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)