- - - - -

( 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.

( 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.

- - -
( 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

( 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 height="20px" colspan="2"><!--DO NOT DELETE THIS ROW--></td></tr> <!--START COPYING FROM HERE--> <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> <!--YOU CAN STOP COPYING NOW. PASTE DIRECTLY AFTER THIS LINE.--> <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.