Entry tags:

coding: other, resources: layouts

Layout with Contacts table

So, the amazing chaperoned gave me some of her nommy code and I set to work butchering her super clean design with tons of colors and other abominations. She apparently likes the abuse and asked me to share it here. So here we go!

Everything here is customizable. This has a built-in credit, you can remove just please credit rp_tutorals somewhere on your game so that people can find this resource too! I would suggest changing the background color (#336666) to a tiled image, as the yellow and white/teal backgrounds are actually transparent. But feel free to kill transparencies and use solid colors if you prefer those. Again, go to town. You can also use a narrow (150px seems to work well) image under the top navigation table, an example is here... where you can also see the transparent tables over a pattern. Plenty of room in the info to add additional information your game might want, like birthdays, CDJs, time zones, etc.

...and perhaps the best part... this page has a built-in navigation strip! Hey, I think it's sexy. If anyone would be so kind as to make me a preview image, I would love you forever. My regular comp is in the shop and I have no image editing programs on the company's computer! D:

Until then, here's the code for the layout/contacts table, and the fully functional full-size display below! Have at, hope someone likes and can maybe even make better!


<table width="80%" bgcolor="#336666" align="center" cellpadding="10" cellspacing="5"><tr><td colspan="3" style="border-bottom:2px dashed #b9b64b;"><span style="font-family: Georgia; font-size:26px; font-weight:; color: #F49300;"><div style="text-align: right;"><b><font color="#b8b750" face="helvetica" size="6">FRIENDS & </font> <font color="#f8f17a" face="helvetica" size="6">CONTACTS</font></b></div></span></td></tr> <tr><td valign="top" width="150px"><span style="font-family: georgia; font-size:11px; font-weight:; color: #f8f17a; letter-spacing: 2px"><i> The Players...</i></span> <table width="100%" background="http://i55.tinypic.com/27xl4qt.png" cellpadding="3px"><tr><td style="border-bottom:1px dotted #cc0000;"><a href="#name1" style="text-decoration: none; font-family: helvetica; color: #111b47; font-size: 10px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#242634" size="3">‣</font> Name 1</a></td></tr><tr> <td style="border-bottom:1px dotted #cc0000;"><a href="#name2" style="text-decoration: none; font-family: helvetica; color: #111b47; font-size: 10px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#242634" size="3">‣</font> Name 2</a></td></tr><tr> <td style="border-bottom:1px dotted #cc0000;"><a href="#name3" style="text-decoration: none; font-family: helvetica; color: #111b47; font-size: 10px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#242634" size="3">‣</font> Name 3</a></td></tr><tr> <td style="border-bottom:1px dotted #cc0000;"><a href="#name4" style="text-decoration: none; font-family: helvetica; color: #111b47; font-size: 10px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#242634" size="3">‣</font> Name 4 (mod)</a></td></tr><tr> <td style="border-bottom:1px dotted #cc0000;"><a href="#name5" style="text-decoration: none; font-family: helvetica; color: #111b47; font-size: 10px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#242634" size="3">‣</font> Name 5</a></td></tr><tr> <td><a href="#name6" style="text-decoration: none; font-family: helvetica; color: #111b47; font-size: 10px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#242634" size="3">‣</font> Name 6 (comod)</a></td></tr> </table> <p> <p><span style="font-family: georgia; font-size:11px; font-weight:; color: #f8f17a;">The main code on this page was created by <a href="http://chaperoned.insanejournal.com/"><font color="f8f17a">chaperoned</a>, the code was altered with permission and the cast table was coded by <a href="http://fromamerica.insanejournal.com/"><font color="f8f17a">FromAmerica</a>. This code is available at <a href="http://asylums.insanejournal.com/rp_tutorials/"><font color="f8f17a">RP Tutorials</a>.</span></td> <td valign="top" background="http://i56.tinypic.com/33mv8zs.jpg"> <div style="text-align: justify;"><span style="font-family: helvetica; font-size:18px; font-weight: 900; color: #22235c; letter-spacing: 2px"> FRIENDS BUTTON</span> <span style="font-family: georgia; font-size: 14px; color: #333333; line-height: 140%;">(goes here) <div style="text-align: right;"><a href="#top" style="text-decoration: none; color: #660000; font-size: 10px; font-family: verdana;">[RETURN TO TOP]</a></div> <span style="font-family: helvetica; font-size:18px; font-weight: 900; color: #990000; letter-spacing: 2px"> CONTACTS</span> <center><table width="100%" cellpadding="0" cellspacing="0"> <tr><td> <center><a name="name1"></a><table width="90%" cellpadding="5" bgcolor="#eae8fe"><tr><td colspan=2><font family=helvetica size=4px color=#990000>NAME 1</font><br><font face="Trebuchet MS"size=2><b>AIM:</b> AIM Name <b>Email:</b> Name@Gmail.com</td></tr><tr><td td width="25%"><font face="Arial" size=2>• Character 1</td><td width="75%">• <lj user="character1"></td></tr></table> <a name="name2"></a><table width="90%" cellpadding="5" bgcolor="#eae8fe"><tr><td colspan=2><font family=helvetica size=4px color=#990000>NAME 2</font><br><font face="Trebuchet MS"size=2><b>AIM:</b>AIM Name <b>Email:</b> Name@Gmail.com</td></tr><tr><td width=25%><font face="Arial" size=2>• Character 1 • Character 2 • Character 3 • Character 4 • Character 5</td><td width=75%>• <lj user="character1"> • <lj user="character2"> • <lj user="character3"> • <lj user="character4"> • <lj user="character5"></td></tr></table> <a name="name3"></a><table width="90%" cellpadding="5" bgcolor="#eae8fe"><tr><td colspan=2><font family=helvetica size=4px color=#990000>NAME 3</font><br><font face="Trebuchet MS"size=2><b>AIM:</b> AIM Name <b>Email:</b> Name@Gmail.com</td></tr><tr><td width=25%><font face="Arial" size=2>• Character 1 • Character 2 • Character 3 </td><td width=75%>• <lj user="character1"> • <lj user="character2"> • <lj user="character3"></td></tr></table> <a name="name4"></a><table width="90%" cellpadding="5" bgcolor="#eae8fe"><tr><td colspan=2><font family=helvetica size=4px color=#990000>NAME 4</font> <font face="Trebuchet MS"size=1>( Mod )<br><font face="Trebuchet MS"size=2><b>AIM:</b> AIM Name <b>Email:</b> Name@Gmail.com</td></tr><tr><td width=25%><font face="Arial" size=2>• Character 1 • Character 2 </td><td width=75%>• <lj user="character1"> • <lj user="character2"></td></tr></table> <a name="name5"></a><table width="90%" cellpadding="5" bgcolor="#eae8fe"><tr><td colspan=2><font family=helvetica size=4px color=#990000>NAME 5</font><br><font face="Trebuchet MS"size=2><b>AIM:</b> AIM Name <b>Email:</b> Name@Gmail.com</td></tr><tr><td width=25%><font face="Arial" size=2>• Character 1 • Character 2 • Character 3 • Character 4 </td><td width=75%>• <lj user="character1"> • <lj user="character2"> • <lj user="character3"> • <lj user="character4"></td></tr></table> <a name="name6"></a><table width="90%" cellpadding="5" bgcolor="#eae8fe"><tr><td colspan=2><font family=helvetica size=4px color=#990000>NAME 6</font> <font face="Trebuchet MS"size=1>( Co-mod )<br><font face="Trebuchet MS"size=2><b>AIM:</b> AIM Name <b>Email:</b> Name@Gmail.com</td></tr><tr><td width=25%><font face="Arial" size=2>• Character 1 • Character 2 • Character 3 </td><td width=75%>• <lj user="character1"> • <lj user="character2"> • <lj user="character3"></td></tr></table> </table></center> <div style="text-align: right;"><a href="#top" style="text-decoration: none; color: #660000; font-size: 10px; font-family: verdana;">[RETURN TO TOP]</a></div></td></tr> <tr><td colspan="3" style="border-bottom:2px dashed #b9b64b;"><span style="font-family: Georgia; font-size:26px; font-weight:; color: #F49300;"><div style="text-align: right;"><b><font color="#dcd659" face="helvetica" size="4">Game</font> <font color="#f8f17a"face="helvetica" size="4">Navigation</font></b></div></span></td></tr> <tr><td colspan="3" background="http://i56.tinypic.com/33mv8zs.jpg"><center><a href="http://asylums.insanejournal.com/x_2012/" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Game</b></a> • <a href="http://asylums.insanejournal.com/ooc_2012/" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>OOC</b></a> • <a href="http://x-mod.insanejournal.com/541.html" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Premise</b></a> • <a href="http://x-mod.insanejournal.com/1225.html" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Rules</b></a> • <a href="http://x-mod.insanejournal.com/290.html" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>FAQ</b></a> • <a href="http://x-mod.insanejournal.com/962.html" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Teams & Cast</b></a> • <a href="http://x-mod.insanejournal.com/1339.html" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Holds & Taken</b></a> • <a href="http://x-mod.insanejournal.com/2733.html"style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Wanted</b></a> • <a href="http://x-mod.insanejournal.com/1811.html"style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Apply</b></a> • <a href="http://x-2012.wikispaces.com/Timeline"style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Timeline</b></a> • <a href="http://x-mod.insanejournal.com/2481.html"style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Drop Box</b></a> • <a href="http://x-mod.insanejournal.com/3516.html" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Site Map</b></a> • <a href="http://x-mod.insanejournal.com/2273.html" style="text-decoration: none; color: #22235c; font-size: 10px; font-family: verdana;"><b>Contacts</b></a> <img src="http://www.insanejournal.com/img/icon_protected.gif"> </td></tr></table>

FRIENDS & CONTACTS
The Players... ‣ Name 1 ‣ Name 2 ‣ Name 3 ‣ Name 4 (mod) ‣ Name 5 ‣ Name 6 (comod) The main code on this page was created by chaperoned, the code was altered with permission and the cast table was coded by FromAmerica. This code is available at RP Tutorials.	FRIENDS BUTTON (goes here) [RETURN TO TOP] CONTACTS NAME 1 AIM: AIM Name Email: Name@Gmail.com • Character 1 • character1 NAME 2 AIM:AIM Name Email: Name@Gmail.com • Character 1 • Character 2 • Character 3 • Character 4 • Character 5 • character1 • character2 • character3 • character4 • character5 NAME 3 AIM: AIM Name Email: Name@Gmail.com • Character 1 • Character 2 • Character 3 • character1 • character2 • character3 NAME 4 ( Mod ) AIM: AIM Name Email: Name@Gmail.com • Character 1 • Character 2 • character1 • character2 NAME 5 AIM: AIM Name Email: Name@Gmail.com • Character 1 • Character 2 • Character 3 • Character 4 • character1 • character2 • character3 • character4 NAME 6 ( Co-mod ) AIM: AIM Name Email: Name@Gmail.com • Character 1 • Character 2 • Character 3 • character1 • character2 • character3 [RETURN TO TOP]
Game Navigation
Game • OOC • Premise • Rules • FAQ • Teams & Cast • Holds & Taken • Wanted • Apply • Timeline • Drop Box • Site Map • Contacts