InsaneJournal

Tweak says, "Tweak don't twerk."

Ashley (allrainydays) wrote in rp_tutorials,
@ 2012-10-27 16:08:00

Entry tags:

layouts: media, layouts: media: facebook

Facebook Timeline Profile
You know when you have one of those days where you just want to challenge yourself and see if you could maybe, possibly, pull it off? I had one of those on Monday. And obsessed. So, I give you, a new Facebook profile page, styled after Timeline and (hopefully) easy to follow.

Rules & Directions
» Images are on imgur and should be all right to be hotlinked, but if you want to upload them to your server, feel free!
» There are more history icons than shown!! Visit the imgur album to see the rest (wedding, break up, remodeling, new glasses, etc; 23 in total).
» Credit is not necessary, but if you could link them back to

allrainydays or

rp_tutorials so they know how to find it, that would be awesome.
» Let me know if you need any additional help with the modifications. I've tried to make it as easy to understand as possible, but don't hesitate to ask.
» Feel free to leave a link with your live example and I may feature it!

Example 1

<lj-raw>

<!-- Welcome to the Facebook Timeline character profile!  Credit is not necessary, but I would love you forever if you gave me credit (starrylites@IJ or starrylites@LJ) so other people know where to find it.

Image dimensions:
• Cover Photo is 880x325
• Profile Picture is 150x150
• Photos, Map, and Likes are 111x74
• All other images are square and can take 100x100 images or you can resize to the designated sizes

I have tried to put all changing content in CAPS so that it is easier for you to spot. Happy coding!-->

</div>
</div>

<div id="Name" style="font-weight: normal; color:#333333; font-size: 20px; font-weight: bold; font-family:Lucida Grande, tahoma, verdana, arial, sans-serif; position: relative; margin: 15px 0 0 205px; float: left;">
FIRST LAST
</div>
<br style="clear: both;">

<div id="Info_Box" style="width: 325px; height: 74px; background-color:#f1f3f8; border-style:solid; border-width: 1px 1px 1px 0; border-color:#c4cde0; position:relative; top: 25px; left: 0; float:left; -moz-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; font-size: 10px; font-weight: normal; color:#333333; line-height:14px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; ">
<div style="margin: 10px 10px 5px 30px;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/nYzmZ.png"></div>JOB TITLE at <span style="color:#3b5998;">PLACE OF EMPLOYMENT</span><br />
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/lW9Vn.png"></div>Studied EMPHASIS at <span style="color:#3b5998;">COLLEGE/UNIVERSITY</span><br />
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/hYTdc.png"></div>Lives in <span style="color:#3b5998;">CURRENT CITY</span><br />
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/fc54c.png"></div>From <span style="color:#3b5998;">HOMETOWN</span><br />
</div>
</div>

<div id="Friends" style="color:#3b5998; font-size:11px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; position:relative; top: 25px; margin: 0 0 0 35px; float:left;">
<div style="width:111px; height: 74px; border-style:solid; border-width: 1px; border-color:#C2C2C2; -moz-border-radius: 3px; border-radius: 3px; margin-bottom:5px;">
<img src="http://i.imgur.com/8audZ.png" style="width:37px; height:37px;"><img src="http://i.imgur.com/EVzpY.png" style="width:37px; height:37px;"><img src="http://i.imgur.com/8audZ.png" style="width:37px; height:37px;"><br />
<img src="http://i.imgur.com/EVzpY.png" style="width:37px; height:37px;"><img src="http://i.imgur.com/8audZ.png" style="width:37px; height:37px;"><img src="http://i.imgur.com/EVzpY.png" style="width:37px; height:37px;">
</div>
Friends <span style="color:#999999;">XXX</span>
</div>

<div id="Photos" style="color:#3b5998; font-size:11px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; position:relative; top: 25px; margin: 0 0 0 10px; float:left;">
<div style="width:111px; height: 74px; border-style:solid; border-width: 1px; border-color:#C2C2C2; -moz-border-radius: 3px; border-radius: 3px; margin-bottom:5px;">
<img src="http://i.imgur.com/d3lhR.png">
</div>
Photos <span style="color:#999999;" style="width:111px; height;74px;">XXX</span>
</div>

<div id="Likes" style="color:#3b5998; font-size:11px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; position:relative; top: 25px; margin: 0 0 0 10px; float:left;">
<div style="width:111px; height: 74px; border-style:solid; border-width: 1px; border-color:#C2C2C2; -moz-border-radius: 3px; border-radius: 3px; margin-bottom:5px;">
<img src="http://i.imgur.com/C9plv.png" style="width:111px; height;74px;">
</div>
Likes <span style="color:#999999;">XXX</span>
</div>

</div>

<div id="Likes_Container" style="width: 850px; background-color:#ffffff; border-style:solid; border-width:1px; border-color:#c4cde0; padding:15px 15px 15px 15px; margin:5px 10px 10px 5px; overflow: visible;  -moz-border-radius: 3px; border-radius: 3px;">
<div style="float: left; text-align: left;font-size: 16px; font-weight: bold; color:#333333; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin: 10px 0 25px 20px;">
Favorites
</div>
<br style="clear: both;">

<div style="float: left; text-align: left; vertical-align: top; width: 100px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 20px 0;">
Music
</div>

<div style="float: left; text-align: center; line-height: 11px; font-size: 11px; font-weight: normal; color:#3b5998; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 20px 0; width:90px;">
<img src="http://i.imgur.com/ZTbYb.png" style="width:90px; height:90px; padding-bottom:7px;"><br>
MUSIC 1
</div>

</div>

<div style="float:left;"><img src="http://i.imgur.com/9JLIJ.png"></div> Work and Education
</div>
<br style="clear: both;">

<div style="float: left; text-align: left; vertical-align: top; width: 75px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 20px 10px;">
Employers
</div>

<div style="float: left; margin: 0 10px 0 0;"><img src="http://i.imgur.com/a3dwC.png" style="width:50px; height:50px;">
</div><span style="font-weight: bold; color:#3b5998; line-height:15px;">PLACE OF EMPLOYMENT</span><br>
JOB TITLE • CITY, STATE<br>
MONTH to Present

<img style="margin: 20px 10px 20px 0; width:375px; height:1px;" src="http://i.imgur.com/I9HZX.png">
<div style="float: left; margin: 0 10px 0 0;"><img src="http://i.imgur.com/a3dwC.png" style="width:50px; height:50px;">
</div><span style="font-weight: bold; color:#3b5998; line-height:15px;">FORMER PLACE OF EMPLOYMENT</span><br>
JOB TITLE • CITY, STATE<br>
MONTH to MONTH

</div>
<br style="clear: both;">

<img style="margin: 0 0 10px 10px; width:480px; height:1px;" src="http://i.imgur.com/I9HZX.png">
<br style="clear: both;">
<div style="float: left; text-align: left; vertical-align: top; width: 75px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 20px 10px;">
College
</div>
<div style="width:400px; float: left; text-align: left; font-size: 11px; font-weight: normal; color:#808080; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 20px 0;">
<div style="float: left; margin: 0 10px 0 0;"><img src="http://i.imgur.com/yn7nK.png" style="width:50x; height:50px;"></div><span style="font-weight: bold; color:#3b5998; line-height:15px;">PLACE OF STUDY</span><br>
Class of DATE • DISCIPLINE<br>
CITY, STATE
</div>
<br style="clear: both;">

<img style="margin: 0 0 10px 10px; width:480px; height:1px;" src="http://i.imgur.com/I9HZX.png">
<br style="clear: both;">
<div style="float: left; text-align: left; vertical-align: top; width: 75px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 20px 10px;">
High<br>School
</div>
<div style="width:400px; float: left; text-align: left; font-size: 11px; font-weight: normal; color:#808080; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 20px 0;">
<div style="float: left; margin: 0 10px 0 0;"><img src="http://i.imgur.com/yn7nK.png" style="width:50x; height:50px;"></div><span style="font-weight: bold; color:#3b5998; line-height:15px;">PLACE OF STUDY</span><br>
Class of DATE<br>
CITY, STATE
</div>
<br style="clear: both;">

</div>

<div style="float: left; text-align: left;font-size: 16px; font-weight: bold; color:#333333; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin: 10px 0 25px 20px;">
<div style="float:left;"><img src="http://i.imgur.com/OEJF8.png"></div>
 Family
</div>
<br style="clear: both;">

<div style="float: left; margin:0 5px 20px 20px;"><img src="http://i.imgur.com/8audZ.png" style="width:90px; height:90px;"></div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#808080; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 20px 5px;"><span style="font-weight: bold; color:#3b5998; line-height:15px;">FIRST LAST</span><br>
Father<br>
</div>
<br style="clear: both;">

<div style="float: left; margin:0 5px 20px 20px;"><img src="http://i.imgur.com/EVzpY.png" style="width:90px; height:90px;"></div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#808080; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 20px 5px;"><span style="font-weight: bold; color:#3b5998; line-height:15px;">FIRST LAST</span><br>
Mother<br>
</div>
<br style="clear: both;">

<div style="float: left; margin:0 5px 20px 20px;"><img src="http://i.imgur.com/8audZ.png" style="width:90px; height:90px;"></div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#808080; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 20px 5px;"><span style="font-weight: bold; color:#3b5998; line-height:15px;">FIRST LAST</span><br>
Brother<br>
</div>
<br style="clear: both;">

<div style="float: left; margin:0 5px 20px 20px;"><img src="http://i.imgur.com/EVzpY.png" style="width:90px; height:90px;"></div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#808080; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 20px 5px;"><span style="font-weight: bold; color:#3b5998; line-height:15px;">FIRST LAST</span><br>
Sister<br>
</div>
<br style="clear: both;">

</div>

</div>

<div id="History_Container" style="background-color:#ffffff; border-style:solid; border-width:1px; border-color:#c4cde0; padding:15px 15px 40px 15px; overflow: visible; margin: 0 0 15px 0;  -moz-border-radius: 3px; border-radius: 3px;">

<div style="float: left; text-align: left; vertical-align: top; width: 40px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 5px 10px;">
DATE</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#3b5998; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 5px 0;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/tY1Vy.png"></div>
EDUCATION EVENT
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 40px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 5px 10px;">
DATE</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#3b5998; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 5px 0;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/QdNV2.png"></div>
RELATIONSHIP EVENT
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 40px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 5px 10px;">
DATE</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#3b5998; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 5px 0;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/QAE16.png"></div>
PET EVENT
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 40px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 5px 10px;">
DATE</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#3b5998; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 5px 0;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/465Ve.png"></div>
EMPLOYMENT EVENT
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 40px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 5px 10px;">
DATE</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#3b5998; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 5px 0;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/dURBc.png"></div>
MOVING EVENT
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 40px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 5px 10px;">
DATE</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#3b5998; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 5px 0;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/udiAj.png"></div>
WELLNESS EVENT
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 40px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 5px 10px;">
DATE</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#3b5998; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 5px 0;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/rv30b.png"></div>
GENERIC EVENT
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 40px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 0 5px 10px;">
DATE</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#3b5998; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 5px 0;">
<div style="float: left; margin: 0 5px 0 0;"><img src="http://i.imgur.com/b6X1P.png"></div>
BIRTHDATE
</div>

</div>

<div style="float: left; text-align: left; vertical-align: top; width: 105px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 0 5px 10px;">
Birthday</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#333333; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 10px 5px 0;">MONTH DAY, YEAR
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 105px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 0 5px 10px;">
Sex</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#333333; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 10px 5px 0;">FEMALE/MALE
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 105px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 0 5px 10px;">
Interested In</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#333333; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 10px 5px 0;">MEN/WOMEN
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 105px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 0 5px 10px;">
Relationship Status</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#333333; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 10px 5px 0;">STATUS
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 105px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 0 5px 10px;">
Languages</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#333333; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 10px 5px 0;"><span style="color:#3b5998; font-weight:bold;">LANGUAGE</span> and <span style="color:#3b5998; font-weight:bold;">LANGUAGE</span>
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 105px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 0 5px 10px;">
Religious Views</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#333333; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 10px 5px 0;"><span style="color:#3b5998; font-weight:bold;">AFFILIATION</span>
</div>

<div style="float: left; text-align: left; vertical-align: top; width: 105px; font-size: 11px; font-weight: bold; color:#999999; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 0 5px 10px;">
Political Views</div>
<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#333333; line-height:13px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:5px 10px 5px 0;"><span style="color:#3b5998; font-weight:bold;">AFFILIATION</span>
</div>

</div>

<div style="float: left; text-align: left;font-size: 16px; font-weight: bold; color:#333333; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin: 10px 0 25px 20px;">
Favorite Quotations
</div>
<br style="clear: both;">

<div style="float: left; text-align: left; font-size: 11px; font-weight: normal; color:#333333; line-height:15px; font-family:Lucida Grande,tahoma,verdana,arial,sans-serif; margin:0 10px 10px 10px;">
THIS IS JUST A TEXT BOX FOR YOU TO PLAY WITH TO YOUR HEART'S CONTENT. BE AWARE THAT BECAUSE THIS IS BEING DONE INSIDE AN [LJ-RAW] TAG THAT YOU MUST DO YOUR OWN CARRIAGE RETURNS AND OTHER AUTO-FORMATTING.
</div>
<br style="clear: both;">

</div>

</div>

</div>

</div>
</lj-raw>

	allrainydays 2012-10-28 07:28 am UTC (link)
	Ha, thanks? (Reply to this) (Parent) (Thread)

	timefortacos 2012-10-28 07:32 am UTC (link)
	Yes! This is AMAZING! (Reply to this) (Parent) (Thread)

	allrainydays 2012-10-28 07:36 am UTC (link)
	Aw, thank you! It was one of those true sense of accomplishment moments :D ha (Reply to this) (Parent)