There are some special styling considerations that are unique to rolltemplates, and some that are common to dice rolls.
Dice Rolls
Any syntax for styling in roll20 chat will work in a rolltemplate. So you can use *italic*, **bold**, ***italic and bold***. You can learn more at the Chat Formatting page on the wiki.
Indentation and Line Beaks
Rolltemplates are HTML items, and have inerited some of HTML’s limitations when it comes to displaying text. Leading and ending spaces ae ignored but linebreaks are kept. If you try this:
{{indented= this is not indented
this is a new line}}Code language: Markdown (markdown)You won’t get that indentation. The rolltemplate ignores leading spaces. To get that, you need to use html entities (shudder). HTML entities that produce indents are shown below.
{{indented= this is not indented
 so is this}}Code language: Markdown (markdown)The first indent is a shorter indent than the other. You can chain them together to make even wider indents.
Styling Roll Results
It’s common to want to change the appearance of a roll. You can do this easily in CSS with some special styles. I won’t cover this in detail because it is really simple, at least if you have a passing familiarity with CSS.
H=Here are the necessary classes for the default roll template – just replace with yoru rolltemplate name.
.sheet-rolltemplate-default .inlinerollresult {
color: blue;
}
.sheet-rolltemplate-default .inlinerollresult.fullcrit {
color: green;
border: 0;
}
.sheet-rolltemplate-default .inlinerollresult.fullfail {
color: red;
border: 0;
}
.sheet-rolltemplate-default .inlinerollresult.importantroll {
color: purple;
border: 0;
}Code language: CSS (css)inlinerollresult applies to any rolls, fullcrit is for critical huits, fullfail is for fumbles and importantroll is for those which are both critical and fumble at the same time. Modify as desired!
Darkmode
Darkmode was introduced recently, and automatically applies some styling when avctivated. it is applied via a CSS style, and if you want to override or add to it, you have to access it in the correct way. You need a declaration block like one of these:
.sheet-rolltemplate-[rolltemplate-name].sheet-rolltemplate-darkmode {Code language: CSS (css).sheet-rolltemplate-darkmode.sheet-rolltemplate-[rolltemplate-name] {Code language: CSS (css)Darknode styling is applied at the same ‘level’ as rolltemplate CSS, so they must be assigned together as above. Don’t add a space between then.
