Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Using Custom Character Sheets

From Roll20 Wiki

Jump to: navigation, search

Main Page: Building Character Sheets

Using Custom Character Sheets

There are two methods of using Custom Character Sheets, The "The Sheet Editor"(for your normal games), and the "Sheet Sandbox"(for better & quicker sheet testing).

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.

Contents

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(select all), then Ctrl+C to copy, and then go to the Sheet Editor and Ctrl+V to paste the code in the corresponding tab.

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(from March 2020) can be found:

(Old) sourcecode for "by Roll20"-char sheets:

sourcecode for "by Roll20"-char sheets that isn't outdated:
These are "by Roll20"-sheet that Roll20 created long ago, and haven't updated in years, so should be 1-to-1 with the version from the menu.
  • 13th Age by Roll20 - code: sourcecode
  • Burn Bryte(old playtest 2019)- code: sourcecode
  • Chronicles of Darkness by Roll20 - code: sourcecode
    • The Chronicles of Darkness sheet is a better version of the sheet, as it's maintained & updated by the community, while the "by Roll20"-version haven't been updated since Oct 2019 sourcecode
  • Cypher Systems by Roll20 - code: sourcecode
  • Dungeon World by Roll20 - code: sourcecode
  • Star Trek Adventures by Roll20 - code: sourcecode

The Sheet Editor

Game Settings Menu Options.jpg
Main Article: Sheet Editor



To use a custom character sheet in 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 4 tabs of the Sheet Editor. Remember that the Preview-tab is almost never accurate.





The editor (shown below) has four tabs: HTML Layout, CSS Styling, Translation, and Preview.

You copy your HTML and CSS to their respective tabs, and if the sheet has translation files, you copy the content of the default translation file(usually English), or for the language you want.

Then scroll down the page and press the Save Changes button.


Example of a character sheet template, missing it's translation file. Cepheus Atom


Common Mistake


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.



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))


Sheet Sandbox

Main Page: Sheet Sandbox

When testing sheet code, it's smart to use the Sheet Sandbox, instead of the normal Sheet Editor, as the Sheet Sandbox is designed for streamlining custom sheet testing, and is quicker to update.

Only drawback with Sheet Sandbox is that you can't inviting other people to test, so you'd need to make a normal game if you want others to test the sheet.

See Also