Entry tags:

layouts: character profiles, 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.

	Page 1 of 2 << [1] [2] >>

(Post a new comment)

	_kyri 2009-04-06 10:55 am UTC (link)
	This is kind of amazing, have to say. (Reply to this) (Thread)

(no subject) - wastintime, 2009-04-06 11:29 am UTC

	ramdonomo 2009-04-06 11:34 am UTC (link)
	I have to agree with _kyri, this is really fantastic. (Reply to this) (Thread)

(no subject) - wastintime, 2009-04-06 12:11 pm UTC

(no subject) - ramdonomo, 2009-04-06 12:18 pm UTC

(no subject) - wastintime, 2009-04-07 11:39 am UTC

(no subject) - americanbadass, 2009-04-15 11:09 am UTC

	chatoyant 2009-04-06 01:00 pm UTC (link)
	That is totally sweet. Wow, I never really bother to do any formatting with my characters' profiles, but now I'm totally tempted to. Does this work in userinfos or would it have to be a post? (Reply to this) (Thread)

(no subject) - wastintime, 2009-04-06 05:52 pm UTC

	hammertech 2009-04-06 05:38 pm UTC (link)
	This? Is the most ace thing I have seen in ages and can only imagine the headaches it must have caused. Formatting tabs sucks. Formatting tabs AND those tables is like... dude, you masochist. <3 Very cool. (Reply to this) (Thread)

(no subject) - wastintime, 2009-04-06 05:58 pm UTC

(no subject) - musesandicons, 2009-04-06 06:30 pm UTC

(no subject) - wastintime, 2009-04-07 11:38 am UTC

(no subject) - hammertech, 2009-04-16 10:16 am UTC

	tetris 2009-04-06 06:22 pm UTC (link)
	This is... AMAZING. (Reply to this) (Thread)

(no subject) - wastintime, 2009-04-07 11:40 am UTC

	maliciousintent 2009-04-07 01:12 am UTC (link)
	wow... (Reply to this) (Thread)

(no subject) - wastintime, 2009-04-07 11:41 am UTC

ex_darkestst606 2009-04-07 01:52 am UTC (link)

This is amazing. I LOVE IT. But I have a problem! Every time I try to use it, I get a funny glitch. I've tried it in IE and in Firefox, and it's still not working - no matter how many times I copy and paste your example without even editing the code at all or having put in my own answers. You can find the (really, really incomplete) live example here. For the record: Both the example on this page and the example on scribbld work, so I'm thinking it's maybe just operator trouble? D: Screenshots: (had to take a couple to actually try and point out the problem >.<) one two three See how it's pushing that one bar/line thing over? >.< I've been playing with it all day and I've managed to thoroughly confuse myself. (This, for the record, is... the example code with the username, sidebar, and "Character Name" sections filled out only. I figured... I'd better just start over again from scratch at this point.) Also, and unrelated to the bar/line-thing problem: Whenever I try to edit the Table of Contents, it screws up the spacing on me. Haven't quite figured that one out, either, but that I can live with. >.> I REALLY like this code but it doesn't... seem to actually want to work for me. I've tried with and without the "Auto Formatting" box checked, I've tried fiddling with the code itself, but... I really... don't know what it is now. (Reply to this) (Thread)

(no subject) - wastintime, 2009-04-07 02:45 am UTC

(no subject) - ex_darkestst606, 2009-04-07 03:25 am UTC

(no subject) - wastintime, 2009-04-07 11:18 am UTC

(no subject) - ex_darkestst606, 2009-04-07 03:06 pm UTC

	honeyspider 2009-04-07 02:55 am UTC (link)
	Wow. This is AMAZING. Good work! (Reply to this) (Thread)

(no subject) - wastintime, 2009-04-07 11:38 am UTC

	stageandscreen 2009-04-11 11:07 am UTC (link)
	This is awesome. Used for a PSl in this journal here Totally don't judge/read the profile, it still so needs an editing. Credit link left intact, and colors and pictures tinkered with. Badly! Thank so much! (Reply to this)

	miraclegro 2009-04-26 12:07 pm UTC (link)
	Amazing. I just had to say that. I might use it once my muses comply, and I'll of course leave the credit if/when I do, but I just wanted to say kudos. (Reply to this)

	bloodlikemagic 2009-05-26 08:28 am UTC (link)
	*stares* That is goddamn BRILLIANT. (Reply to this)

	jillian 2009-05-31 02:59 pm UTC (link)
	I love this! I will credit when I use it. Thanks! (Reply to this)

	stormcaller 2009-06-18 10:27 pm UTC (link)
	Just wanted you to get a chance to see your very awesome profile in action: http://stormcaller.insanejournal.com/265.html Thanks again for all the hard work! (Reply to this)

	mediamogal 2009-06-22 06:51 am UTC (link)
	Brilliant! Using this for this character at axis_city_ (Reply to this)

	mirror_darkly 2009-06-26 09:34 pm UTC (link)
	This is THE coolest profile layout EVER!! I just have one question, is the Content menu actually supposed to link to the sections? Mine won't jump to any section past 1.1, it gives me a Not Found page error when I click it. (Reply to this)

	mediamogal 2009-07-06 09:24 pm UTC (link)
	I have a live version here if anyone else wants to see it. (Reply to this)

	i_am_cedes 2009-07-23 06:58 am UTC (link)
	I love it, but it's not working? There are no boxes. (Reply to this)

	jaymac 2009-08-06 11:59 pm UTC (link)
	super awesome. Using here. (Reply to this)

	signal_analysis 2009-10-31 09:00 am UTC (link)
	I am totally not worthy. -gives chai snickerdoodle cookies and a pony- I've used it here and here (last one's not quite done yet, but the profile's set up!) Thank you for such amazing code. :) (Reply to this)

	kc_severus 2009-11-18 06:26 am UTC (link)
	This is probably the most confusing layout I've ever used, but it looks great! I've changed a lot of things, but it still has credit for the original design. Thanks for sharing it! (Reply to this)

	shoenfield 2009-12-02 01:02 am UTC (link)
	I can't seem to get it to work. :/ (Reply to this)

	deanmandrews 2010-03-18 03:36 pm UTC (link)
	Ugh! Looks so freaking AMAZING! You are awesome!!!! (Reply to this)

	du_nord 2010-03-23 06:23 pm UTC (link)
	This is so awesome. I'm using it here as an IC Wiki page for my fictional celebrity. :P Thanks so much for the code! It is truly amazing, and I take off my hat to you. (Reply to this)

	coll_mi 2010-05-14 04:56 pm UTC (link)
	A mishapedia sounds like a wonderful idea... I think I shall give this one a whirl. (Reply to this)

	reddishblonde 2010-06-10 01:57 am UTC (link)
	I really love it and will be using it. I was wondering how you did the family tree page? If you can share that code of course :) (Reply to this) (Thread)

(no subject) - wastintime, 2010-07-02 03:35 pm UTC

---

	Page 1 of 2 << [1] [2] >>