This is the doHTML version of the Very Simple Tracker/Archive thinger. It uses HTML and CSS. There are comments embedded in the CSS to help you understand what is going on there and everything. Features Dividers for active threads, years, etc. However you want to split them up, really. Restart numbering -- e.g., if you reached the maximum number of characters for a post, you can split the ordered lists up and simply restart the numbering using <ol start="23"> if you wished to start it at 23. :D Ability to mark mature threads with red, bolded text and (M), if desired. Use of different HTML symbols to mark posts as active, replied to, not replied to, etc. Can be embedded into a standalone HTML document rather easily. See here for an example. Ability to skin to your heart's content, really, if you're good with CSS. Preview For a preview screenshot, please see here. An embedded example is provided here. Enjoy! Code: Select [dohtml]<div class="char-archive"> <div class="char-title"><span class="char-header">Character Name</span> <br>You can put links to a profile or bullet points about their personality, even a small image... whatever you want, really, here. :3 <br>→ <a href="http://wiki.soulsrpg.com/index.php?n=Characters.CharacterName">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="?showtopic=#">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="?showtopic=#">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="credit">Thread tracker by <a href="http://rpg-directory.com/index.php?showuser=22903">Invisie</a> of <a href="http://rpg-directory.com">RPG-D</a>!</div> <style> /*Remember, if you use the basic DIV shell in multiple posts, you only need to include the CSS once! That's it! 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.*/ .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 so they stand out a bit more. 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. Some games require mature threads to be marked; the game for which this was originally designed is one, and so I've left the feature in case it is useful elsewhere. :)*/ .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 to mark active/inactive/whatever threads, 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.*/ .credit { font-size:10pt; font-family:arial, helvetica, sans-serif; text-transform:uppercase; text-align:center; } /*This is my credit. Please don't remove this part or the credit included on the archive itself.*/ </style> [/dohtml]
<div align=center><span style='font-size:17pt;line-height:100%'>DOHTML TEMPLATE ARCHIVED</span> <span style='font-size:11pt;line-height:100%'>[color=7f323a]THANK YOU FOR YOUR SUBMISSION[/color]</span> Thank you for submitting to our role-play resources and contributing to making forums pretty everywhere!</div>
