Sheet Editor
From Roll20 Wiki
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. |
Character Sheet Development
Getting Started
- Using Custom Sheets
- Building Sheets
(Main Page) - Glossary
- Code Restrictions
- Best Practice
- Common Mistakes
- Tutorials
- Examples, Templates
- Pattern Libraries
- HTML & storing data
- CSS & Styling
General
- Updates & Changelog
- Known Bugs
- Character Sheet Enhancement(CSE)
- Custom Roll Parsing
- Legacy Sheet(LCS)
- Beacon SDK
Reference
- Buttons
- Repeating Sections
- Sheetworkers
- Roll Templates
- sheet.json
- Translation
- Auto-Calc
- Advanced
- All SheetDev Pages
Tools & Tips
- Sheet Sandbox
- Sheet Editor
- Sheet Dev Tools
- Sheet Author Tips
Other
It can be accessed for a game from the Game Settings-page, if you change the Character Sheet Template to "Custom".
If you intent to test, develop or otherwise work on the character sheet, using Custom Sheet Sandbox for the development is a smart choice, as it's quicker to update. The Sandboxes drawback is that you can't invite other people to it.
Contents |
The Sheet Editor
To edit a custom character sheet for an existing game:
1. Go to a Campaign's/Game's Details Page/Main 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.
The editor (shown above) 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 ins't provided and the sheet used them, it will show red text and the name of the language tag for each section.
HTML Layout
Here you save the full content of the .html
-file for a character sheet. This is the absolute essential part for the sheet to save anything.
CSS Styling
Here you save the full content of the .css
-file for a character sheet. If left out, almost every sheet would stop functioning or looking sensible, except in the rare cases of extremely simplistic character sheets.
Translation
If the sheet contains i18n language tags and have an associated translation.json
file, it's content would be copied here. If a sheet need them and they are left out, all the text on the sheet will appear RED. More about Sheet translation
Preview
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.
Related Pages
- Roll20 Sheet Repository - source code of all the community sheets
- Custom Sheet Sandbox The better method for editing/testing custom character sheet code
- Building/Editing Character Sheets - The Documentation starting point
- Sheet Author Tips - some more in-depth tips
- Andreas Guide to Sheet Development