This is a guide to creating character sheets in Roll20, intended for people who aren’t programmers or web designers. This covers every aspect of character sheet creation, with the tips focussed specifically on Roll20 design.
It’s divided into the different topics. Also, check out Andreas’s Guide for another overview of things.
Make sure to click each heading for more information on a topic.
The Basics
These three sections cover the basics of sheet authoring. You need some familiarity with these three things.
1. HTML
The elements that form the foundation of a character sheet.
2. CSS
The styling of a character sheet.
- The Roll20 Sheet for Legends Never Die!
- Getting Started With CSS
- How Elements are Displayed
- Images and Colours
- Text and Fonts
- CSS Grid Layouts
- Understanding Selectors
- How To Hide and Reveal Things With CSS
- Inheritance and Specificity
- Your Own Styles on Roll20
- Advanced Positioning
- Removing the Dice Icon In Buttons
- Character Sheet – CSS Example
3. Meta
This covers articles about sheet authoring on roll20, and transcends specific languages.
- Don’t use ChatGPT for Roll20 Code
- The Custom Sheet Sandbox
- Use a Syntax-Aware Code Editor
- Validating Your Sheet
- Inspecting the Browser
- Publishing Sheets to GitHub
- Publishing Sheet Images
- Default Sheet Settings
- Sandbox Sheet Glitches
- Divitis and Style
- Why You Must Test Roll20 Sheets on Roll20
- Can a Sheet Be Modified?
- Character Sheet Corruption Will Happen!
- Translating Default Sheet Settings
- Using ChatGPT for character design
Advanced Skills
These cover skills that many sheets will need once you have mastered the basics.
4. Sheet Workers
Powerful automation for your sheet, using JavaScript with some quirks.
- Anatomy of a Sheet Worker
- Variables – How to Name Things
- Arithmetic in Sheet Workers
- What If? in Sheet Workers
- Arrays and Dropdowns
- JavaScript Objects
- Getting Loopy With JavaScript
- Strings in Sheet Workers
- Logging in the Browser Console
- Strings, Arrays, and Loops
- Undefined and Other Error Values
- Asynchronicity and Things to Avoid With Loops
- Events, and watching Attributes
- Changes and the eventInfo Object
- Action Buttons
- setAttrs and Saving Attributes
- A Sheet Worker Reprise
- Castle Falkenstein Design – Sheet Workers
4. Repeating Sections
Dynamic sections of your sheet like equipment lists, spells, and weapon lists. Requires HTML, CSS, and sometimes JavaScript.
- What Is a Repeating Section?
- Repeating Section Names
- Building a Repeating Section (HTML)
- Styling a Repeating Section (CSS)
- Styling the Section Buttons (CSS)
- Simple Repeating Sections
- Less Simple Repeating Sections
- The One Line Repeating Section
- Combining Repeating Sections and Global Stats
- Advanced Action Buttons
- Undo in a Repeating Section
- Repeating Section Gotchas
- A Summary of Repeating Sections
There are important extra articles at the dedicated page. Click the title above.
6. Roll Templates
How rolls appear in chat, roll templates require HTML and CSS. They can sometimes benefit from Sheet Workers (JavaScript).
Optional Skills
These articles cover things that are nice to add to a sheet, but which you can do without.
7. Custom Roll Parsing
Requires HTML, CSS, Sheet Workers, and Roll Templates, and sometimes Repeating Sections. Very complex, but there are some things you can’t do any other way.
- Introduction to Custom Roll Parsing
- The Structure of a Custom Roll Parsing Function
- The CRP Roll String And Many Buttons
- CRP: A Simple Example
- startRoll and Analysing Your Dice
- Changing Attributes with Custom Roll Parsing
- Using Queries in Custom Roll Parsing
- Computed Properties and CRP Roll Templates
- Callbacks and Promises with startRoll
7.b CRP Examples
CRP is very complex, so here are a bunch of examples showing how to use it.
8. Translations
Making one sheet work in multiple languages. Its very tedious to set up, but a lot simpler with Templating (see below).
More Speculative Stuff
These are things which are only added to a sheet in certain cases, and might not even be possible in come cases. These will probably be created gradually throughout 2024 (but I have some other massive projects in mind that might consume my time).
Charactermancer
A charactermancer is only possible if you have the license for the system. I’ll probably write it up eventually, but its not a high priority.
jQuery in Roll20
Coming one day (probably – it’s turning out to be less useful than originally envisaged, but Roll20 did state improvements were coming).
Compendium
Custom Compendiums are something Roll20 have said will be available, but they do not exist yet. If they do become available, I’ll add instructions here.
Templating
Sheet Templating is a way to create sheets more rapidly, by scripting the repetitive parts. There’s no right way to do this, and several options.