Rp Tutorials

( Code + Guide + Info )

Hello! So, I've been looking for a new directory for a game I mod and I always come across such amazing layouts that leave me torn. In the end, I usually smash up a few or change things around to fit the need.

I love Charsheet: Wooden Board and Taken Characters List. LOVE. They're both amazing.

Obviously, Wooden Board is for a character's profile, but I needed it! So, I tweaked, toyed around and all of that fun stuff. Took a few of the codes from Taken Characters List and smashed it all together.

The end result is here. It's not crazy beautiful, but it's simple!

<title>PAGE TITLE</title> </head> <style> body { background-image: url() !important; background-attachment: fixed !important; background-color: #000000 !important; } </style> <lj-raw><div style="background: url(http://i50.tinypic.com/b6pker.png);width:900px;margin:0 auto;padding:15px;"><table align="center" width="100%" cellpadding="0" cellspacing="10" style="line-height:170%;color:#333;font-family:helvetica;font-size:11px"><tr><td colspan="2" style="line-height:21px;text-align:center;padding-bottom:20px"><font style="font-family:helvetica;color:#111;font-size:42px;letter-spacing:3px"> Title, like Female Directory or Male Directory </font></td></tr><tr> <td valign="top" width="33%"><div style="margin-bottom:8px;border-radius:15px;background:#f9f9f9;padding:8px;text-align:center"><img src="300x375 image" style="width:300px;height:200px;background:#aaa"></div><div style="margin-bottom:8px;border-radius:15px;background:#f9f9f9;padding:8px;"> <div style="margin-bottom:5px;font-family:georgia;font-size:19px;color:#808080;font-style:italic;text-shadow: 1px 1px 0px #000000;"> Jump to...</div> <a href="#name" style="text-decoration: none; font-family: helvetica; color: #222222; font-size: 12px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#c34838" size="4">‣</font> CHARACTER NAME or PB</a><br> <a href="#sblack" style="text-decoration: none; font-family: helvetica; color: #222222; font-size: 12px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#c34838" size="4">‣</font> CHARACTER NAME or PB</a><br> <a href="#sblack" style="text-decoration: none; font-family: helvetica; color: #222222; font-size: 12px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#c34838" size="4">‣</font> CHARACTER NAME or PB</a><br> <a href="#sblack" style="text-decoration: none; font-family: helvetica; color: #222222; font-size: 12px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#c34838" size="4">‣</font> CHARACTER NAME or PB</a><br> <a href="#sblack" style="text-decoration: none; font-family: helvetica; color: #222222; font-size: 12px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#c34838" size="4">‣</font> CHARACTER NAME or PB</a><br> <a href="#sblack" style="text-decoration: none; font-family: helvetica; color: #222222; font-size: 12px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#c34838" size="4">‣</font> CHARACTER NAME or PB</a><br> <a href="#sblack" style="text-decoration: none; font-family: helvetica; color: #222222; font-size: 12px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#c34838" size="4">‣</font> CHARACTER NAME or PB</a><br> <a href="#sblack" style="text-decoration: none; font-family: helvetica; color: #222222; font-size: 12px; line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; font-weight: bold;"><font color="#c34838" size="4">‣</font> CHARACTER NAME or PB</a><br> </div></td><td valign="top" width="66%"><div style="margin-bottom:8px;border-radius:15px;background:#f9f9f9;padding:12px;text-align:justify;min-height:837px"><div align="right"><img src="http://i49.tinypic.com/1y1nch.png" style="width:120px;height:120px;border-radius:35px;background:#aaa"></div><div style="width:90%;margin-top:-45px;margin-right:80px;margin-bottom:30px;font-family:georgia;font-size:15px;color:#f9f9f9;background:#111;padding:2px;"> <a name="name"></a>Character Name<br>PLAYED BY</div> <font style="font-family: Palatino Linotype;color:#444444;font-size:10pt;"><b>AKA</b> <i>nick names</i><br> 00-00-1900 ● 00<br> <i>sexuality</i> ● Relationship<br> Occupation<br><br> AIM | <a href="">Bio</a> | <a href="">OOC</a> | <a href="">IC</a> | <a href="">Journal</a></font> <div align="right"><img src="http://i49.tinypic.com/1y1nch.png" style="width:120px;height:120px;border-radius:35px;background:#aaa"></div><div style="width:90%;margin-top:-45px;margin-right:80px;margin-bottom:30px;font-family:georgia;font-size:15px;color:#f9f9f9;background:#111;padding:2px;"> <a name="name"></a>Character Name<br>PLAYED BY</div> <font style="font-family: Palatino Linotype;color:#444444;font-size:10pt;"><b>AKA</b> <i>nick names</i><br> 00-00-1900 ● 00<br> <i>sexuality</i> ● Relationship<br> Occupation<br><br> AIM | <a href="">Bio</a> | <a href="">OOC</a> | <a href="">IC</a> | <a href="">Journal</a></font> <div align="right"><img src="http://i49.tinypic.com/1y1nch.png" style="width:120px;height:120px;border-radius:35px;background:#aaa"></div><div style="width:90%;margin-top:-45px;margin-right:80px;margin-bottom:30px;font-family:georgia;font-size:15px;color:#f9f9f9;background:#111;padding:2px;"> <a name="name"></a>Character Name<br>PLAYED BY</div> <font style="font-family: Palatino Linotype;color:#444444;font-size:10pt;"><b>AKA</b> <i>nick names</i><br> 00-00-1900 ● 00<br> <i>sexuality</i> ● Relationship<br> Occupation<br><br> AIM | <a href="">Bio</a> | <a href="">OOC</a> | <a href="">IC</a> | <a href="">Journal</a></font> <div align="right"><img src="http://i49.tinypic.com/1y1nch.png" style="width:120px;height:120px;border-radius:35px;background:#aaa"></div><div style="width:90%;margin-top:-45px;margin-right:80px;margin-bottom:30px;font-family:georgia;font-size:15px;color:#f9f9f9;background:#111;padding:2px;"> <a name="name"></a>Character Name<br>PLAYED BY</div> <font style="font-family: Palatino Linotype;color:#444444;font-size:10pt;"><b>AKA</b> <i>nick names</i><br> 00-00-1900 ● 00<br> <i>sexuality</i> ● Relationship<br> Occupation<br><br> AIM | <a href="">Bio</a> | <a href="">OOC</a> | <a href="">IC</a> | <a href="">Journal</a></font> <div align="right"><img src="http://i49.tinypic.com/1y1nch.png" style="width:120px;height:120px;border-radius:35px;background:#aaa"></div><div style="width:90%;margin-top:-45px;margin-right:80px;margin-bottom:30px;font-family:georgia;font-size:15px;color:#f9f9f9;background:#111;padding:2px;"> <a name="name"></a>Character Name<br>PLAYED BY</div> <font style="font-family: Palatino Linotype;color:#444444;font-size:10pt;"><b>AKA</b> <i>nick names</i><br> 00-00-1900 ● 00<br> <i>sexuality</i> ● Relationship<br> Occupation<br><br> AIM | <a href="">Bio</a> | <a href="">OOC</a> | <a href="">IC</a> | <a href="">Journal</a></font> </div><div style="text-align:right;letter-spacing:2px;word-spacing:3px;font-size:9px">Two codes all smashed up, <a href="http://asylums.insanejournal.com/rp_tutorials/100739.html#cutid1" style="text-decoration:none"><font color="#333">©</a> & <a href="http://asylums.insanejournal.com/rp_tutorials/323091.html#cutid1">©</a></font></div></td></tr></table></div></lj-raw>

Credit to both original codes are included in the code! Please leave it there.

( Code + Guide + Info )

&


( Codes + Guides + Info )

( character table/directory )

( character table/directory )

( character table/directory )

ACTIVITY LIST So, chaperoned tapped a post in my CDJ about three months ago telling me I should put up the coding for this list I coded to help me keep up with what activity I'd done in the games I'm in. Now that I'm not running around like a chicken with my head cut off, here you go. ( larger image and directions!! )

chaperoned asked me if I could post the code that I wrote for my CDJ's character directory, so here it is =D The rules on how to use the code, including extra code for adding more rows are under the cut!

The live preview can be seen here in my CDJ. I'm afraid you can no longer view the live preview because I've changed my directory. This is a snapshot of what it used to look like. Be warned, the picture is over 300kb.

The code for that particular table, under the LJ-Cut, will look like the following initially, before you change the colours, the text, and the fake!broken tiny icons.



Please follow the instructions under the cut using the provided blank codes. If you need any help, leave a comment =)

I'd appreciate it if you'd leave me credit in whatever disclaimer or credits post you have in your journal, so a simple Character Directory code by bonemeal would be great.

( Legend, Quicklinks, & Character Directory Tables )

Live Preview

( Taken Characters Layout )

Just a quick update to say I'm on hiatus. I'll be around to take care of drama and things, but otherwise I'll be gone for a little while (maybe a week or two?). Hopefully when I get back I won't feel so burnt out on rp_tutorials stuff and will be able to throw out the following things I'm working on: how to play/deal with minorities in a game, how to fix up an rp application w/ tips from the application review post, a monthly theme, how to advertise for PSLs, RPGs @ IJ 101, and updated directories.

Until then, here's a bit of code I was testing out for the site design but ultimately decided not to use:



( Who knows )

( Character List )

[click image or cut for full size or under the cut]
( Past and Retired!! )

[click image or cut for full size or under the cut]
( Boys and girls! )

( Icon Table )

Filmstrip CDJ layout

- Definitely not your standard character table
- Mainly for CDJ connoisseur types, who value form with their function
- Moderate understanding of HTML recommended
- View in use here

( Instructions for Use )

Hello!

I am here to present for you, a cast directory page that is not only incredibly useful, but informative as well. The code was originally made by my really good friend, define who gave it to me, which I have edited appropriately. I'll be sharing the HTML with you today, as well as explaining what you could do, and what should be done.

SCREENSHOTS, FTW.
( this way, to the bat mobile! )

( click here to read my shitty explanation guide! :D )

( holy crap, this is a lot of credits. )

( have an example of this code? )

( Character Directory )

( User Info Layout and CDJ Directory )

( Icon Directory )