In the previous post we defined the container element which contains the rolltemplate name. Once you’ve picked a name, you have to think about what the template should show when it’s used. Once you know this, you can build the template.
The Basic Structure
Decide what you want to show, and how it should appear, and build that using both HTML and CSS. You can see some examples at the roll20 wiki, and many more in the character sheet repo (if you’re willing to dig into the code). But let’s build a simple example.
Let’s say you are building a rolltemplate which has a title, and a simple roll. The macro call looks like this:
&{template:simple-roll} {{title=A Skill Roll}} {{roll=[[1d20+@{selected|skill}]]}}Code language: Markdown (markdown)In this case, each character has an attribute called skill, and you are grabbing it value, rolling it, then sending it to the rolltemplate.
First, we begin with the rolltemplates name, and follow with two key-value pairs – one for the title, and one for the roll we actually care about.
Notice each key-value pair is inside {{ }} brackets, with the key (aka the label) followed by an =, then the value.
Here’s one way we might build the HTML for that.
<rolltemplate class="sheet-rolltemplate-simple-roll">
<div class="sheet-template-title">
{{title}}
</div>
<div class="sheet-roll-title">
Roll
</div>
<div class="sheet-roll-result">
{{roll}}
</div>
</rolltemplate>Code language: HTML, XML (xml)The linebrteaks and spacing are here to make this easier to read. It could just as easily be:
<rolltemplate class="sheet-rolltemplate-simple-roll">
<div class="sheet-template-title">{{title}}</div>
<div class="sheet-roll-title">Roll</div>
<div class="sheet-roll-result">{{roll}}</div>
</rolltemplate>Code language: HTML, XML (xml)It could even all be on a single line, with all spaces removed, but that would be a nightmare to read.
<rolltemplate class="sheet-rolltemplate-simple-roll"><div class="sheet-template-title">{{title}}</div><div class="sheet-roll-title">Roll</div><div class="sheet-roll-result">{{roll}}</div></rolltemplate>Code language: HTML, XML (xml)Don’t do that! You want your code to be readable by the person who comes after you. Either of the first two will be fine.
This is only half of thecode. It creates the actual struxcture, you also need to build the style, and for that you need CSS. Before we do that though, there are a couple of things to notice.
Keys and Values (the {{ }} brackets)
Let’s look at the code that’s easiest to read.
<rolltemplate class="sheet-rolltemplate-simple-roll">
<div class="sheet-template-title">
{{title}}
</div>
<div class="sheet-roll-title">
Roll
</div>
<div class="sheet-roll-result">
{{roll}}
</div>
</rolltemplate>Code language: HTML, XML (xml)Notice that some words are in curly brackets. These are the keys of your key-value pairs. Whenever you include the key like this, it replaces that key with the value.
So if you include {{title}} it will show you whatevver you have typed in the template as title. With this:
&{template:simple-roll} {{title=A Skill Roll}} {{roll=[[1d20+@{selected|skill}]]}}Code language: Markdown (markdown)Your {{title}} is “A Skill Roll” so that’s what will be printed out. Likewise calling {{roll}} gets you that roll value which in this case is your roll.
Without any styling, it look like this:
Notice how hovering over the roll shows you the roll details, just as if it were rolled in a normal macro. Rolltemplates are normal macros.
That looks ugly, though it does place each item in order. In the next post, we’ll apply some styling, and do something interesting with our keys and values.
Aside: The code examples above use divs for simplicity. Sometimes you’ll want to use <spans> or <p> or even <h2> and other headings, then apply your own styling. The goal in this post is to explain rolltemplates so CSS has been kept simple
