code | dreams

[manual]

NAVIGATION APPLICATION « PLAYER CONTACT « HMD CATCH-ALL « PERMISSIONS « CR CHART « ACTIVITY TRACKING « OPEN RP POST «

VERSION 1
*BACKGROUND IMAGE MUST BE AT LEAST 400px by 500px
<raw-code> <table style="font-family: 'century gothic', 'avant garde', sans-serif; color: #000; letter-spacing: 1pt;"> <tr><td width="400px"> <div style="width: 400px; height: 500px; align: float; background: #e14f4f url(IMGURL); background-position: center; background-repeat: no-repeat;"> <div style="width: 200px; background: #fff; position: relative; top: 15px; left: 90px; padding: 9px; text-align: right;"> <span style="font-size: 16pt;">HEADERTEXT</span><br /> <span style="font-size: 9pt;"> <a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «</span> </div> </div> </td></tr> </table> </raw-code>

- - -

DIRECTORY active muselist past & present how's my driving PRESS PLAY open prompts open inbox contact plot with me permissions disclaimer this musebox is pg-13.

VERSION 2
*BACKGROUND IMAGE MUST BE AT LEAST 320px by 420px
**LINK NUMBERS ARE FIXED;
if you'd like less boxes or more boxes,
you'll need to change the div position values
<raw-code> <table style="font-family: 'Courier New', 'Andale Mono', monospace; color: #000; letter-spacing: 0.5pt; line-height: 18pt; text-transform: uppercase;"> <tr><td width="320px"> <div style="width: 320px; height: 420px; align: float; background: #000000 url(IMGURL); background-position: center; background-repeat: no-repeat;"> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 15px; left: 120px; padding: 5px; text-align: right;"> <span style="font-size: 16pt; color: #000;">BOXHEADER1</span><br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE3</a> </div> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 30px; left: 120px; padding: 5px; text-align: right;"> <span style="font-size: 16pt; color: #000;">BOXHEADER2</span><br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br /> </div> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 45px; left: 120px; padding: 5px; text-align: right;"> <span style="font-size: 16pt; color: #000;">BOXHEADER3</span><br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br /> <a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br /> </div> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 60px; left: 120px; padding: 5px; text-align: right;"> <span style="font-size: 16pt; color: #000;">BOXHEADER4</span><br /> SUPERSHORT MESSAGE HERE.<br /> </div> </div> </td></tr> </table> </raw-code>

Comments

[frozenfractals]

This is lovely. I may wind up using the first one for several of my characters. Thank you!

[consequence]

Is there a way for me to use both of them side by side? This way I can have a general info one and then a second one for all the game specific things?

[manual]

There is! Just copy starting from the [td]...[/td] areas in either table and paste it directly after the first [/td] tag, that should give you two columns for whichever version you're using no problem.

I wouldn't suggest importing one code into the other, though, I haven't tested it out yet and it might not align correctly.

[consequence]

mmkay I will tinker with it... since yes. tinkering.

[consequence]

Yeah, the tops don't match up. They do when I look at her journal in the themed layout, but not when I open it into the site skin for the entry page.

http://consequence.dreamwidth.org/2557.html

I tinkered... a bit.

<center><raw-code> <table style="font-family: 'calibri', monospace; color: #000; letter-spacing: 0.5pt; line-height: 18pt; text-transform: uppercase;"> <tr><td width="320px"> <div style="width: 320px; height: 420px; align: float; background: #e14f4f url(https://31.media.tumblr.com/85626ae1e1511e267ece3cd9f883efb3/tumblr_mquxk0tOrg1rcfflyo1_500.jpg); background-position: right-center; background-repeat: no-repeat;"> <div style="width: 200px; background: #fff; position: relative; top: 15px; left: 90px; padding: 9px; text-align: right;"> <span style="font-size: 16pt;">HAYLEY</span><br /> <span style="font-size: 9pt;"> <a href="http://vampirediaries.wikia.com/wiki/Hayley_Marshall" style="text-decoration: none;">hayley wikia article</a> «<br /> <a href="http://vampirediaries.wikia.com/wiki/Werewolf" style="text-decoration: none;">tvd werewolf wikia article</a> «<br /> <a href="http://www.tumblr.com/tagged/hayley-marshall" style="text-decoration: none;">hayley marshall @tumblr</a> «<br /> <a href="http://www.tumblr.com/tagged/haylijah" style="text-decoration: none;">haylijah @tumblr</a> «</span> </div> <div style="width: 200px; background: #fff; position: relative; top: 15px; left: 90px; padding: 9px; text-align: right;"> <span style="font-size: 16pt;">GENERAL RP</span><br /> <span style="font-size: 9pt;"> <a href="http://consequence.dreamwidth.org/801.html" style="text-decoration: none;">permissions + opt-out</a> «<br /> <a href="http://consequence.dreamwidth.org/2185.html" style="text-decoration: none;">open inbox post</a> «<br /> <a href="http://things.dreamwidth.org/6084.html" style="text-decoration: none;">open gen post</a> «<br /> <a href="http://things.dreamwidth.org/7935.html" style="text-decoration: none;">open nsfw post</a> «</span> </div></div></td><td width="320px"> <div style="width: 320px; height: 420px; align: float; background: #000000 url(https://24.media.tumblr.com/9f414df0a68c2fb993bbc7e8af367789/tumblr_mlmivumP5V1rrdu8mo1_500.jpg); background-position: center; background-repeat: no-repeat;"> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 15px; left: 120px; padding: 5px; text-align: right;"> <span style="font-size: 16pt; color: #000;">ATARAXION</span><br /> <a href="http://consequence.dreamwidth.org/713.html" style="text-decoration: none;">contacting hayley</a><br /> <a href="http://consequence.dreamwidth.org/1709.html" style="text-decoration: none;">remembering people</a><br /> <a href="http://consequence.dreamwidth.org/1359.html" style="text-decoration: none;">collecting items</a> </div> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 30px; left: 120px; padding: 5px; text-align: right;"> <span style="font-size: 16pt; color: #000;">ASGARD</span><br /> <a href="http://consequence.dreamwidth.org/1159.html" style="text-decoration: none;">contacting hayley</a><br /> <a href="http://consequence.dreamwidth.org/1980.html" style="text-decoration: none;">remembering people</a><br /> </div> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 60px; left: 120px; padding: 5px; text-align: right;"> <span style="font-size: 16pt; color: #000;">HAYLEY...</span><br /> is a werewolf.<br /> chomp chomp.<br /> </div> </div> </td></tr> </table> </raw-code>

[knifehead]

Yo it's still me; I checked your code and the new one up on your post and I figured out why it's not aligning. The inner div padding has to be all the same value; the second column's at 5px while the first column's at 9px.

try this one out:
<raw-code> <table style="font-family: 'calibri', color: #000; letter-spacing: 0.5pt; line-height: 18pt;"> <tr><td width="320px"> <div style="width: 370px; height: 420px; align: float; background: #e14f4f url(https://31.media.tumblr.com/85626ae1e1511e267ece3cd9f883efb3/tumblr_mquxk0tOrg1rcfflyo1_500.jpg); background-position: right-center; background-repeat: no-repeat;"> <div style="width: 200px; background: #fff; position: relative; top: 15px; left: 130px; padding: 9px; text-align: right;"> <span style="font-size: 16pt;">HAYLEY</span><br /> <span style="font-size: 9pt;"> <a href="http://vampirediaries.wikia.com/wiki/Hayley_Marshall" style="text-decoration: none;">hayley wikia article</a> «<br /> <a href="http://vampirediaries.wikia.com/wiki/Werewolf" style="text-decoration: none;">tvd werewolf wikia article</a> «<br /> <a href="http://www.tumblr.com/tagged/hayley-marshall" style="text-decoration: none;">hayley marshall @tumblr</a> «<br /> <a href="http://www.tumblr.com/tagged/haylijah" style="text-decoration: none;">haylijah @tumblr</a> «</span> </div> <div style="width: 200px; background: #fff; position: relative; top: 15px; left: 130px; padding: 9px; text-align: right;"> <span style="font-size: 16pt;">GENERAL RP</span><br /> <span style="font-size: 9pt;"> <a href="http://consequence.dreamwidth.org/801.html" style="text-decoration: none;">permissions + opt-out</a> «<br /> <a href="http://consequence.dreamwidth.org/2185.html" style="text-decoration: none;">open inbox post</a> «<br /> <a href="http://things.dreamwidth.org/6084.html" style="text-decoration: none;">open gen post</a> «<br /> <a href="http://things.dreamwidth.org/7935.html" style="text-decoration: none;">open nsfw post</a> «</span> </div></div></td><td width="320px"> <div style="width: 320px; height: 420px; align: float; background: #000000 url(https://24.media.tumblr.com/9f414df0a68c2fb993bbc7e8af367789/tumblr_mlmivumP5V1rrdu8mo1_500.jpg); background-position: center; background-repeat: no-repeat;"> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 15px; left: 110px; padding: 9px; text-align: right;"> <span style="font-size: 16pt; color: #000;">ATARAXION</span><br /> <a href="http://consequence.dreamwidth.org/713.html" style="text-decoration: none;">contacting hayley</a><br /> <a href="http://consequence.dreamwidth.org/1709.html" style="text-decoration: none;">remembering people</a><br /> <a href="http://consequence.dreamwidth.org/1359.html" style="text-decoration: none;">collecting items</a> </div> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 30px; left: 110px; padding: 9px; text-align: right;"> <span style="font-size: 16pt; color: #000;">ASGARD</span><br /> <a href="http://consequence.dreamwidth.org/1159.html" style="text-decoration: none;">contacting hayley</a><br /> <a href="http://consequence.dreamwidth.org/1980.html" style="text-decoration: none;">remembering people</a> </div> <div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 45px; left: 110px; padding: 9px; text-align: right;"> <span style="font-size: 16pt; color: #000;">HAYLEY...</span><br /> is a werewolf.<br /> chomp chomp.<br /> </div> </div> </td></tr> </table></raw-code>

[consequence]

THANK YOU!! I tried to figure out where something wasn't matching up but I didn't check the inner div! You are amazing.

[vermille]

This looks really nice! Thank you so much ! ♥

I might be using it on a couple of my characters later!

[picklepocket]

is there a way to move the box with the links to another position?