Revision as of 12:04, 26 May 2021

This is about a Roll20 feature exclusive to Pro-subscribers (and often to players in a Game created by a Pro-subscriber). If you'd like to use this feature, consider upgrading your account.

Main Page: Building Character Sheets

Using Custom Character Sheets

There are two methods of using Custom Character Sheets, The "The Sheet Editor", and the "Sheet Sandbox".

The former is accessed and used in campaign where the character sheet option have been set to "Custom" in the Game Settings page, and the latter is a tool used for character sheet development, where you upload your code as files. Either one can only be accessed by the Creator of the game.

Find Code

The sourcecode to all community-created Roll20 sheets can be found on Github. The code for each sheet are organized in folders, and each sheet consists of a .html-file, a .css-file, and possibly a translation.jsonfile located in the root folder for the sheet. There are also other files there, but those are optional files used for sheet development, and not needed when using custom sheets in a game.

To get the code:

• download the files and copy the code from the files when you paste them to the correct sections in the Sheet Editor,
• or navigate to the individual file's page on github, and press on the "show raw" button, and press ctrl+A to select all the code, ctrl+C to copy, and then select the Sheet Editor and ctrl+V to paste the code.

The latest code for Official Roll20 sheets (those with a by Roll20) in their name in the "character sheet template"-dropdown aren't unfortunately public, but for some of them, an older version can be found on in the github repository(March 2020), such as:

• D&D 5E by Roll20 - Template:Github
• PF2E Template:Github
• Pathfinder by Roll20 - Template:Github
• Starfinder by Roll20 Template:Github

Newer Official sheets, such as Burn Bryte, don't have any public code available for the sheet, but does have for the much older Template:Github.

The Sheet Editor

To edit a custom character sheet for an existing game:

1. Go to a Campaign's/Game's Details Page.

2. Click the Settings-button, and select Games Settings.

3. On the Game settings page, you select "Custom" from the Character Sheet Template menu.

Check the box if you want to use (older) legacy code.

4. If you want to use char sheet code that made prior March 2021, check the box for Legacy Sanitization. If you leave it unchecked, you can use code compatible with the Character Sheet Enhancement Update.
The editor (shown below) has four tabs: HTML Layout, CSS Styling, Translation, and Preview. You copy your html and css code to their respective pages, and if the sheet have translation files, you copy the content of the appropriate language version. If a translation file isn't provided and the sheet used them, it will show red text and the name of the language tag for each section.

Preview Panel

The "Preview Panel/Sheet Editor" showing a preview of a character sheet. This preview is not identical to how the sheet looks in Roll20, and is only an approximation.

Warning: The preview panel does not have all the behavior of an actual roll20 instance. Sheet worker scripts and other JavaScript based features (including repeating sections) will not work correctly in the Preview.

The preview panel updates in real-time whenever you change the HTML, CSS or "Translation" of your sheet, to show you an approximation of what sheet would look like in-game. It's useful for quickly checking superficial change while you're editing, but to be sure of the actual end-result, you need to enter the game and open the sheet itself.

The Preview panel applies all the same security precautions and filtering as the main Roll20 application. Be sure to right-click and Inspect Element if you are seeing strange behavior (e.g. your styles aren't being applied correctly) -- it may be that there is a security filter that is changing the name of a class or something similar.

If you make any changes in the character sheet editor while in the game, you must save your changes and refresh the active Roll20 game. In addition, if the character sheet contains <rolltemplate>, the code for it will be seen unprocessed in the preview window. It's recommended that roll templates are placed at the end of the sheet's code so they don't obscure the sheet's visuals when using the preview panel.

Editing Sheet Code

Building Character Sheets is the central page detailing how the Roll20 Character sheet code works, what components it consists of, examples and so forth. The page links to every relevant page, as does the sidebar here.

The Community Wiki articles on Building Character Sheets is much more comprehensive than the Help Center-pages. (Andreas J. (talk) 12:29, 5 May 2021 (UTC))

When testing sheet code, it's smart to use the Sheet Sandbox, instead of the normal Sheet Editor, as it's designed for streamlining testing and is overall quicker to use. Sheet Sandbox test games doesn't allow inviting other people.

See Also

• Character Sheets - general info
• Game Management
  • Add Character Sheets
• Building Character Sheets - coding
  • Common Mistakes
  • Restrictions
  • Sheet Author Tips
• Pro-subscription