Tools of the Trade

Building a Roll20 Character Sheet

Image of character sheet
A snapshot of the character sheet under development

I recently began the project of developing a Roll20 character sheet for one of my favorite role playing games, Kagegami High. I’ll talk more about this game in an upcoming Voi’s Favorites post. It’s a big help to have a fillable character sheet during games. Additionally, contributing to the community is important to me.  I reached out to the game’s creator, Ewen Cluny, to get his permission. He was kind enough to give me the go ahead.

Nuts and Bolts

If you have a decent grasp of HTML, CSS and JSON,  creating a Roll20 character sheet is a pretty quick process.   The biggest issue I ran into is the prefixes that Roll20 requires you to add to your CSS classes.  I though I had forgotten how to CSS at first. Then realized I should read the manual.  I’m guessing that if I had a non-free HTML editor it might be able to handle the prefixes for me.  Unfortunately, I have to deal with the prefixes manually.

Here is a sample of the CSS with the “.sheet-” prefixes:

.sheet-rowheader {
    font-weight: bold;
    text-align: right;
    padding-right: 5px;
}

.sheet-charsheet {
    min-width: 800px;
    font-family: "serif";
    font-size: 20px;
}

.sheet-header {
    font-family: "monoface", "serif";
}

In the above code example you an see the CSS classes are proceeded by “sheet-” Below, the in the prefix is removed.

<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">Stress Limit:<br><input type="number" name="attr_stslim" value="@{moxie}*5" disabled="true" /></div>
<div class="divTableCell">Stress Points:<br><input type="number" name="attr_stspts">

It’s possible to leave the “sheet-” prefix in for editing purposes. However, the style guide published by Roll20 specifically states that these prefixes should not be included in the HTML. Additionally, Roll20 provides a space for you to edit the code and see a preview. It works very well.

I’ve just finished cleaning up the code and submitting the pull request for it to be reviewed by Roll20 on GitHub. Roll20 says they review the requests once a week. Hopefully, in less than a week I’ll be back to tell you this Roll20 character sheet is available for use. Otherwise, I’ll let you know what issues I ran into.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.