[CODE] very simple character archive (3 versions)

POSTED: Tue May 25, 2010 1:46 am

[html]<h2>Directions & Use</h2>
<p>There are directions to this character archive. They haven't really been edited for use outside of 'Souls (e.g., there are links to things you should do/can do at 'Souls) since I intended for this to be mostly-used at 'Souls (though you can also find it at <a href="http://rpgdirectory.com">RPG-Directory</a>). BUT, yes. The directions, they are embedded into the CSS. You can leave them or strip them out, whatevs suits your fancy.</p>

<p>If you can use doHTML in your posts (you can at 'Souls) or HTML is enabled on your forums, you can use the VSCA directly on your forum. If not, you can always embed it into a web page. There's an example of a text-only VSCA <a href="http://sleepyglow.net/sie/rpgd/vsca.html">here</a>. I didn't do anything but put HTML and body tags around that (and maybe messed with the padding, but shh).</p>

<h2>Text Only Very Simple Character Archive</h2>
<h3>Text Only Code</h3>
<textarea class="toggle" cols="100" rows="6">
<div class="char-archive">
<div class="char-title"><span class="char-header">Character Name</span>
<br>You can put links to a profile or an image... whatever you want, really, here. :3
<br>→ <a href="http://wiki.soulsrpg.com/index.php?n=Characters.CharacterName">'Souls Wiki Profile</a>
<br>→ <a href="#">Detailed Profile</a></div>
<div class="char-notes">character status, notes, key, whatever you wanna put here. :] I tend to use this space for how many active threads I have at the moment, or "dead character" or "inactive character."</div>
<div class="char-list">
<div class="separator">2009 :: Year Title</div>
<ol><li><em><span class="char-post">Δ</span> <b><a href="?viewtopic.php?t=#">Thread Title</a> (DD Mon) <span class="char-archive-warn" title="MATURE THREAD">(M)</span></b>
<p>Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</p></em>
<div class="separator">2010 :: Year Title</div></li>
<li><em><span class="char-post">Ω</span> <b><a href="?viewtopic.php?t=#">Thread Title</a> (DD Mon)</b>
<p>Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</p></em></li>
</ol>
<div class="vsca-credit">Very Simple Character Archive by <a href="http://tbd.sleepyglow.net">Sie</a>!</div>
</div></div>
<style>
.vsca-credit { width:95%; margin:0 auto; font-family:georgia, serif; font-size:10px; text-transform:uppercase; letter-spacing:.05px; text-align:right;}
/*Just some general notes: You can use this to keep track of your Word of the Day or game points, too. It counts them automatically for you, then. 8D An example of this can be found in Sie's postlog (http://www.soulsrpg.com/ipb/index ... st&p=95421). Please feel free to quote the post and lift that example, though I swear there's nothing different about that code than the code provided here! Also, remember, if you use the basic DIV shell in multiple posts, you only need to include the CSS once! That's it! And then you can control all of your archives with one CSS, if you please! If not, and you want multiple different layouts for each character and you plan to customise each one, *PLEASE* remember to change your class names from .char to your character's name or another unique identification, otherwise your CSSes will overlap and it will be bad.*/
.char-archive {width:95%; margin:0 auto; font-family:'times new roman', times, serif; font-size:14px;}
/* Main DIV control. This controls your base text. If you want a background or border, you can add them here. You can combine this with my pure css table tutorial, sort of, and set a background image with padding to make it pretty, if you want. :D*/
.char-archive li {padding:2px 0px; margin:0px; list-style-type: decimal-leading-zero; font-weight:bold;}
/*This controls the list items and gives them 2px padding on the top and bottom, 0px padding to the left and right, and a leading zero on the list numbers. It also makes the font weight of the numbers bold.*/
.char-archive li em {font-family:georgia, serif; font-size:12px; letter-spacing:-.1px; line-height:16px; font-style:normal; font-weight:normal; }
/*This is so that we can use a different text/font weight/color/etc for our numbers, and have our actual list item content text differ from the numbers. COOL RITE? */
.char-archive ol { list-style-position:inside; padding:0px; margin:0px; }
/* This sets the position of the numbers inside; you can also have them display outside, if you like, which will push all of the text over to the right and separate out the numbers to the left slightly. I wouldn't mess with the padding or margin unless you want to add spacing around your archive list.*/
.char-archive p {text-indent:25px; margin:0px; padding:0px; }
/*Gives your paragraphs a text indent. I generally only would wrap the thread description with a paragraph tag. If you want to give your thread description a little padding or margin or something, you can adjust those values.*/
.char-archive-warn {color:#AA0000; font-weight:bold;} /*Mature thread warning text color and weight. Please remember to mark your mature threads in their titles, the first post with the provided warnings, (http://www.soulsrpg.com/ipb/index ... t&p=107437), and in profiles, archives, and post logs. Anywhere you can give people a heads up about a mature thread is good.*/
.char-archive li a {text-transform:lowercase;}
/*Controls the links used in your list items. If you want all of them to display upper or lowercase, I would recommend setting it via CSS rather than manually typing it in capitalized or all lowercase, because it is far, far easier to go back and change things later if you use CSS to set such things. :) I typed all of the thread titles in my character archives as properly capitalized and just set the links to display as lowercase. Remember, the fact that the a tag is declared after the li tag means that only links within your list items will change; any links outside of this (e.g., where the Wiki Profile / Detailed Profile links are) are not affected.*/
.char-post {font-size:15px; color:#8C0404;}
/*If you want to use the little symbols, this controls their color and size. I like for the symbols to stick out from the rest of the text, hence the color. They also don't look very good at smaller sizes, that is why they are set for 15px. Feel free to experiment, of course. :3*/
.char-archive .separator { font-family:'times new roman', times, serif; font-size:17px; text-transform:uppercase; border-bottom:1px dotted #000000; font-weight:bold; text-align:right; padding-right:10%;}
/*This is the separator control. Font variables and so forth. A note for the separators, you have to place them WITHIN a list item tag (li) in order for them to function properly for every instance except the first one, which is placed outside of the first ordered list tag (ol). An example of this has been done for you--please remember this, otherwise the separators are liable to break something somehow and you will have to rescue your codez and it will not be fun. */
.char-header {font-family:georgia, serif; font-size:22px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; }
/*Controls the "Character Name" part's font and etc.*/
.char-title {width:50%; float:left;}
/* Makes the part with your character name and the notes beneath it float to the left. You can change this to right, just remember to set char-notes float to left. */
.char-notes {float:right; width:50%;}
/*Makes your character notes float to the right. You can change this to left, just remember to set char-post float to right too.*/
.char-list {clear:both; padding-top:10px;}
/*This makes your list clear the title and character notes divs. Don't touch this.;P You can change the padding so that there is a different amount between the thread list and your upper two divs; beyond that leave this part alone.*/
</style>
</textarea>

<p>The basic thing with this one is that it's designed to sort of flow with the natural font stylings of the forum or something. It doesn't use colors or links or whatever, so it survives forum skins pretty damn well. XD</p>

<h3>Text-Only VSCA Example</h3>

<div class="vsca-archive toggle">
<div class="vsca-title"><span class="vsca-header">Character Name</span>
<br>You can put links to a profile or an image... whatever you want, really, here. :3

<br>→ <a href="http://wiki.soulsrpg.com/index.php?n=Characters.CharacterName">'Souls Wiki Profile</a>
<br>→ <a href="#">Detailed Profile</a></div>
<div class="vsca-notes">character status, notes, key, whatever you wanna put here. :] I tend to use this space for how many active threads I have at the moment, or "dead character" or "inactive character."</div>

<div class="vsca-list">
<div class="separator">2009 :: Year Title</div>
<ol><li><em><span class="vsca-post">Δ</span> <b><a href="?viewtopic.php?t=#">Thread Title</a> (DD Mon) <span class="vsca-archive-warn" title="MATURE THREAD">(M)</span></b>

<p>Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</p></em>
<div class="separator">2010 :: Year Title</div></li>
<li><em><span class="vsca-post">Ω</span> <b><a href="?viewtopic.php?t=#">Thread Title</a> (DD Mon)</b>

<p>Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</p></em></li>
</ol>
<div class="vsca-credit">Very Simple Character Archive by <a href="http://tbd.sleepyglow.net">Sie</a>!</div>

</div></div>
<style>
.vsca-credit { width:95%; margin:0 auto; font-family:georgia, serif; font-size:10px; text-transform:uppercase; letter-spacing:.05px; text-align:right;}
.vsca-archive {width:95%; margin:0 auto; font-family:'times new roman', times, serif; font-size:14px;}
.vsca-archive li {padding:2px 0px; margin:0px; list-style-type: decimal-leading-zero; font-weight:bold;}
.vsca-archive li em {font-family:georgia, serif; font-size:12px; letter-spacing:-.1px; line-height:16px; font-style:normal; font-weight:normal; }
.vsca-archive ol { list-style-position:inside; padding:0px; margin:0px; }
.vsca-archive p {text-indent:25px; margin:0px; padding:0px; }
.vsca-archive-warn {color:#AA0000; font-weight:bold;}
.vsca-archive li a {text-transform:lowercase;}
.vsca-post {font-size:15px; color:#8C0404;}
.vsca-archive .separator { font-family:'times new roman', times, serif; font-size:17px; text-transform:uppercase; border-bottom:1px dotted #000000; font-weight:bold; text-align:right; padding-right:10%;}
.vsca-header {font-family:georgia, serif; font-size:22px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; }
.vsca-title {width:50%; float:left;}
.vsca-notes {float:right; width:50%;}
.vsca-list {clear:both; padding-top:10px;}
</style>

<h2>Skinned Very Simple Character Archive</h2>
<h3>Skinned VSCA Code</h3>
<textarea class="toggle">
<div class="char-archive">
<div class="char-title"><span class="char-header">Character Name</span>
<br>You can put links to a profile or an image... whatever you want, really, here. :3
<br>→ <a href="http://wiki.soulsrpg.com/index.php?n=Characters.CharacterName">'Souls Wiki Profile</a>
<br>→ <a href="#">Detailed Profile</a></div>
<div class="char-notes">character status, notes, key, whatever you wanna put here. :] I tend to use this space for how many active threads I have at the moment, or "dead character" or "inactive character."</div>
<div class="char-list">
<div class="separator">2009 :: Year Title</div>
<ol><li><em><span class="char-post">Δ</span> <b><a href="?viewtopic.php?t=#">Thread Title</a> (DD Mon) <span class="char-archive-warn" title="MATURE THREAD">(M)</span></b>
<p>Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</p></em>
<div class="separator">2010 :: Year Title</div></li>
<li><em><span class="char-post">Ω</span> <b><a href="?viewtopic.php?t=#">Thread Title</a> (DD Mon)</b>
<p>Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</p></em></li>
</ol>
</div></div>
<div class="vsca-credit">Very Simple Character Archive by <a href="http://tbd.sleepyglow.net">Sie</a>!</div>
<style>
/*Just some general notes: You can use this to keep track of your Word of the Day or game points, too. It counts them automatically for you, then. 8D An example of this can be found in Sie's postlog (http://www.soulsrpg.com/ipb/index ... st&p=95421). Please feel free to quote the post and lift that example, though I swear there's nothing different about that code than the code provided here! Also, remember, if you use the basic DIV shell in multiple posts, you only need to include the CSS once! That's it! And then you can control all of your archives with one CSS, if you please! If not, and you want multiple different layouts for each character and you plan to customise each one, *PLEASE* remember to change your class names from .char to your character's name or another unique identification, otherwise your CSSes will overlap and it will be bad.*/
.vsca-credit { width:95%; margin:0 auto; font-family:georgia, serif; font-size:10px; text-transform:uppercase; letter-spacing:.05px; text-align:right;}
.char-archive {width:95%; margin:0 auto; font-family:'times new roman', times, serif; font-size:14px; background-color:#364D62; color:#D1E6FA; border:1px solid #0E161E; padding:5px;}
/* Main DIV control. This controls your base text. If you want a background or border, you can add them here. You can combine this with my pure css table tutorial, sort of, and set a background image with padding to make it pretty, if you want. :D*/
.char-archive li {padding:2px 0px; margin:0px; list-style-type: decimal-leading-zero; font-weight:bold; color:#98ACBF;}
/*This controls the list items and gives them 2px padding on the top and bottom, 0px padding to the left and right, and a leading zero on the list numbers. It also makes the font weight of the numbers bold and differentiates the color from the rest of the colors. Yaaaaaaay.*/
.char-archive li em {font-family:georgia, serif; font-size:12px; letter-spacing:-.1px; line-height:16px; font-style:normal; font-weight:normal; color:#D1E6FA; }
/*This is so that we can use a different text/font weight/color/etc for our numbers, and have our actual list item content text differ from the numbers. COOL RITE? */
.char-archive ol { list-style-position:inside; padding:0px; margin:0px; }
/* This sets the position of the numbers inside; you can also have them display outside, if you like, which will push all of the text over to the right and separate out the numbers to the left slightly. I wouldn't mess with the padding or margin unless you want to add spacing around your archive list.*/
.char-archive p {text-indent:25px; margin:0px; padding:0px; }
/*Gives your paragraphs a text indent. I generally only would wrap the thread description with a paragraph tag. If you want to give your thread description a little padding or margin or something, you can adjust those values.*/
.char-archive-warn {color:#FF6C6C; font-weight:bold;} /*Mature thread warning text color and weight. Please remember to mark your mature threads in their titles, the first post with the provided warnings, (http://www.soulsrpg.com/ipb/index ... t&p=107437), and in profiles, archives, and post logs. Anywhere you can give people a heads up about a mature thread is good.*/
.char-archive a:link,.char-archive a:visited {color:#699AC8; text-decoration:none;}
.char-archive a:active,.char-archive a:hover {color:#7BB9F3; text-decoration:none;}
/*Controls the links used throughout your profile thing.*/
.char-post {font-size:15px; color:#7389AE;}
/*If you want to use the little symbols, this controls their color and size. I like for the symbols to stick out from the rest of the text, hence the color. They also don't look very good at smaller sizes, that is why they are set for 15px. Feel free to experiment, of course. :3*/
.char-archive .separator { font-family:'times new roman', times, serif; font-size:17px; text-transform:uppercase; border-bottom:1px dotted #729AC0; font-weight:bold; text-align:right; padding-right:10%; color:#121F2B;}
/*This is the separator control. Font variables and so forth. A note for the separators, you have to place them WITHIN a list item tag (li) in order for them to function properly for every instance except the first one, which is placed outside of the first ordered list tag (ol). An example of this has been done for you--please remember this, otherwise the separators are liable to break something somehow and you will have to rescue your codez and it will not be fun. */
.char-header {font-family:georgia, serif; font-size:22px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; color:#E8F0F8;}
/*Controls the "Character Name" part's font and etc.*/
.char-title {width:50%; float:left;}
/* Makes the part with your character name and the notes beneath it float to the left. You can change this to right, just remember to set char-notes float to left. */
.char-notes {float:right; width:50%;}
/*Makes your character notes float to the right. You can change this to left, just remember to set char-post float to right too.*/
.char-list {clear:both; padding-top:10px;}
/*This makes your list clear the title and character notes divs. Don't touch this.;P You can change the padding so that there is a different amount between the thread list and your upper two divs; beyond that leave this part alone.*/
</style>
</textarea>

<p>This is just a skinnable version of the above. 8D</p>

<h3>Skinned VSCA Example</h3>

<div class="char-archive toggle">
<div class="char-title"><span class="char-header">Character Name</span>
<br>You can put links to a profile or an image... whatever you want, really, here. :3
<br>→ <a href="http://wiki.soulsrpg.com/index.php?n=Characters.CharacterName">'Souls Wiki Profile</a>
<br>→ <a href="#">Detailed Profile</a></div>

<div class="char-notes">character status, notes, key, whatever you wanna put here. :] I tend to use this space for how many active threads I have at the moment, or "dead character" or "inactive character."</div>
<div class="char-list">
<div class="separator">2009 :: Year Title</div>
<ol><li><em><span class="char-post">Δ</span> <b><a href="?viewtopic.php?t=#">Thread Title</a> (DD Mon) <span class="char-archive-warn" title="MATURE THREAD">(M)</span></b>

<p>Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</p></em>
<div class="separator">2010 :: Year Title</div></li>
<li><em><span class="char-post">Ω</span> <b><a href="?viewtopic.php?t=#">Thread Title</a> (DD Mon)</b>

<p>Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</p></em></li>
</ol>
</div>
<div class="vsca-credit">Very Simple Character Archive by <a href="http://tbd.sleepyglow.net">Sie</a>!</div> </div>

<style>
.vsca-credit { width:95%; margin:0 auto; font-family:georgia, serif; font-size:10px; text-transform:uppercase; letter-spacing:.05px; text-align:right;}
.char-archive {width:95%; margin:0 auto; font-family:'times new roman', times, serif; font-size:14px; background-color:#364D62; color:#D1E6FA; border:1px solid #0E161E; padding:5px;}
.char-archive li {padding:2px 0px; margin:0px; list-style-type: decimal-leading-zero; font-weight:bold; color:#98ACBF;}
.char-archive li em {font-family:georgia, serif; font-size:12px; letter-spacing:-.1px; line-height:16px; font-style:normal; font-weight:normal; color:#D1E6FA; }
.char-archive ol { list-style-position:inside; padding:0px; margin:0px; }
.char-archive p {text-indent:25px; margin:0px; padding:0px; }
.char-archive-warn {color:#FF6C6C; font-weight:bold;}
.char-archive a:link,.char-archive a:visited {color:#699AC8; text-decoration:none;}
.char-archive a:active,.char-archive a:hover {color:#7BB9F3; text-decoration:none;}
.char-post {font-size:15px; color:#7389AE;}
.char-archive .separator { font-family:'times new roman', times, serif; font-size:17px; text-transform:uppercase; border-bottom:1px dotted #729AC0; font-weight:bold; text-align:right; padding-right:10%; color:#121F2B;}
.char-header {font-family:georgia, serif; font-size:22px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; color:#E8F0F8;}
.char-title {width:50%; float:left;}
.char-notes {float:right; width:50%;}
.char-list {clear:both; padding-top:10px;}
</style>

<h2>BB Code VSCA</h2>
<textarea class="toggle">
<span style='font-family:georgia'><span style='font-size:14pt;line-height:100%'>Character Name</span><ol type='i'>[*] <a href='http://google.com' target='_blank'>Profile Link</a></li>[*] <a href='http://google.com' target='_blank'>Wiki Link</a></li></ol><ol type='a'>[*]<span style='font-size:12pt;line-height:100%'>YEAR TITLE :: 2010</span><ol type='1'>[*]<span style='color:#AA0000'>O</span> :: <a href='http://google.com' target='_blank'>Thread Title</a> :: DD MON
Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</li>[*]<span style='color:#AA0000'>X</span> :: <a href='http://google.com' target='_blank'>Thread Title</a> :: DD MON
Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</li>[*]<span style='color:#AA0000'>X</span> :: <a href='http://google.com' target='_blank'>Thread Title</a> :: DD MON
Thread description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a lacinia odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet metus nec turpis ullamcorper hendrerit. Praesent vel sem quis leo commodo feugiat. Maecenas in eros quam. Donec laoreet, arcu a facilisis porttitor, elit dui lacinia tortor, nec volutpat nunc nibh quis tellus. Praesent tempus iaculis dolor ut mollis. Nulla facilisi. Morbi tincidunt venenatis lacinia. Aenean orci nisi, varius fringilla dapibus ut, aliquam vitae mauris. Curabitur commodo sagittis erat, quis ultricies lectus semper quis.</li></ol></li></ol></span></textarea>

<p>Sorry, no preview available!</p>

<p>This one is pretty different from my usual character sheet. >_> Rather than having every single thing with its own little subheader, I've left this one mostly to block paragraph text—so rather than using an individual subheader for your character's name's pronunciation, meaning, origin, etc., you should just combine it all under one header. 8D</p>

<h2>The Code</h2>
<textarea class="toggle">
<div class="char-archive">
<div class="char-title"><span class="char-header">Character Name</span>

→ <a href="#">Detailed Profile</a>

→ <a href="#">Post Log</a></div>

<div class="char-notes"># active threads</div>
<div class="char-list">
<div class="separator">Basic Information</div>
<ol>
<li><em><strong>Name</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis.
</p></em></li>

<li><em><strong>Age & DoB</strong>
<p>##, Month DD</p></em></li>
</em></li>

<li><em><strong>Species</strong>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis.
</p></em></li>

<li><em><strong>Relations</strong>
<p>Mother— name [whereabouts]</p>
<p>Father— name [whereabouts]</p>
<p>Siblings— name [f/m, whereabouts]</p>
<p>Other— name [f/m, whereabouts]</p></em></li>

<li><em><strong>Occupation</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p></em></li>

<li><em><strong>Residence</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p></em></li>

<li><em><strong>Appearance</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p>

<p><img src="http://sleepyglow.net/tears/public/images/blankimg.png" style="float:right; margin:5px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p></em></li>

<li><em><strong>Personality</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.

</p></em></li>

<li><em><strong>History</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p>
</p></em></li></ol>

<div class="separator">Post Log</div>
<ol>
<li><em><span class="char-post">♦</span> <strong><a href="#">Thread Title</a> (DD Month)</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante.</p>
</em></li>
<li><em><span class="char-post">♦</span> <strong><a href="#">Thread Title</a> (DD Month)</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante.</p>
</em></li>
<li><em><span class="char-post">♦</span> <strong><a href="#">Thread Title</a> (DD Month)</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante.</p>
</em></li>
</ol>

</div></div>
<style>
.char-archive {width:95%; margin:0 auto; font-family:'times new roman', times, serif; font-size:14px; color:#000000; padding:5px; border:1px solid #000000; background-color:#B9B9B9;}
.char-archive a:link, .char-archive a:visited {color:#622521;}
.char-archive a:hover, .char-archive a:active {color:#2F0B09;}
.char-archive li {padding:2px 0px; margin:0px; list-style-type: decimal-leading-zero; font-weight:bold;}
.char-archive li em {font-family:georgia, serif; font-size:12px; letter-spacing:-.1px; line-height:16px; font-style:normal; font-weight:normal; }
.char-archive li em strong {color:#61201C;}
.char-archive ol { list-style-position:inside; padding:0px; margin:0px; }
.char-archive p {text-indent:25px; margin:0px; padding:0px; }
.char-archive-warn {color:#AA0000; font-weight:bold;}
.char-archive li a {text-transform:lowercase;}
.char-post {font-size:15px; color:#8C0404;}
.char-archive .separator { font-family:'times new roman', times, serif; font-size:17px; text-transform:uppercase; border-bottom:1px dotted #000000; font-weight:bold; text-align:right; padding-right:10%;}
.char-header {font-family:georgia, serif; font-size:22px; text-transform:uppercase; letter-spacing:1px; font-weight:bold;}
.char-title {width:50%; float:left;}
.char-notes {float:right; width:50%; text-align:right;}
.char-list {clear:both; padding-top:10px;}
</style>
</textarea>

<h2>Example</h2>
<div class="char-archive">
<div class="char-title"><span class="char-header">Character Name</span>

→ <a href="#">Detailed Profile</a>

→ <a href="#">Post Log</a></div>

<div class="char-notes"># active threads</div>
<div class="char-list">
<div class="separator">Basic Information</div>

<ol>
<li><em><strong>Name</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis.
</p></em></li>

<li><em><strong>Age & DoB</strong>
<p>##, Month DD</p></em></li>
</em></li>

<li><em><strong>Species</strong>

<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis.
</p></em></li>

<li><em><strong>Relations</strong>
<p>Mother— name [whereabouts]</p>
<p>Father— name [whereabouts]</p>
<p>Siblings— name [f/m, whereabouts]</p>

<p>Other— name [f/m, whereabouts]</p></em></li>

<li><em><strong>Occupation</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p></em></li>

<li><em><strong>Residence</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p></em></li>

<li><em><strong>Appearance</strong>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p>

<p><img src="http://sleepyglow.net/tears/public/images/blankimg.png" style="float:right; margin:5px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p></em></li>

<li><em><strong>Personality</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.

</p></em></li>

<li><em><strong>History</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante. Aliquam fringilla nulla ut odio laoreet luctus. Curabitur orci lectus, suscipit id tristique at, ornare et tellus. Curabitur semper fringilla malesuada. Vivamus consequat nunc sit amet turpis egestas et facilisis sem hendrerit. Nunc imperdiet, dolor eu tristique pretium, urna orci scelerisque felis, sit amet imperdiet nulla dolor sit amet risus. Vestibulum at nisi eget justo semper ultricies. Aliquam vel lectus eu sapien convallis ultricies. In hac habitasse platea dictumst. Mauris feugiat hendrerit blandit.
</p>
</p></em></li></ol>

<div class="separator">Post Log</div>
<ol>
<li><em><span class="char-post">♦</span> <strong><a href="#">Thread Title</a> (DD Month)</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante.</p>
</em></li>
<li><em><span class="char-post">♦</span> <strong><a href="#">Thread Title</a> (DD Month)</strong>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante.</p>
</em></li>
<li><em><span class="char-post">♦</span> <strong><a href="#">Thread Title</a> (DD Month)</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend dapibus iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ante ipsum, euismod vel laoreet a, iaculis at ante.</p>
</em></li>
</ol>

</div></div>
<style>
.char-archive {width:95%; margin:0 auto; font-family:'times new roman', times, serif; font-size:14px; color:#000000; padding:5px; border:1px solid #000000; background-color:#B9B9B9;}
.char-archive a:link, .char-archive a:visited {color:#622521;}
.char-archive a:hover, .char-archive a:active {color:#2F0B09;}
.char-archive li {padding:2px 0px; margin:0px; list-style-type: decimal-leading-zero; font-weight:bold;}
.char-archive li em {font-family:georgia, serif; font-size:12px; letter-spacing:-.1px; line-height:16px; font-style:normal; font-weight:normal; }
.char-archive li em strong {color:#61201C;}
.char-archive ol { list-style-position:inside; padding:0px; margin:0px; }
.char-archive p {text-indent:25px; margin:0px; padding:0px; }
.char-archive-warn {color:#AA0000; font-weight:bold;}
.char-archive li a {text-transform:lowercase;}
.char-post {font-size:15px; color:#8C0404;}
.char-archive .separator { font-family:'times new roman', times, serif; font-size:17px; text-transform:uppercase; border-bottom:1px dotted #000000; font-weight:bold; text-align:right; padding-right:10%;}
.char-header {font-family:georgia, serif; font-size:22px; text-transform:uppercase; letter-spacing:1px; font-weight:bold;}
.char-title {width:50%; float:left;}
.char-notes {float:right; width:50%; text-align:right;}
.char-list {clear:both; padding-top:10px;}
</style>[/html]

POSTED: Tue May 25, 2010 1:54 am

You're a crazy woman!! This is super helpful. o:

POSTED: Tue May 25, 2010 4:31 am

<3

POSTED: Wed May 26, 2010 12:37 am

I am going to have to use some of this for my Hybrid post log, which I have decided to actually organize or something weird like that omg. :>

POSTED: Wed May 26, 2010 2:42 am

ILU ALL. <3

I'm pretty sure I'm fond of this, but I'm splitting up Kae's threads by year/era. I hit the per-post limit with just her threads from 2009-2010. >____>

POSTED: Fri May 28, 2010 10:27 pm

i like this.

i wish I had the time to use it, but it would take me HOMG hours to re-haul Kansas's archived threads.

perhaps I'll use it for Rio! <333

POSTED: Sun May 30, 2010 2:44 pm

this is one of those things that should be pinned. -hinthint.- >__>;
i love the usefulness! ♥

POSTED: Sun May 30, 2010 10:28 pm

Aww, there are enough pinned things in this forum, I think. ^_^ I did link this from my wiki page and everything, if you want I'll put it on my resources page as well?

-hugloves-

POSTED: Sun May 30, 2010 11:16 pm

I dunno, do things get deleted if they get too outdated, like when they fall to the bottom of the very last available page? D:

The same with the css guide, which is ridiculously helpful. I'd be sad if they go bye-bye. ;[ There's also the need to search for the topic when you want it.

POSTED: Sun May 30, 2010 11:46 pm

Nuh, nothing is deleted anymore. :3 The forum's default is to show topics that have been replied to in the last 30 days; however, you can scroll to the bottom of the forum and use the drop down box to display topics from "the beginning" and scroll back quite a while.

You can also <a href='http://www.soulsrpg.com/ipb/index.php?act=Search' target='_blank'>search for it</a> if it falls off of the first page--search is on the upper right hand side in the second menu, beneath Plot/Rules/Joining bar, on the far side.

Maybe if it's okay by the SA, I could add a link to this thread here from <a href='http://soulsrpg.com/ipb/viewtopic.php?t=15' target='_blank'>this thread here</a> in Profiles & Archives listings? :o Gotta ask first. ^_^

POSTED: Mon May 31, 2010 3:08 am

what about adding links to the threads in the resources thread thats already pinned?

POSTED: Mon May 31, 2010 3:23 am

Good call. :D -trundles off to do this-

POSTED: Mon May 31, 2010 5:51 am

<!--QuoteBegin-Kaena Lykoi+May 30 2010, 07:46 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (Kaena Lykoi @ May 30 2010, 07:46 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin-->Maybe if it's okay by the SA, I could add a link to this thread here from <a href='http://soulsrpg.com/ipb/viewtopic.php?t=15' target='_blank'>this thread here</a> in Profiles & Archives listings? :o Gotta ask first. ^_^[/quote]
I added it!

I might add a second reply with some super basic post log ideas, eg:

<ol type='1'>[*] Date <a href='http://soulsrpg.com/ipb/viewtopic.php?t=#' target='_blank'>Thread link</a> with [Participant] at [Location]
</li>[*] Oct 26, 2007 <a href='http://soulsrpg.com/ipb/viewtopic.php?t=15' target='_blank'>Profiles & Archive Listings</a> with 'Souls Assemblage at Profiles & Archive Listings</li></ol>


And a simpler list style like yours too in HTML. :D

Dead Templates

cron