Roll20: How to Edit or Modify Character Sheet

Do you use Roll20? If so, the reason why you come here now may be because you want to edit or modify a character sheet, but you do not know how to do it. Well, you come to the right site because here we will explain it according to the Roll20 site.

How to Edit a Custom Character Sheet for An Existing Game

If you want to edit a custom character sheet for an existing game, you are able to follow the steps below.

  • The first thing that you have to do is to access a Campaign’s/ Game’s Details Page.
  • After that, you have to click on the Settings-button and then you have to choose Games Settings.
  • When you are on the Game Settings page, the thing that you have to do is to choose Custom from the Character Sheet Template menu.
How to Edit a Custom Character Sheet for An Existing Game

For your information, there are four tabs in the editor and those are HTML Layout, CSS Styling, Translation and Preview. You are able to copy your html and css code to their respective pages and if the sheet has translation files, you have to copy the content of the suitable language version. In case a translation file is not provided and the sheet used them, it will display red text and the name of the language tag for each section.

For your information, the Sheet Editor or Custom Sheet Editor is a Pro only feature which is able to be found if you choose Custom as your sheet template in a game. You are able to use it for uploading the code for a custom sheet that you want to use in a game.

If you want to test, develop or otherwise work in the character sheet, you are able to use Custom Sheet Sandbox for the development and it is a good choice for you.

Four Tabs in Sheet Editor

As explained earlier that there are four tabs in the editor including HTML Layout, CSS Styling, Translation and Preview. So, what are they?

In the HTML Layout, you are able to save the full content of the .html- file for a character sheet. For your information, it is the absolute essential part for the sheet to save anything.

In the CSS Styling, you are able to save the full content of the .css-file for a character sheet. If it is left out, nearly every sheet will stop working or looking sensible. But, it will not be like this if it is in the rare cases of very simplistic character sheets.

How about Translation? If the sheet has i18n language tags and has an associated translation.json file, its content will be copied here. In case there is a sheet which needs them, they are left out and all the text on the sheet will appear RED.

Now, it is about Preview. When you change the CSS, HTML, or Translation of your sheet, preview will update in real-time to display to you an approximation of what the sheet will look like in-game. It is beneficial for quickly checking superficial change while you are editing. However, if you want to be sure of the actual end-result, you have to enter the game and then open the sheet itself.

For your information, the Preview panel implements all the similar security precautions and filtering as the main Roll20 application. You have to make sure that you right click and Inspect Element if you are seeing strange behaviour for example, your styles are not applied properly. If it happens, it may be because there is a security filter that is changing the name of a class or something similar.

If you change several things in the character sheet editor when you are in the game, you need to save your changes and do not forget to refresh the active Roll20 game. If the character sheet has <rolltemplate>, the code for it will be able to be seen unprocesses in the preview window. It is better for you to put roll templates at the end of the sheet’s code so they will  not clog the visuals of the sheet when using the preview panel.

Custom Sheet Sandbox

Custom Sheet Sandbox

Custom Sheet Sandbox is an alternative to the Sheet Editor. You are able to use it for developing your sheet where you are able to update the HTML, CSS and Translation files in the sandbox and also see the accurate sheet update instantly.

With the Sandbox, you are also able to test the sheet.json and its Default Settings. However, it is important for you to know that you are not able to invite other users to Custom Sheet Sandbox games for testing.

Designing Your Sheet

If you want to set up your sheet to be able to respond to the i18n service, it is very easy. It will take some time, especially if you are working with a large, pre-existing sheet. Well, as you can see below that there are two steps that you can follow to permit your sheet to be translated.

  • The first step is, you have to mark the elements that you want to contain the translated text.
  • The second step, you have to create a translation file which contains all of the strings that will be translated.

This file will be fed to the translation service, CrowdIn, where the volunteers will go string by string and translate them into another language. It will generate the similar translation file in all of the other languages which they will use accordingly when someone has that language chosen on Roll20.

The Roll20 team has added a class to the parent .charsheet element because creating one single design that can fit multiple sizes of translated text can be difficult. With it, you are allowed to have separate css for individual languages.

The class is lang-[2 char language code]. So, if the language is English, it is lang-en or if the language is French, it is lang-fr. It will permit you, after your sheet has been translated, to change a style, particularly for one language, if the new text for that language does not match your current design.