InsaneJournal

Tweak says, "long and hard hours"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-06-13 21:59:00

Current mood:	accomplished
Current music:	Kris Allen - Alright With Me
Entry tags:	coding: other, images: backgrounds, layouts: family tree, resources: fandom specific

Family Tapestries

Live Example

House of de Witt
Erwin de Witt + Viona Romijnsen

1

9

4

7

M

U

G

G

L

E

Werner Erwin
muggle b.1951

+
m.1980

Johanna Vinter
muggle

Gerda Johanna
muggle b.1983

Johannes Werner
muggle b.1972

Leif Erwin
muggle b.1978

Belise Viona
witch b.1954

+
m.1982

Jude Wickham
pureblood

Astrid Viona
witch b.1975

Lars Erwin
wizard b.1981

Heidi Jan
witch b.1960

return to top

The Code (for the above example)

<lj-raw>
<div style="width:100%;font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;font-size:12px;color:#1e1c17;">
<div style="background:url('http://i.imgur.com/V1C0e.png');border:2px dashed #776e62;padding:10px;margin-bottom:10px;">
<div style="text-align:center;color:#5e574c;font-weight:bold;"><div style="margin-bottom:20px"><span style="font-size:24px;font-weight:bold;letter-spacing:4px;text-transform:uppercase;">House of de Witt</span><br />
<span style="font-size:16px;letter-spacing:2px;">Erwin de Witt + Viona Romijnsen</span><br /></div>
<div style="height:100%;font-size:24px;float:left;margin-right:20px;">1<br /><br />9<br /><br />4<br /><br />7</div>
<div style="height:100%;font-size:24px;float:right;margin-left:20px;">M<br /><br />U<br /><br />G<br /><br />G<br /><br />L<br /><br />E</div>
</div>
<div style="min-height:350px;">
<div style="width:320px;min-height:275px;margin:0 10px 10px 0;display:inline-block;">
<div style="min-height:140px;margin:0 10px 5px 0;float:left;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_werner.png" style="height:100px;width:100px;border:4px inset #5e574c;"><br />
<b>Werner <i>Erwin</i></b><br />
muggle b.1951</div>
<div style="margin:40px 10px 0 0;float:left;">+<br />m.1980</div>
<div style="min-height:145px;margin:2px 10px 5px 0;float:left;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_johanna.png" style="height:100px;width:100px;"><br />
<b>Johanna</b> Vinter<br />
<i>muggle</i></div>
<div style="min-height:150px;">
<div style="min-width:145px;float:left;text-align:left;margin:0 4px 4px 0;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_gerda.png" style="width:50px;height:50px;border:2px inset #5e574c;margin-right:4px;float:left"> <b>Gerda <i>Johanna</i></b><br />muggle b.1983</div>
<div style="min-width:145px;float:left;text-align:left;margin:0 4px 4px 0;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_johannes.png" style="width:50px;height:50px;border:2px inset #5e574c;margin-right:4px;float:left"> <b>Johannes <i>Werner</i></b><br />muggle b.1972</div>
<div style="min-width:145px;float:left;text-align:left;margin:0 4px 4px 0;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_leif.png" style="width:50px;height:50px;border:2px inset #5e574c;margin-right:4px;float:left"> <b>Leif <i>Erwin</i></b><br />muggle b.1978</div>
</div>
</div>
<div style="width:320px;min-height:275px;margin:0 10px 10px 0;display:inline-block;">
<div style="min-height:140px;margin:0 10px 5px 0;float:left;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_belise.png" style="height:100px;width:100px;border:4px inset #5e574c;"><br />
<b>Belise <i>Viona</i></b><br />
witch b.1954</div>
<div style="margin:40px 10px 0 0;float:left;">+<br />m.1982</div>
<div style="min-height:145px;margin:2px 10px 5px 0;float:left;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_jude.png" style="height:100px;width:100px;"><br />
<b>Jude Wickham</b><br />
<i>pureblood</i></div>
<div style="min-height:150px;">
<div style="min-width:145px;float:left;text-align:left;margin:0 4px 4px 0;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_astrid.png" style="width:50px;height:50px;margin-right:4px;float:left"> <b>Astrid <i>Viona</i></b><br />witch b.1975</div>
<div style="min-width:145px;float:left;text-align:left;margin:0 4px 4px 0;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_lars.png" style="width:50px;height:50px;margin-right:4px;float:left"> <b>Lars <i>Erwin</i></b><br />wizard b.1981</div>
</div>
</div>
<div style="width:120px;min-height:275px;margin:0 10px 10px 0;display:inline-block;">
<div style="min-height:140px;margin:0 10px 5px 0;float:left;"><img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/dewitt_heidi.png" style="height:100px;width:100px;border:4px inset #5e574c;"><br />
<b>Heidi <i>Jan</i></b><br />
witch b.1960</div>
</div>
</div>
<a href="#cutid1" style="text-decoration:none;color:#5e574c;font-weight:bold;display:block;text-transform:uppercase;letter-spacing:2px;">return to top</a>
</div>
</div>
</lj-raw>

Background Image

from Deviant Art
(I got it a long time ago and I don't remember from who, sorry!)

Blast Mark

More Examples
Here

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

	initiumnovummod 2011-06-14 06:38 am UTC (link)
	This is amazing, and I have a friend who is going to flip out when she sees it tomorrow. Very nice work! (Reply to this)

	miralph 2011-06-14 03:39 pm UTC (link)
	bahaha blast mark ♥ (Reply to this)

	reines 2011-06-15 09:00 am UTC (link)
	the blast mark is brilliant. this whole thing is brilliant! (Reply to this)