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

Personal tools

Difference between revisions of "Sheet Editor"

From Roll20 Wiki

Jump to: navigation, search
(add gif, some explanation)
m (The Sheet Editor)
Line 18: Line 18:
 
<br>
 
<br>
 
<br>
 
<br>
[[File:Sheet-editor.gif|center|800px|thumbnail|Showcasing the Sheet Editor filed out using the code for Band of Blades, and showing in the preview it's aprtial looks]]
+
[[File:Sheet-editor.gif|center|800px|thumbnail|Showcasing the Sheet Editor filed out using the code for Band of Blades, and showing in the preview it's partial looks(that doesn't fully reflect how it actually looks inside the game)]]
 
==== HTML Layout====
 
==== HTML Layout====
 
Here you save the full content of the <code>.html</code>-file for a character sheet. This is the absolute essential part for the sheet to save anything.
 
Here you save the full content of the <code>.html</code>-file for a character sheet. This is the absolute essential part for the sheet to save anything.
Line 28: Line 28:
 
If the sheet contains i18n language tags and have an associated <code>translation.json</code> 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'''.
 
If the sheet contains i18n language tags and have an associated <code>translation.json</code> 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'''.
  
==== Preview ====
+
==== Preview====
 
[[File:Preview-panel.png|500px|thumbnail|right|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.]]
 
[[File:Preview-panel.png|500px|thumbnail|right|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.]]
  
Line 38: Line 38:
  
 
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 <code><rolltemplate></code>, 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.
 
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 <code><rolltemplate></code>, 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==
 
==Related Pages==

Revision as of 10:07, 2 November 2020

The Sheet Editor or Custom Sheet Editor is a Pro only feature, which can be found if choosing "Custom" as your sheet template in a game. It is used for uploading the code for a custom sheet you want to use in a game.

If you intent to test, developt or otherwise work on the character sheet, using Custom Sheet Sandbox for the development is a smart choice.

Contents

The Sheet Editor

Game Settings Menu Options.jpg

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.





Showcasing the Sheet Editor filed out using the code for Band of Blades, and showing in the preview it's partial looks(that doesn't fully reflect how it actually looks inside the game)

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.

Preview

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.

Related Pages