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
m (Related Pages)
m (Access Sheet Editor)
 
(5 intermediate revisions by one user not shown)
Line 1: Line 1:
{{pro only}}
+
{{revdate}}{{pro only|page}}
{{NavSheetDoc}}
+
 
The '''Sheet Editor''' or '''Custom Sheet Editor''' is a {{Pro}} feature, which enables you to use custom code for the character sheet template that is used in your campaign.
+
The '''Sheet Editor''' or '''Custom Sheet Editor''' is a {{Pro}} feature, which enables you to use custom code for the character sheet template that is used in your campaign.{{NavSheetDoc}}
  
 
It can be accessed for a game from the [[Game Settings]]-page, if you change the [[Game_Settings_Page#Character_Sheet_Template|Character Sheet Template]] to '''"Custom"'''.
 
It can be accessed for a game from the [[Game Settings]]-page, if you change the [[Game_Settings_Page#Character_Sheet_Template|Character Sheet Template]] to '''"Custom"'''.
Line 7: Line 7:
 
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.
 
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.
  
=== The Sheet Editor ===
+
=== Access Sheet Editor ===
[[File:Game Settings Menu Options.jpg|200px|thumbnail|left]]
+
[[File:Game Settings Menu Options.jpg|200px|thumbnail|left|'''Step.2''' Access [[Game_Settings_Page|Games Settings]]-page]]
<br>
+
<br>
+
<br>
+
<br>
+
 
To edit a custom character sheet for an existing game:
 
To edit a custom character sheet for an existing game:
 
'''1.''' Go to a Campaign's/Game's [[Game_Management#Game_Details_Page|Details Page]]/Main page.<br>
 
'''2.''' Click the [[Game Management#Settings|Settings]]-button, and select [[Game_Settings_Page|Games Settings]].
 
[[File:Sheet-editor-select-custom.gif|thumbnail|left|500px|Selecting the "custom" option give s you access to the sheet editor]]
 
 
<br>
 
<br>
 
<br>
 
<br>
Line 23: Line 15:
 
<br>
 
<br>
 
<br>
 
<br>
 +
'''1.''' Go to a Campaign's [[Game_Management#Game_Details_Page|Details Page]]/Main page.<br><br>
 +
'''2.''' Click the [[Game Management#Settings|Settings]]-button, and select [[Game_Settings_Page|Games Settings]].
 +
<br clear=left>
 +
:::::::::'''3.''' On the Game settings page, you select '''"Custom"''' from the [[Game_Settings_Page#Character_Sheet_Template|Character Sheet Template]] menu.
 +
:::::::::'''4.''' Copy & paste the html, css, and possible translation files to their respective [[#Editor Tabs|Editor tab]](more below).
 +
[[File:Sheet-editor-select-custom.gif|thumbnail|center|900px|'''Step 3.''' Selecting the "custom" option give s you access to the sheet editor]]
 +
<br clear=all>
 +
:::'''5.''' If you want to use any character sheet code created prior to '''March 2021'''(and some later creations), check the box for [[Legacy Sanitization]]. If you leave it unchecked, you can use sheets designed by the newer [[Character Sheet Enhancement]](CSE)-standard.
 +
 +
If the sheet looks all wrong in your game, reverting the checkbox to the opposite should make it work as intended.
 +
 +
 +
:::'''6.''' Scroll down and press '''"Save Changes"'''.
 +
[[File:Legacy-Sanitization-checkbox.png|thumbnail|800px|center|'''Step. 5''' Toggle checkbox if code is [[Legacy Character Sheet]]. ]]
 +
<br clear=all>
 +
 +
===Editor Tabs===
 +
[[File:Sheet-editor.gif|right|700px|thumbnail|Showcasing the Sheet Editor filed out using the code for '''Band of Blades''', and showing in the [[#preview|preview]] a indicative look of the sheet. The Preview doesn't fully reflect how it actually looks inside the game.]]
 +
 +
The editor (shown above) has four tabs: '''HTML Layout''', '''CSS Styling''', '''[[Character Sheet Translation|Translation]]''', and '''Preview'''.
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
<br>
+
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.
<br>
+
<br>
+
<br>
+
'''3.''' On the Game settings page, you select '''"Custom"''' from the [[Game_Settings_Page#Character_Sheet_Template|Character Sheet Template]] menu.
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
[[File:Sheet-editor.gif|right|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)]]
+
<br>
+
<br>
+
<br>
+
The editor (shown above) has four tabs: '''HTML Layout''', '''CSS Styling''', '''[[Character Sheet Translation|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====
 
==== HTML Layout====
Line 53: Line 44:
 
   
 
   
 
==== CSS Styling====
 
==== CSS Styling====
Here you save the full content of the <code>.css</code>-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.
+
Here you save the full content of the <code>.css</code>-file for a character sheet. If left out, all the styling and visual adjustments is gone, and most sheet would stop working to some degree almost every sheet,except in the rare cases of extremely simplistic character sheets.
  
 
==== Translation====
 
==== Translation====
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'''. More about '''[[i18n|Sheet translation]]'''
+
If the sheet contains [[i18n|sheet translation code]](<code>i18n</code> attributes) 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/most text on the sheet will appear <div style="color:red;display:inline;">'''<nowiki>[</nowiki>RED<nowiki>]</nowiki>'''</div> to indicate missing language tags. If only some words appear <div style="color:red;display:inline;">'''<nowiki>[</nowiki>RED<nowiki>]</nowiki>'''</div>, it means the <code>translation.json</code> is missing sections for those attributes.
 
<br>
 
<br>
 
<br>
 
<br>
Line 62: Line 55:
 
[[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.]]
  
{{mbox | text = '''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.  }}
+
{{mbox | text = '''Warning:''' The preview panel does not have all the behavior of an actual roll20 instance. [[Sheetworkers]], [[Building_Character_Sheets#Repeating_Sections|repeating sections]], and any features that rely on accessing any sheet [[Building_Character_Sheets#Storing_User_Data|attribute values]] will not work correctly in the Preview.  }}
  
 
The preview panel updates in real-time whenever you change the <code>HTML</code>, <code>CSS</code> 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 updates in real-time whenever you change the <code>HTML</code>, <code>CSS</code> 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.
Line 68: Line 61:
 
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.
 
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 <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|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==
 
* {{repo|Roll20/roll20-character-sheets Roll20 Sheet Repository}} - source code of all the community sheets
 
* {{repo|Roll20/roll20-character-sheets Roll20 Sheet Repository}} - source code of all the community sheets
 
* [[Custom Sheet Sandbox]] The better method for editing/testing custom character sheet code
 
* [[Custom Sheet Sandbox]] The better method for editing/testing custom character sheet code
* [[Building Character Sheets|Building/Editing Character Sheets]] - The Documentation starting point
+
* [[Building Character Sheets|Building/Editing Character Sheets]] - Documentation starting point
** [[https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes|Common Mistakes]]
+
** [[Building_Character_Sheets#Common_Mistakes|Common Sheet Mistakes]]
 
** [[Sheet Author Tips]] - some more in-depth tips
 
** [[Sheet Author Tips]] - some more in-depth tips
 
** [[Andreas Guide to Sheet Development]]
 
** [[Andreas Guide to Sheet Development]]

Latest revision as of 12:55, 25 March 2022

The Sheet Editor or Custom Sheet Editor is a
Pro
info feature, which enables you to use custom code for the character sheet template that is used in your campaign.


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

[edit] Access Sheet Editor

Step.2 Access Games Settings-page

To edit a custom character sheet for an existing game:




1. Go to a Campaign'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.
4. Copy & paste the html, css, and possible translation files to their respective Editor tab(more below).
Step 3. Selecting the "custom" option give s you access to the sheet editor


5. If you want to use any character sheet code created prior to March 2021(and some later creations), check the box for Legacy Sanitization. If you leave it unchecked, you can use sheets designed by the newer Character Sheet Enhancement(CSE)-standard.

If the sheet looks all wrong in your game, reverting the checkbox to the opposite should make it work as intended.


6. Scroll down and press "Save Changes".
Step. 5 Toggle checkbox if code is Legacy Character Sheet.


[edit] Editor Tabs

Showcasing the Sheet Editor filed out using the code for Band of Blades, and showing in the preview a indicative look of the sheet. The Preview doesn't fully reflect how it actually looks inside the game.

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.

[edit] 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.

[edit] CSS Styling

Here you save the full content of the .css-file for a character sheet. If left out, all the styling and visual adjustments is gone, and most sheet would stop working to some degree almost every sheet,except in the rare cases of extremely simplistic character sheets.

[edit] Translation

If the sheet contains sheet translation code(i18n attributes) 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/most text on the sheet will appear
[RED]
to indicate missing language tags. If only some words appear
[RED]
, it means the translation.json is missing sections for those attributes.



[edit] 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.

[edit] Related Pages