Entries tagged with !divs

Entry tags:

NOTES:
- the code
- square navcode, can be used as muselist too
- edit to your heart's content
- because divs, be sure to close the tags properly; dw freaks out over divs

Entry tags:

!divs

DIV | low light (updated)

dana | gmt +8 | email

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTES:
- intended for really minimal texts
- you can edit it to hold more text but you'll need to adjust both div heights
- because divs, be sure to close the tags properly; dw freaks out over divs

UPDATED VERSION 2022:

how to adjust height:
search for min-height: 250px; and replace the numerical value in increments of 5px. both instances of min-height: (value); should match. (ex. lorem ipsum example is set to 330px.)

how to change colors:
search for rgba(value) and replace with a hexadecimal counterpart (#xxxxxx value) or a different rgba value. (color-hex is a good converter.)

quick note:
specially formatted journal pages are gonna make this boogie esp. ported layouts, it's best viewed on the site skin. still looking for a way to clear inherited css, sorry guys.

ALTERNATE VERSION:

same deal as above, this one mostly works with the journal layout but it'll still need some tweaks. let me know if it continues to go bonkers pls 🥲

Entry tags:

CODE | lightbox

1989
'cause baby now we've got bad blood.

PHILADELPHIA
application
relations
calendar
visuals
inbox

THIS IS ENTIRELY IN DIVS
MAKE SURE ALL DIV TAGS ARE CLOSED
or dw will go nuts and kill the page

PROPS TO

brewski for the code inspiration

<raw-code><div style="background: url(BACKGROUNDIMG) #333; width:500px; height:500px;padding:0;"><div style="background: url(FOREGROUNDIMG); background-repeat: no-repeat;background-position: center; width:350px; height:350px;padding:0; position: relative; top:50px; border: 25px solid rgba(0,0,0,0.6);box-shadow: 0px 5px 5px #000;"><div style="background: transparent; width:300px; height:300px;padding:10px; color: #fff; font-family: 'helvetica', 'arial', sans-serif; font-size: 12pt; font-style: italic; text-transform: uppercase; font-weight: 800; text-align: right; margin-top:6px; line-height: 100%;">
MAINTITLE<br/>
<small><small>SUBTITLES</small></small>
<hr style="border: solid 2px #fff;">SUBHEADER<br/>
<span style="font-size: 8pt;"><a href="url" style="text-decoration: none; color: #fff;">link</a><br/>
<a href="url" style="text-decoration: none; color: #fff;">link</a><br/>
<a href="url" style="text-decoration: none; color: #fff;">link</a><br/>
<a href="url" style="text-decoration: none; color: #fff;">link</a><br/>
<a href="url" style="text-decoration: none; color: #fff;">link</a><br/></span>
</div></div></div>
</raw-code>

Entry tags:

code | mike & julie

- - - - -

( live preview under the cut. )

- - - - -

CODE FOR "MIKE"

<table style="font-family: Helvetica, Optima, Arial, sans-serif; font-size: 10pt; text-transform: uppercase;"><tr><td colspan="5" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;"><a name="top"></a>SOME TITLE</span></td></tr>
<tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr>

<!-- THE RED HEADER TEXT --!>
<tr><td colspan="4" style="padding: 20px 0 0 0; line-height: 1.8em;"><a name="faves"></a><span style="color: #ff0000; font-size: 4em; letter-spacing: -3pt; padding: -10pt;"><a href="#top" style="text-decoration: none; color: #ff0000;">↺</a>YOUR CATEGORY</span><hr style="border: 1px solid #ff0000;" /></td></tr>

<!-- WHERE YOUR CHARACTERS GO --!>
<tr><td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td>
<td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td>
<td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td>
<td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td></tr></table>

- - - - - - -

- - - - -

( live preview under the cut. )

- - - - -

CODE FOR "JULIE"

<raw-code><table style="font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif; text-transform: uppercase;"><tr><td colspan="4" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;">HEADER TITLE</span></td></tr>

<!-- YOUR MENU LINKS --!>
<tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr>

<!-- YOUR CHARACTERS COME IN AFTER THIS LINE --!>
<a name="LINK"></a>
<tr><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; height: 100px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ffb2ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;">
<div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td></TR></table></raw-code>

NOTES:
— ask if something messes up etc etc
— FOR MIKE: the refresh text icon thingie automatically links to the top of the table.
— FOR JULIE: if you want to replace the color overlay thing, ctrl+f #ff00ff and replace it with the hex code of your choice.
— [a name=""] tags are for linking within the same table/document; if you want to just link out to a different page for the top menu, just replace name with href.
— if you're linking within the table, make sure your target name and target link match! don't remove the # sign if you do. just replace the word.

Entry tags:

!divs,
!html

CODE: LATRODECT

( live preview under the cut. )
- - - - -
THE CODE

<center><br/><br/><raw-code><table style="color: #111; font-family: helvetica, arial, sans-serif; font-size: 9pt; letter-spacing: 1pt;"><tr><td style="background: url(BACKGROUND IMG URL); background-position: center center; height: 140px; width: 400px;">
<div style="width: 400px; height: 160px;"><div style="width: 140px; height: 140px; text-align: left; display: inline-block;">
<div style="border: 5px solid #fff; height: 100px; width: 100px; background: url(ICON URL); border-radius: 50%; margin: 20px;"></div></div>
<div style="width: 150px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -140px; margin-left: 126px;">
<div style="width: 240px; height: 160px; color: #fff; font-weight: bolder; font-size: 2.4em; padding: 5px; text-align: justify;">THIS IS YOUR HEADER.</div></div></div></td><td rowspan="4" style="padding: 0 16px; vertical-align: top; width: 200px;"><a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/>
<p style="text-align:justify; font-size: 0.9em; padding: 10px 0;">SMALLTEXT BLURB GOES HERE</p></td></tr>
<tr><td style="background: #fff; width: 400px; height: auto; padding: 20px 8px 0 8px; text-align:justify;"><span style="color: #000; font-size:2.0em;font-weight:bolder; padding: 2px;">HEADER TITLE HERE</span><br/><span style="color: #FF0000; font-size:1.6em;font-weight:bolder; padding: 2px;">HEADER SUBTITLE HERE</span></td></tr>
<tr><td style="background: #fff; width: 400px; height: auto; padding: 20px 12px 20px 12px; text-align:justify;">MAIN TEXT GOES HERE.</td></tr>
<tr><td width="400"></td></tr></table></raw-code><Br/><Br/></center>

NOTES:
— Yell in my direction if something messes up.
— This is in raw-code, which means DW's autoformatted returns (that's when you hit enter to linebreak) don't work. If you want linebreaks, just add [br/] at the end of the line (replace the brackets with the correct symbols). Do two of those for spacing.
— Edit to your heart's content, credit not required, just don't claim the code as your own.

Entry tags:

code | hit enter

NAME: Fuyumine Naoto
CANON: Dogs: Bullets & Carnage

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

►

<raw-code><table style="font-family: sans-serif; font-weight: 500; letter-spacing: 1pt; color: #fff;"><tr><td align="justify" width="500"><div style="height: 300px; width: 500px; background: #fff url(BACKGROUNDIMG); background-position: center; background-repeat: no-repeat; border: 1px solid #999; border-radius: 15px;"><div style="height: 100px; width: 500px; position: relative; top: 200px; left: -1px; background: #333; opacity: 0.6; border-right: 1px solid #999; border-bottom: 1px solid #999; border-left: 1px solid #999; border-radius: 0 0 15px 15px;"></div><div style="height: 0; width: 500px; position: relative; top: 98px; border-top: 3px solid #98f5ff; border-bottom: 3px solid #98f5ff; box-shadow: 0 5px 10px #98f5ff;"></div><div style="height: 70px; width: 380px; position: relative; top: 100px; padding: 10px; overflow: auto;"><b>NAME:</B> CHARACTER NAME<br /><b>CANON:</B> CANONTITLE<br /><br />BLURBTEXT</div><div style="height: 10px; width: 26px; position: relative; top: 38px; left: 428px; padding: 4px 4px 10px 8px; border: 3px solid #fff; border-radius: 50px; text-align: center; vertical-align: text-top;"><a href="LINKURL" style="text-decoration: none; font-size: 14pt; color: #fff;" title="HOVERTEXT">►</a></div></div></td></tr></table></raw-code>

#98f5ff #999999

— based off this image, via dereban
— background image should be at least 500px by 300px
— i failed majestically at this, i'm sorry :(

Entry tags:

code | taxman

- - -
( live preview )
- - -

<raw-code><br /><table style="font-family: 'helvetica', 'avant garde', sans-serif; font-size: 11pt; color: #000; line-height: 140%; letter-spacing: 1pt; text-transform: uppercase;"><tr><td style="width: 400px; height: 330px; vertical-align: top;"><br /><br />
<div style="width: 400px; height: 200px; align: float; position: relative; background: #fff url(BACKGROUNDIMG); background-position: center; background-repeat: no-repeat; border: 1px solid #ccc; border-radius: 25px 25px 0 0;">
<div style="width: 100px; height: 96px; background: #ccc url(USERPICIMG); position: relative; top: -50px; left: 145px; border-radius: 50%; border: 5px solid #ccc; box-shadow: #333 0 2px 2px 0;"></div>
<div style="width: 400px; height: 50px; background: #fff; position: relative; top: 90px; left: -1px; border: 1px solid #ccc; border-radius: 0 0 25px 25px; padding: 10px 0; text-align: center;">CHARACTERNAME<br /> <a href="LINKURL" style="font-family: 'helvetica', 'avant garde', sans-serif; font-size: 8pt; text-decoration: none; background-color: #ccc; color: #000; padding: 3px;">LINKTEXT</a></div>
</div>
</td></tr></table></raw-code>

#ccc or #cccccc

— background image size should be at least 400px by 200px
— it should look about the same when viewed on custom comment pages and on layouts (whew)
— updated the code, thanks stormy for the tip!
— yell at me if something goes weird; tested on chrome and firefox

Entry tags:

code | 8tracks

( live preview under cut )

- - - - -

#FDD700 #999999 #FF0000

CODING

<raw-code>
<table style="font-family: 'Arial', sans-serif; color: #333;">
<tr style="border-right: solid 2px #ccc;">
<td width="400px" style="vertical-align: top;">
<div style="width: 400px; height: 400px; align: float; background: url(IMGURL); background-position: center; background-repeat: no-repeat; box-shadow: #ccc 2px 2px 1px;">
<div style="height: 50px; width: 300px; background: #000; position: relative; top: 16px; left: 16px; border-radius: 10px; padding: 0 10px; text-align: left; opacity: 0.7;filter:alpha(opacity=70);">
<a href="URL" style="font-size: 24pt; color: #fff; text-decoration: none;">HEADERTEXT</a>
</div>
</div>
</td>
<td width="50px; align: float; padding-left: 10px;">
<span style="font-size: 34pt; font-style: bold;">
<a href="URL1" style="color: #999; text-decoration: none;">♥</a><Br />
<a href="URL2" style="color: #999; text-decoration: none;">+</a><br />
<a href="URL3" style="color: #999; text-decoration: none;"><small>►</small></a>
</span>
</td></tr>

<tr>
<td width="400px" style="font-size: 18pt;">
<div style="width: 400px; height: 40px; align: float; background: transparent; position: relative; padding: 0 10px 0 0; text-align: left;">
<b>CHARACTERNAME</b> CANON
</div></div></td>
<td width="40px; height: 40px; align: right;">
<a href="http://USERNAME.dreamwidth.org/" style="font-size: 22pt; font-style: bold; color: #fdd700; text-decoration: none;">★</a>
</td></tr>

<tr style="border-bottom: solid 1px #ccc;"><td width="400px" style="font-size: 18pt;">
<div style="width: 400px; height: 40px; align: float; background: transparent; position: relative; padding: 0 10px 0 0; text-align: left;">
<b>CHARACTERNAME</b> CANON
</div></div></td>
<td width="40px; height: 40px; align: right;">
<a href="http://USERNAME.dreamwidth.org/" style="font-size: 22pt; font-style: bold; color: #999; text-decoration: none;">★</a>
</td></tr>
<tr>
<td width="460px" colspan="2" style="font-size: 10pt;">
<div style="width: 460px; align: float; background: transparent; position: relative; padding: 10px; text-align: justify;">
BLURBTEXT GOES HERE
</div></div></tr>
<tr>
<td width="460px" colspan="2" style="background: #ececec; font-size: 10pt;">
<div style="width: 460px; text-align: justify; align: float; background: transparent; position: relative; padding: 10px;">
► Notes <font color="#ff0000"><big><big>♥</big></big></font> More Notes
</div></div></tr>
</table>
</raw-code>

- I am completely in love with 8tracks' layout, it's endearing to me.
- I have no idea why it looks so drastically different on when viewed on DW's custom layouts/comment pages.
- Tested on Chrome and Firefox, yell at me if something screws up, I'll probably edit this more later.

Current Music: MYPET - Pays to Know

Entry tags:

code | pays to know

character inbox

how's my driving

visualosities

VERSION 1

<raw-code>
<table style="font-size: 10pt; font-family: raavi, helvetica, sans-serif; color: #000; line-height: auto; text-transform: uppercase;">
<tr>
<td width="300px">
<div style="width: 300px; height: 125px; text-align: left; display: inline-block; border: solid 1px #aaa; box-shadow: #ccc 2px 2px 1px;">
<div style="height: 80px; width: 80px; background: url(IMGURL); margin-left: 18px; margin-top: 16px; padding: 5px; box-shadow: #ccc 2px 2px 1px;"></div>
<div style="width: 150px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -110px; margin-left: 116px;">
<div style="width: auto; height: 16px; color: #fff; background-color: #000; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK1</a></center></div>
<div style="width: auto; height: 16px; color: #fff; background-color: #000; margin-top: 6px; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK2</a></center></div>
<div style="width: auto; height: 16px; color: #fff; background-color: #000; margin-top: 6px; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK3</a></center></div>
</div>
</div>
</td>
</tr>
</table></raw-code>

*notes:
- the link boxes's heights are fixed; you could add more, but it won't align with the icon anymore.
- if you insist on having more links, ctrl+f height: 125px; and add at least 30px per link box to the current height.

- - - - -

VERSION 2

<raw-code>
<table style="font-size: 10pt; font-family: raavi, helvetica, sans-serif; color: #000; line-height: auto; text-transform: uppercase;">
<tr>
<td width="300px">
<div style="width: 300px; height: 165px; text-align: left; display: inline-block; border: solid 1px #aaa; box-shadow: #ccc 2px 2px 1px;">
<div style="height: 80px; width: 80px; background: url(IMGURL); margin-left: 18px; margin-top: 16px; padding: 5px; box-shadow: #ccc 2px 2px 1px;"></div>
<div style="width: 150px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -110px; margin-left: 118px;">
<div style="width: auto; height: 16px; color: #fff; background-color: #000; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK1</a></center></div>
<div style="width: auto; height: 16px; color: #fff; background-color: #000; margin-top: 6px; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK2</a></center></div>
<div style="width: auto; height: 16px; color: #fff; background-color: #000; margin-top: 6px; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK3</a></center></div>
</div>
<div style="width: 260px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -18px; margin-left: 8px;"><div style="width: auto; height: 16px; color: #fff; background-color: #000; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK4</a></center></div></div>
</div>
</td>
</tr>
</table>
</raw-code>

*notes:
- the link boxes's heights are fixed, ~~and I haven't tested out the coding with additional linkboxes~~ nvm I tested it
- find the area marked with !-- within the code, follow the instructions, and then inside the div style values add margin-top: 6px; in there
- ctrl+f height: 165px and add 30px per additional link box

Current Music: fleetwood mac - dreams

Entry tags:

code | dreams

( live preview for version one )
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>

- - -

( live preview for version two )
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>

Entry tags:

code | big data

ISAAC LAHEY
TEEN WOLF
dogtooth

SIMPLE VERSION

- - -

ISAAC LAHEY
TEEN WOLF
dogtooth

MODERATE VERSION

- - -

isaac lahey
TEEN WOLF (AU)
dogtooth

DIVCEPTION VERSION