RPG Achievement Tracker

Forum Roleplay > Roleplay Code > RPG Post Logs > RPG Achievement Tracker

Donate to stop seeing ads, and help support Forum Roleplay!

This RPG achievement tracker logs different achievements for your roleplay character. Many forum roleplaying games offer achievements, whether In Character or Out of Character. It is helpful to have an easy way of tracking and displaying these archievements. This RPG achievements tracker template makes use of HTML, CSS, and ordered lists — that’s it! There are no images in this achievement tracker, yet offers fancy custom baubles that can display the status of a given thread easily.

It is flexible enough to be used as a post log or even a thread archive, if you so choose. It also makes use of CSS which may not display correctly in non-modern browsers. However, roleplayers generally have a good handle on technology — severely outdated technology isn’t often seen.

Adjusting the RPG Achievement Tracker

Warning

Some of the CSS techniques used in the RPG achievement tracker are very advanced. It is suggested you do not alter the CSS too much. You can always add on top of what’s already there (backgrounds, colors, etc.) pretty safely! However, altering margins, paddings, and other values may result in breaking the template.

Use the Colorzilla Gradient Editor to change the default gradients or create your own gradients.
You can add more default achievement, thread, or post classes, of course. The CSS has detailed instructions as to how you can do this.
Change the embedded font with Google Web Fonts

Downloads in RPG Achievement Tracker

Downloads: RPG Achievement Tracker

Preview

Information

An image-free RPG achievement tracker, for keeping track of some achievements or goals you want to keep for your roleplaying character.

Code

<div class="roleplay-achievement">
<div class="header">Character Name</div><div class="column-wrap"> <div class="column first"> <ul> <li class="title"><strong>Achievement Name</strong> <p> Primary description goes here. </p> </li> <li class="normal-progress"><strong class="achievement">Achievement Name</strong></li> <li class="slow-progress"><strong class="achievement">Achievement Name</strong> <p> Further information about specific achievement here. </p> <p> You can actually be quite verbose in your description of the achievement here, if you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a mauris at tortor consectetur semper eu sit amet dui. Aenean pellentesque ultricies orci eget rutrum. </p> </li> <li><strong class="achievement">Achievement Name</strong></li> <li class="non-applicable"><strong class="achievement">Achievement Name</strong> <ul> <li>You can even have a sub-list, if you prefer to split achievements by individual steps.</li> </ul> </li> <li><strong class="achievement">Achievement Name</strong></li> <li class="non-applicable"><strong class="achievement">Achievement Name</strong> <ol> <li>And it can be an ordered list, of course. <ol> <li>Or a sub-sub-list...</li> </ol> </li> </ol> </li> </ul></div><div class="column second"> <ul> <li class="title"><strong>Achievement Name</strong> <p> Secondary description goes here. </p> <p> Further information about specific achievement here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a mauris at tortor consectetur semper eu sit amet dui. Aenean pellentesque ultricies orci eget rutrum. Duis sed tellus neque. Integer vestibulum dolor id eros porttitor hendrerit. </p> </li> <li class="completed"><strong class="achievement">Achievement Name</strong></li> <li><strong class="achievement">Achievement Name</strong> <p> Further information about specific achievement here. You can actually be quite verbose in your description of the achievement here, if you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a mauris at tortor consectetur semper eu sit amet dui. Aenean pellentesque ultricies orci eget rutrum. </p> <p> You can even have multiple paragraphs — as many as you want. Cras adipiscing mi ut nibh volutpat condimentum. Aliquam semper posuere elit eget scelerisque. Curabitur massa nibh, ultrices vitae semper sed, tristique at ipsum. </p> </li> <li><strong class="achievement">Achievement Name</strong></li> </ul></div></div></div><style>@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
.roleplay-achievement *{margin:0;padding:0;}
.roleplay-achievement{font-family:helvetica, arial, sans-serif;font-size:16px;}
.roleplay-achievement .column{float:left;width:50%;}
.roleplay-achievement .column-wrap{border:1px dotted #000;}
.column-wrap:after{content:"";display:table;clear:both;}
.roleplay-achievement .header{font-size:28px;font-family:'Jacques Francois', sans-serif;}
.roleplay-achievement strong.achievement{display:block;margin-left:0;}
.roleplay-achievement ul,.roleplay-achievement ol{margin:10px;}
.roleplay-achievement li{margin:18px 0 4px 25px;list-style-type:none;position:relative;}
.roleplay-achievement li.title{font-size:20px;margin-left:0;margin-bottom:25px;}
.roleplay-achievement li.title strong{font-family:'Jacques Francois', sans-serif;}
.roleplay-achievement li p,
.roleplay-achievement ul li li{font-size:13px;margin:3px 0 3px;text-indent:15px;}
.roleplay-achievement li p:nth-of-type(1){text-indent:0;}
.roleplay-achievement ul li li{list-style-type:square;text-indent:0;}
.roleplay-achievement ul li ol li{list-style-type:decimal;}
li.normal-progress:before, 
li.slow-progress:before, 
li.non-applicable:before, 
li.completed:before, 
li:before 
{display:inline-block;margin-right:5px;position:absolute;top:0;left:-25px;width:13px;height:13px;content:'';border:1px solid #000;border-radius:30px;-moz-border-radius:40px;-webkit-border-radius:40px;box-shadow:inset -2px -2px 2px #1E1E1E;-moz-box-shadow:inset -2px -2px 2px #1E1E1E;-webkit-box-shadow:inset -2px -2px 2px #1E1E1E;text-align:center;text-shadow:1px 1px #FFF;font-weight:bold;font-size:30px;}
li.title:before, .roleplay-achievement ul li li:before{content:none;}
li:before{background:#b5b5b5;
background:-moz-linear-gradient(top, #b5b5b5 0%, #666666 32%, #2d2d2d 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5b5b5), color-stop(32%,#666666), color-stop(100%,#2d2d2d));
background:-webkit-linear-gradient(top, #b5b5b5 0%,#666666 32%,#2d2d2d 100%);
background:-o-linear-gradient(top, #b5b5b5 0%,#666666 32%,#2d2d2d 100%);
background:-ms-linear-gradient(top, #b5b5b5 0%,#666666 32%,#2d2d2d 100%);
background:linear-gradient(to bottom, #b5b5b5 0%,#666666 32%,#2d2d2d 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b5b5', endColorstr='#2d2d2d',GradientType=0 );
}
li.normal-progress:before{background:#7fbc78;
background:-moz-linear-gradient(top, #7fbc78 0%, #13bf00 32%, #119600 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fbc78), color-stop(32%,#13bf00), color-stop(100%,#119600));
background:-webkit-linear-gradient(top, #7fbc78 0%,#13bf00 32%,#119600 100%);
background:-o-linear-gradient(top, #7fbc78 0%,#13bf00 32%,#119600 100%);
background:-ms-linear-gradient(top, #7fbc78 0%,#13bf00 32%,#119600 100%);
background:linear-gradient(to bottom, #7fbc78 0%,#13bf00 32%,#119600 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fbc78', endColorstr='#119600',GradientType=0 );
}
li.slow-progress:before{background:#efec97;
background:-moz-linear-gradient(top, #efec97 0%, #f2ea00 32%, #bfb800 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#efec97), color-stop(32%,#f2ea00), color-stop(100%,#bfb800));
background:-webkit-linear-gradient(top, #efec97 0%,#f2ea00 32%,#bfb800 100%);
background:-o-linear-gradient(top, #efec97 0%,#f2ea00 32%,#bfb800 100%);
background:-ms-linear-gradient(top, #efec97 0%,#f2ea00 32%,#bfb800 100%);
background:linear-gradient(to bottom, #efec97 0%,#f2ea00 32%,#bfb800 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#efec97', endColorstr='#bfb800',GradientType=0 );
}
li.non-applicable:before{background:#e87878;
background:-moz-linear-gradient(top, #e87878 0%, #ea0000 32%, #aa0000 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e87878), color-stop(32%,#ea0000), color-stop(100%,#aa0000));
background:-webkit-linear-gradient(top, #e87878 0%,#ea0000 32%,#aa0000 100%);
background:-o-linear-gradient(top, #e87878 0%,#ea0000 32%,#aa0000 100%);
background:-ms-linear-gradient(top, #e87878 0%,#ea0000 32%,#aa0000 100%);
background:linear-gradient(to bottom, #e87878 0%,#ea0000 32%,#aa0000 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e87878', endColorstr='#aa0000',GradientType=0 );
}
li.completed:before{background:#eabf75;
background:-moz-linear-gradient(top, #eabf75 0%, #ed9a00 32%, #c97800 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#eabf75), color-stop(32%,#ed9a00), color-stop(100%,#c97800));
background:-webkit-linear-gradient(top, #eabf75 0%,#ed9a00 32%,#c97800 100%);
background:-o-linear-gradient(top, #eabf75 0%,#ed9a00 32%,#c97800 100%);
background:-ms-linear-gradient(top, #eabf75 0%,#ed9a00 32%,#c97800 100%);
background:linear-gradient(to bottom, #eabf75 0%,#ed9a00 32%,#c97800 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#eabf75', endColorstr='#c97800',GradientType=0 );
}</style>
<div class="fr-credit-link"> Roleplay resource by <a href="http://forumroleplay.com">Forum Roleplay</a></div><style>.fr-credit-link{padding:10px 0;font-size:11px;font-style:italic;}</style>

Adjusting the RPG Achievement Tracker

Warning

Downloads in RPG Achievement Tracker

Downloads: RPG Achievement Tracker

Preview

Information

Code

Related Roleplaying Resources

Creating RPG Ad Forums

RPG World-Building Species Infographic Template

Retconning

Free Wolf and Werewolf Lineart Templates