When creating a new rolltemplate, you’ll use both HTML and CSS, so review those pages if you aren’t confident. But before we talk about how to build a rolltemplate, there’s one thing to address.
Table of Contents
The Basic Container
You create the structure of a rolltemplate in HTML and the styling in CSS. Create your rolltemplate by first creating a container that looks like this:
<rolltemplate class="sheet-rolltemplate-basic">
</rolltemplate>Code language: HTML, XML (xml)You can place that container anywhere in your HTML file. It’s traditional to place it at the end of the file, just before any script block (for sheet workers).
There’s a couple of things to note here.
First, the container is a rolltemplate – that might seem obvious, but don’t use div, section, or any other html element.
Second, the class is named sheet-rolltemplate-<template-name>. This is confusing, especially if you have been using CSE code (Character Sheet Enhancement). I’ll explain how this works.
Legacy Code
Before the introduction of CSE, the CSS style of any element had to begin with sheet-. If you didn’t include that in the HTML, it was automatically prepended – but this only happened in HTML, not in CSS.
So in the HTML you might create a heading like this:
<h2 class="example">A Heading</h2>Code language: HTML, XML (xml)But if you had any CSS affecting that, like changing the text colour to red, you’d have to prepend sheet- to the class name, which would look this:
.sheet-example {
color: red;
}Code language: CSS (css)You could also add that sheet- to the HTML, and it would work fine.
<h2 class="sheet-example">A Heading</h2>Code language: HTML, XML (xml)A lot of people did this, because it made things simpler, but you didn’t need to. This was idential.
<h2 class="example">A Heading</h2>Code language: HTML, XML (xml)CSE Code
Then came CSE code. This brought with it a huge raft of improvements (see the wiki page linked above), but it also dispensed with the need for sheet- in css declarations. You could now write HTML like this:
<h2 class="example">A Heading</h2>Code language: HTML, XML (xml)And the CSS for that would be:
.example {
color: red;
}Code language: CSS (css)In fact, if you typed sheet- it wouldn’t work.
Overall, this was a great change. But…
Rolltemplate Code
For some reason, rolltemplates were not improved. In fact, it’s worse, because there are two different rules in operation.
First, whether you are using Legacy or CSS code, you need that full class name: sheet-rolltemplate-whatever-the-name-is. All styling must be “inside” that. So, let’s say you have red text inside the rolltempale, you cannot do this:
.red {
color: red;
}Code language: CSS (css)This also wont work:
.sheet-red {
color: red;
}Code language: CSS (css)You need to do this:
.sheet-rolltemplate-NAME .sheet-red {
color: red;
}Code language: CSS (css)All styling inside the rolltemplate must be encluded inside that rolltemplate’s class name.
Styling Inside The Rolltemplate
But to make it more confusing, the styling inside a rolltemplate uses Legacy code. Lets say you had the following:
<rolltemplate class="sheet-rolltemplate-test">
<span class="red-text">This is a test</span>
</rolltemplate>Code language: HTML, XML (xml)That is perfectly valid. But the CSS for it must look like this:
.sheet-rolltemplate-test .sheet-red-text {
color: red;
}Code language: CSS (css)Notice that in the HTML, the rolltemplate container must start with sheet-, but the classes inside that container do not need to. That’s because in Legacy code, sheet- gets added to the HTML classes automatically.
The Easiest Solution
The easiest solution to this mess is to use the following rule:
- add sheet- to the start of all class names both in HTML and CSS.
Then you don’t have to remember changing rules. With this approach, the above code would look like this:
<rolltemplate class="sheet-rolltemplate-test">
<span class="sheet-red-text">This is a test</span>
</rolltemplate>Code language: HTML, XML (xml).sheet-rolltemplate-test .sheet-red-text {
color: red;
}Code language: CSS (css)This way, the class names in HTML and CSS are always the same, and you don’t have to remember different rules for the rolltemplate container and all classes within it.
All future examples use this approach. If you know what you’re doing, you don’t have to do it this way, but it does make your life easier.
With that prelude out of the way, we’ll look at how to build a rolltemplate in the next post.
