Entry tags:

layouts: media

[Character Profile] Wikipedia Mocker

profile   journal   icons   friends   player   layout credit

Character Name From Game Link, brief game description Character Name Category Trait Category Trait Category Trait Header Type #1 Category Trait Trait Category Trait Header Type #2 Category Trait Category Trait Lorem Ipsum Dolor sit amet, consectetur adipiscing elit. Maecenas purus. Pellentesque magna massa, cursus eget, commodo eu, gravida vel, felis. Vestibulum eget est. Sed convallis lectus sed turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam blandit elementum nisl. Ut vehicula suscipit nisi. Vestibulum sit amet lacus in nulla sodales ultricies. Vestibulum convallis. Integer venenatis ipsum at leo. Nulla vestibulum dui non enim. (Text before table of contents) Contents 1 Heading One     1.1 Subheading 1.1     1.2 Subheading 1.2 2 Heading Two Heading One Subheading 1.1 Maecenas sagittis convallis augue. Morbi condimentum sapien non libero. In rutrum elit vel risus. Phasellus a nibh. In nunc risus, rhoncus eleifend, faucibus ultrices, elementum vel, ligula. Nullam tempus. Maecenas bibendum est in risus. Vivamus tellus eros, volutpat in, porta eu, molestie ut, leo. Mauris vehicula leo non est. Ut sit amet lectus. Donec nec neque. top Subheading 1.2 Caption for this image. Phasellus nec diam vel metus egestas semper. Mauris scelerisque rhoncus ligula. Vivamus id odio. Quisque metus sem, semper et, imperdiet eget, commodo sit amet, leo. Aliquam ullamcorper lacus quis magna. Quisque ac turpis. In iaculis aliquet ipsum. Aenean viverra ultrices lacus. In vitae tortor elementum justo lobortis tristique. Nam pellentesque consectetur eros. Proin dolor elit, tristique in, tristique a, pharetra ac, eros. Cras cursus. Cras sapien. Suspendisse consectetur fringilla felis. Proin dui. Phasellus dictum diam eget leo posuere facilisis. Nam blandit elementum nisl. Ut vehicula suscipit nisi. Vestibulum sit amet lacus in nulla sodales ultricies. Vestibulum convallis. Integer venenatis ipsum at leo. Nulla vestibulum dui non enim. top Heading Two Cras posuere nisl. Suspendisse fringilla nibh sed nunc. Vestibulum ac nulla. Aliquam orci lorem, faucibus vel, tempus at, hendrerit ut, tortor. Donec ultrices, leo ut ullamcorper aliquam, velit nibh eleifend urna, in ornare nisl turpis vel velit. Maecenas varius. Fusce felis nunc, malesuada vitae, semper consequat, laoreet a, magna. Cras hendrerit lorem eget diam. Etiam pulvinar ipsum nec nunc. Curabitur pretium leo et massa dapibus volutpat. Nam enim urna, laoreet vitae, sollicitudin eu, euismod in, nunc. Nullam euismod sapien nec felis. top

another live example @ Scribbld

Code
<table width="100%" cellpadding="0px" cellspacing="0px" align="justify" style="margin-bottom: 20px;"> <tr> <td><table width="100%" cellspacing="0px"> <tr> <td width="10px" style="border-bottom: 1px solid #aaaaaa;">&nbsp;</td> <td width="75px" align="center" valign="top" bgcolor="white" style="border-width: 1px 1px 0px 1px; border-style: solid; border-color: #fabd23; padding: 2px 10px 2px 10px;"><font style="font-family: Arial, Helvetica, sans-serif; color: #002bb8; font-size: 10pt; font-weight: bold;">profile</font></td> <td width="10px" style="border-bottom: 1px solid #aaaaaa;">&nbsp;</td> <td width="75px" align="center" valign="top" bgcolor="white" style="padding: 2px 10px 2px 10px; border: 1px solid #aaaaaa;"><a href="http://www.insanejournal.com/users/USERNAME" style="text-decoration: none;"><font style="font-family: Arial, Helvetica, sans-serif; color: #002bb8; font-size: 10pt;">journal</font></a></td> <td width="10px" style="border-bottom: 1px solid #aaaaaa;">&nbsp;</td> <td width="75px" align="center" valign="top" bgcolor="white" style="padding: 2px 10px 2px 10px; border: 1px solid #aaaaaa;"><a href="http://www.insanejournal.com/allpics.bml?user=USERNAME" style="text-decoration: none;"><font style="font-family: Arial, Helvetica, sans-serif; color: #002bb8; font-size: 10pt;">icons</font></a></td> <td width="10px" style="border-bottom: 1px solid #aaaaaa;">&nbsp;</td> <td width="75px" align="center" valign="top" bgcolor="white" style="padding: 2px 10px 2px 10px; border: 1px solid #aaaaaa;"><a href="http://www.insanejournal.com/users/USERNAME/friends" style="text-decoration: none;"><font style="font-family: Arial, Helvetica, sans-serif; color: #002bb8; font-size: 10pt;">friends</font></a></td> <td width="10px" style="border-bottom: 1px solid #aaaaaa;">&nbsp;</td> <td width="75px" align="center" valign="top" bgcolor="white" style="padding: 2px 10px 2px 10px; border: 1px solid #aaaaaa;"><a href="http://www.insanejournal.com/users/CDJ_USERNAME" style="text-decoration: none;"><font style="font-family: Arial, Helvetica, sans-serif; color: #002bb8; font-size: 10pt;">player</font></a></td> <td width="10px" style="border-bottom: 1px solid #aaaaaa;">&nbsp;</td> <td width="75px" align="center" valign="top" bgcolor="white" style="padding: 2px 10px 2px 10px; border: 1px solid #aaaaaa;"><a href="http://asylums.insanejournal.com/rp_tutorials" style="text-decoration: none;"><font style="font-family: Arial, Helvetica, sans-serif; color: #002bb8; font-size: 10pt;">layout credit</font></a></td> <td style="padding: 2px 10px 2px 10px; border-bottom: 1px solid #aaaaaa;">&nbsp;</td></tr></table></td> </tr> <tr><td style="padding: 0px 15px 15px 15px; border-width: 0px 1px 1px 1px; border-style: solid; border-color: #aaaaaa;" align="justify" bgcolor="white"><table width="100%"> <tr><td width="100%" style="border-bottom: 1px solid #aaaaaa; padding-top: 10px;"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 20pt;">Character Name</font></td></tr> <tr><td><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 10pt;">From <a href="GAME_URL" style="text-decoration: none;"><font color="#002bb8">Game Link</font></a>, brief game description</font></td></tr></table> <font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 10pt; line-height: 18px;"><div style="float: right; width: 254px; padding: 6px; margin: 0px 0px 0px 10px; border: 1px solid #aaaaaa; background-color: #f9f9f9;"><div style="text-align: center; padding: 2px; margin-bottom: 8px; background-color: #e6e6fa;"><font style="font-size: 12pt; font-weight: bold;">Character Name</font></div><center><img src="IMAGE_URL" width="250px" height="280px" alt="Name" style="border: 1px solid #aaaaaa;"></center> <table width="220px" align="center" cellpadding="2px" cellspacing="4px"> <tr> <td width="40%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;"><b>Category</b></font></td> <td width="60%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;">Trait</font></td> </tr> <tr> <td width="40%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;"><b>Category</b></font></td> <td width="60%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;">Trait</font></td> </tr> <tr> <td width="40%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;"><b>Category</b></font></td> <td width="60%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;">Trait</font></td> </tr> </table> <div style="text-align: center; padding: 2px; background-color: #e6e6fa;"><font style="font-size:8pt;"><b>Header Type #1</b></font></div> <table width="220px" align="center" cellpadding="2px" cellspacing="4px"> <tr> <td width="40%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;"><b>Category</b></font></td> <td width="60%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;">Trait Trait</font></td> </tr> <tr> <td width="40%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;"><b>Category</b></font></td> <td width="60%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;">Trait</font></td> </tr> </table> <div style="text-align: center; padding: 2px; margin: 2px 0px 2px 0px;"><font style="font-size:8pt;"><b>Header Type #2</b></font></div> <table width="220px" align="center" cellpadding="2px" cellspacing="4px"> <tr> <td width="40%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;"><b>Category</b></font></td> <td width="60%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;">Trait</font></td> </tr> <tr> <td width="40%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;"><b>Category</b></font></td> <td width="60%" align="justify" valign="top"><font style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 8pt;">Trait</font></td> </tr> </table></div> <b>Lorem Ipsum Dolor</b> sit amet, consectetur adipiscing elit. Maecenas purus. Pellentesque magna massa, cursus eget, commodo eu, gravida vel, felis. Vestibulum eget est. Sed convallis lectus sed turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam blandit elementum nisl. Ut vehicula suscipit nisi. Vestibulum sit amet lacus in nulla sodales ultricies. Vestibulum convallis. Integer venenatis ipsum at leo. Nulla vestibulum dui non enim. (Text before table of contents) <div style=" width: 200px; padding: 10px; margin: 10px 10px 10px 0px; border:1px #aaaaaa solid; background-color: #f9f9f9;"><center><font style="font-weight: bold;">Contents</font></center> <font style="line-height:20px;"><a href="#head_1" style="text-decoration: none;"><font style="color: #002bb8;">1 Heading One</font></a> &nbsp; &nbsp; <a href="#subhead_1_1" style="text-decoration: none;"><font style="color: #002bb8;">1.1 Subheading 1.1</font></a> &nbsp; &nbsp; <a href="subhead_1_2" style="text-decoration: none;"><font style="color: #002bb8;">1.2 Subheading 1.2</font></a> <a href="head_2" style="text-decoration: none;"><font style="color: #002bb8;">2 Heading Two</font></a></div> <a name="head_1"></a><div style="padding-bottom: 4px; border-bottom: 1px solid #aaaaaa;"><font style="font-size: 16pt;">Heading One</font></div> <a name="subhead_1_1"></a><b>Subheading 1.1</b> Maecenas sagittis convallis augue. Morbi condimentum sapien non libero. In rutrum elit vel risus. Phasellus a nibh. In nunc risus, rhoncus eleifend, faucibus ultrices, elementum vel, ligula. Nullam tempus. Maecenas bibendum est in risus. Vivamus tellus eros, volutpat in, porta eu, molestie ut, leo. Mauris vehicula leo non est. Ut sit amet lectus. Donec nec neque. <a href="#top" style="text-decoration: none;"><font style="color: #002bb8;">top</font></a> <a name="subhead_1_2"></a><b>Subheading 1.2</b> <div style="float: left; padding: 2px; margin: 8px 10px 10px 0px; border: 1px solid #aaaaaa; background-color: #f9f9f9; width: 154px;"><img src="IMG_URL" alt="NAME" height="100px" width="150px" style="border: 1px solid #aaaaaa; margin-bottom: 2px;"> <font style="font-size: 8pt; text-align: justify;">Caption for this image.</font></div> Phasellus nec diam vel metus egestas semper. Mauris scelerisque rhoncus ligula. Vivamus id odio. Quisque metus sem, semper et, imperdiet eget, commodo sit amet, leo. Aliquam ullamcorper lacus quis magna. Quisque ac turpis. In iaculis aliquet ipsum. Aenean viverra ultrices lacus. In vitae tortor elementum justo lobortis tristique. Nam pellentesque consectetur eros. Proin dolor elit, tristique in, tristique a, pharetra ac, eros. Cras cursus. Cras sapien. Suspendisse consectetur fringilla felis. Proin dui. Phasellus dictum diam eget leo posuere facilisis. Nam blandit elementum nisl. Ut vehicula suscipit nisi. Vestibulum sit amet lacus in nulla sodales ultricies. Vestibulum convallis. Integer venenatis ipsum at leo. Nulla vestibulum dui non enim. <a href="#top" style="text-decoration: none;"><font style="color: #002bb8;">top</font></a> <a name="head_2"></a><div style="border-bottom: 1px solid #aaaaaa; padding-bottom: 4px;"><font style="font-size: 16pt;">Heading Two</font></div> Cras posuere nisl. Suspendisse fringilla nibh sed nunc. Vestibulum ac nulla. Aliquam orci lorem, faucibus vel, tempus at, hendrerit ut, tortor. Donec ultrices, leo ut ullamcorper aliquam, velit nibh eleifend urna, in ornare nisl turpis vel velit. Maecenas varius. Fusce felis nunc, malesuada vitae, semper consequat, laoreet a, magna. Cras hendrerit lorem eget diam. Etiam pulvinar ipsum nec nunc. Curabitur pretium leo et massa dapibus volutpat. Nam enim urna, laoreet vitae, sollicitudin eu, euismod in, nunc. Nullam euismod sapien nec felis. <a href="#top" style="text-decoration: none;"><font style="color: #002bb8;">top</font></a> </font></td></tr></table>

Notes
- The picture size in the example is 280px tall x 250px wide. You can change the size constraints within the IMG tag if you want to use an alternate image size.

- The default color scheme is polished looking but a little bland. So, feel free to fiddle with the colors, fonts, or whatever your heart desires. Drop a comment here if you need help altering the code to get the appearance you want.

- Please, don't remove the credit link to rp_tutorials or claim this as your own. I started from scratch and headdesked for several hours over this code until I produced something to my liking.

- If you have any questions or concerns (especially if the code isn't working for you!) leave a comment here or you can e-mail me at xvanya_eldax[at]gmail[dot]com! :]

Edit: Code updated April 7th to fix errors created by web browser.