RPG Post Log Tutorial

Note: It will definitely help you to understand some concepts from RPG Template Tutorial and RPG Template Tutorial Two. Many of the same principles are applied here, and learning and applying CSS in general to different coding purposes can make your life much easier.

Post logs are great for forum roleplaying games for a variety of reasons, ranging from tracking your character’s posts to staying on top of your current due RPG posts. They are easily embedded into a forum post with HTML enabled, and can even be used in character profiles on some forums. If you don’t have HTML on your forum roleplaying game, you can always have a standalone post log on your web server.

Learn how to code a post log or thread tracker for your roleplaying character using the HTML list element and some CSS with the Post Log Tutorial. Each post log works off of the same basic code, so you should be able to “follow along” and learn how different tricks are applied to make the log progressively fancier. Or, should you choose, you can also just nab the codes as a free template and go! Either which way.

Level 1: Simple RPG Thread List

Preview

Simple RPG Post Log Preview Image

Code

Simple RPG Post Log Explanation

Simple RPG Post Log HTML

<div class="simple-log">
<ol>
	<li><a href="?showtopic=#">Title</a> (DD Mon)</li>
	<li><a href="?showtopic=#">Title</a> (DD Mon)</li>
</ol>

</div>
<style>
...
</style>

As you can see, the HTML is relatively simple. You should be able to recognize <div class=”simple-log”> … </div> as building a HTML dividing element around the list. <style> … </style> calls to our CSS, the content of which is detailed in the next section.

The two tags that might be new to you are <ol> … </ol> and <li> … </li>. The OL tag is an Ordered List. This tag is used to start and close an ordered list — the workhorse of your post log, enabling you to track your threads, etc. There’s also the UL — the Unordered List. The primary difference is that one comes with bullets and the other comes with numbering. Their functionality is the same otherwise, though.

The LI tag is the List Item tag, which starts and ends each individual item in the list. So, a link to each of your threads, an explanation of what happened, or whatever you want your list to contain — goes in between a LI tag and a closing LI tag.

Simple RPG Post Log CSS

.simple-log {
	width:95%;
	margin:0 auto;
	font-family:georgia, serif;
	font-size:12px;
}
.simple-log ol {
	padding:0px;
	margin:0px;
}
.simple-log li {
	padding:2px 0px;
	margin:0px 25px;
	list-style-type: decimal-leading-zero;
}
.simple-log ol {
	padding:0px;
	margin:0px;
}

You should recognize most of this from the Templates Tutorials.

.simple-log ol { }

This is the control for our ordered list. Ordered lists as well as list items automatically have padding and margin values, so we’ll want to control those ourselves. padding:2px 0px; tells the ordered list to have padding of 2 pixels on top and 0 pixels on the side; margin:0px 25px; tells it to have a margin of 0px on the top and 25px on the sides. From this, you should be able to figure out most of the coding of .simple-log li { }.

The only thing that is different is list-style-type: decimal-leading-zero;, which tells the list to use a decimal number with a leading zero. Other possible values include upper-roman, lower-roman, upper-alpha, lower-alpha, and decimal. There are other values than that, but you probably won’t find them very useful.

Level 2: Fancy RPG Post Log List

This part of the tutorial shows you how to add a header, dividers for each of your roleplay characters, and how to style the list to use a different font or font size in the numbers and the information of the list.

Preview

Fancy RPG Post Log Preview Image

Code

Fancy RPG Post Log Tutorial

Fancy RPG Post Log HTML

The code for the dividers is relatively simple and straightforward. <div class=”divider”>Character Name</div> can divide your characters. You should start a new ordered list for each character.

<li><em><a href="?showtopic=#">Title</a> (DD Mon)</em></li>

You’ll notice that the content of each <li> tag is wrapped with an <em> tag. This allows us to define a font — for example, bolded Arial — for the list numbers while keeping a different font for the actual content of the list. This is nice to make the numbers stand out a bit more.

You can use a <span> tag with a custom class to wrap around your list information, but <em> works just as well and is quite a bit shorter. Just remember to define <em> as font-style:normal; otherwise you’ll end up with italicized text.

Level 3: Fancier RPG Post Log List

While this part of the tutorial is less in-depth than other parts, you should recognize many of the stylistic elements from the CSS tables tutorials, etc.

Preview

Fancier RPG Post Log Preview Image

Code

Whoa. The code got a fair bit longer and more complicated, huh? Never fear — as I stated, most of the length in the CSS is style and other changes. One of the things you may have noticed is .simple-log3 b.date {} in the CSS. What this does is, it tells every bold within our RPG template with the class date applied to it to act in that manner. This allows you to have multiple instances of bold with different classes applied to it, allowing for one style choice for the date, another style choice for the participants, and so on.

Another big change is this same principle applied to the list elements — you’ll notice that the different threads have different symbols, allowing you to create your own key with the thread log and simply change the class of the thread to either “replied” or “open.” Neat, huh?

Level 4: Fancy Party RPG Post Log

While this part of the tutorial is less in-depth than other parts, you should recognize many of the stylistic elements from the RPG Template Tutorial One and RPG Template Tutorial Two.

Fancy Party RPG Post Log

Preview

Fancy Party RPG Post Log Preview Image

Code

This RPG post log really isn’t all that different — but it makes use of the :before and :after CSS pseudoclasses and HTML Unicode characters to give you fancy symbols for your open and replied roleplaying threads. It also uses floats and columns to create a layout that allows display of multiple characters side-by-side. Edit the width value of .simple-log-4-column if you want to display more than two columns.

Leave a Reply

Your email address will not be published. Required fields are marked *