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 "Using Custom Character Sheets"

From Roll20 Wiki

Jump to: navigation, search
m
m (The Sheet Editor)
 
(15 intermediate revisions by one user not shown)
Line 1: Line 1:
{{NavSheetDoc}}
+
{{Revdate}}{{BCS}}{{NavSheetDoc}}{{pro features}}
{{pro only}}
+
{{pro only|page}}
 
''Main Page:'' '''[[Building Character Sheets]]'''
 
''Main Page:'' '''[[Building Character Sheets]]'''
 
==Using Custom Character Sheets==
 
==Using Custom Character Sheets==
There are two methods of using Custom Character Sheets, The "[[Sheet Editor|The Sheet Editor]]", and the "[[Custom Sheet Sandbox|Sheet Sandbox]]".
+
There are two methods of using Custom Character Sheets, The "[[Sheet Editor|The Sheet Editor]]"(for your normal games), and the "[[Custom Sheet Sandbox|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#Character_Sheet_Template|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 [[GM#Creator|Creator]] of the game.
+
The former is accessed and used in [[campaign]] where the character sheet option have been set to "Custom" in the [[Game_Settings_Page#Character_Sheet_Template|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.
 +
__TOC__
 
=== Find Code===
 
=== Find Code===
The sourcecode to all community-created Roll20 sheets can be found on {{repo|Roll20/roll20-character-sheets Github}}. The code for each sheet are organized in folders, and each sheet consists of a <code>.html</code>-file, a <code>.css</code>-file, and possibly a <code>translation.json</code>file 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.  
+
The sourcecode to all community-created Roll20 sheets can be found on {{repo|Roll20/roll20-character-sheets (Github)}}. The code for each sheet are organized in folders, and each sheet consists of a <code>.html</code>-file, a <code>.css</code>-file, and possibly a <code>translation.json</code>file 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:
 
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]],  
 
* 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 <code>ctrl+A</code> to select all the code, <code>ctrl+C</code> to copy, and then select the Sheet Editor and <code>ctrl+V</code> to paste the code.
+
* or navigate to the individual file's page on github, and press on the "show raw" button, and press {{button|Ctrl}}+{{button|A}}(select all), then {{button|Ctrl}}+{{button|C}} to copy, and then go to the Sheet Editor and {{button|Ctrl}}+{{button|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:
  
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 can be found on in the github repository(March 2020), such as:
+
'''(Old) sourcecode for "by Roll20"-char sheets:'''
  
* [[D&D 5E by Roll20]] - {{github|Roll20/roll20-character-sheets/tree/master/DD5thEditionLegacy D&D 5E by Roll20}}
+
* [[D&D 5E by Roll20]] - code: {{repo|Roll20/roll20-character-sheets/tree/master/DD5thEditionLegacy D&D 5E by Roll20}} | (very outdated)
* [[PF2E]] {{github|Roll20/roll20-character-sheets/tree/master/Pathfinder%20Second%20Edition%20by%20Roll20 Pathfinder 2E by Roll20}}
+
* [[PF2E|Pathfinder Second Edition]] - code: {{repo|Roll20/roll20-character-sheets/tree/master/Pathfinder%20Second%20Edition%20by%20Roll20 Pathfinder 2E by Roll20}} | (very outdated)
* [[Pathfinder_Official|Pathfinder by Roll20]] - {{github|Roll20/roll20-character-sheets/tree/master/Pathfinder%20by%20Roll20 Pathfinder by Roll20}}
+
* [[Pathfinder_Official|Pathfinder by Roll20]] (1E) - code: {{repo|Roll20/roll20-character-sheets/tree/master/Pathfinder%20by%20Roll20 Pathfinder by Roll20}} |  (mostly up to date)
* [[Starfinder Official‎|Starfinder by Roll20]] {{github|Roll20/roll20-character-sheets/tree/master/Starfinder%20by%20Roll20 Starfinder by Roll20}}
+
* [[Starfinder Official‎|Starfinder by Roll20]] - code: {{repo|Roll20/roll20-character-sheets/tree/master/Starfinder%20by%20Roll20 Starfinder by Roll20}} |  (mostly up to date)
 +
* Gumshoe by Roll20 - code: {{repo|Roll20/roll20-character-sheets/tree/master/Gumshoe%20by%20Roll20 sourcecode}} | unknown
  
 
+
{| role="presentation" class="wikitable mw-collapsible mw-collapsed"
Newer Official sheets, such as [[Burn Bryte]], don't have any public code available for the sheet, but does have for the much older {{github|Roll20/roll20-character-sheets/tree/master/Burn%20Bryte%20by%20Roll20 Burn Bryte playtest}}.
+
|'''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: {{repo|Roll20/roll20-character-sheets/tree/master/13th%20Age%20by%20Roll20 sourcecode}}
 +
* Burn Bryte(old playtest 2019)- code: {{repo|Roll20/roll20-character-sheets/tree/master/Burn%20Bryte%20by%20Roll20 sourcecode}}
 +
* Chronicles of Darkness by Roll20 - code: {{repo|Roll20/roll20-character-sheets/tree/master/Chronicles%20of%20Darkness%20by%20Roll20 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  {{repo|Roll20/roll20-character-sheets/tree/master/Chronicles%20of%20Darkness sourcecode}}
 +
* Cypher Systems by Roll20 - code: {{repo|Roll20/roll20-character-sheets/tree/master/Cypher%20Systems%20by%20Roll20 sourcecode}}
 +
* Dungeon World by Roll20 - code: {{repo|Roll20/roll20-character-sheets/tree/master/Dungeon%20World%20by%20Roll20 sourcecode}}
 +
* Star Trek Adventures by Roll20 - code: {{repo|Roll20/roll20-character-sheets/tree/master/Star%20Trek%20Adventures%20by%20Roll20 sourcecode}}
 +
|}
  
 
=== The Sheet Editor ===
 
=== The Sheet Editor ===
''Main Article:'' '''[[Sheet Editor]]'''
+
[[File:Game Settings Menu Options.jpg|350px|thumbnail|left]]''Main Article:'' '''[[Sheet Editor]]'''
[[File:Sheet-editor.gif|500px|thumbnail|left|The "[[Sheet Editor]]", accessible when the Character Sheet is set to "Custom" in the [[Game Settings Page|Game Settings]]. Showing the tabs where the code is placed, as well as the "Preview Panel" that only shows an approximate view of the sheet, that isn't accurate to the in-game view]]
+
 
[[File:Game Settings Menu Options.jpg|350px|thumbnail|right]]
+
<br><br>
To edit a custom character sheet for an existing game:
+
To use a custom character sheet in an existing game:
# Go to a Campaign's/Game's [[Game_Management#Game_Details_Page|Details Page]].
+
 
# Click the [[Game Management#Settings|Settings]]-button, and select [[Game_Settings_Page|Games Settings]].
+
'''1.''' Go to a Campaign's/Game's [[Game_Management#Game_Details_Page|Details Page]].
# On the Game settings page, you select '''"Custom"''' from the [[Game_Settings_Page#Character_Sheet_Template|Character Sheet Template]] menu.
+
 
 +
'''2.''' Click the [[Game Management#Settings|Settings]]-button, and select [[Game_Settings_Page|Games Settings]].
 +
 
 +
'''3.''' On the Game settings page, you select '''"Custom"''' from the [[Game_Settings_Page#Character_Sheet_Template|Character Sheet Template]] menu.<br clear=left>
 +
[[File:Legacy-Sanitization-checkbox.png|thumbnail|550px|left| Check the box if you want to use (older) [[LCS|legacy code]]. ]]
 +
<br><br>'''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.
 +
<br clear=left>
 +
[[File:Custom-sheet-editor-tabs.gif|thumbnail|600px|left| The 4 tabs of the [[Sheet Editor]]. Remember that the [[#Preview Panel|Preview]]-tab is almost never accurate.]]
 +
<br><br><br><br>
 +
The editor (shown below) has four tabs: '''HTML Layout''', '''CSS Styling''', '''[[Character Sheet Translation|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 <span style="color: white;background-color: #02baf2;border: 1px solid transparent;font-size: 16px;line-height: 1.6;border-radius: 4px;padding: 7px;border-color: #2e6da4;margin-bottom: 0;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;background-image: none;text-decoration: none;font-family: Helvetica,Arial,sans-serif;cursor: pointer;">Save Changes</span> button.
 +
 
 +
<br clear=right>
 +
[[File:Char-sheet-no-translations.png|thumbnail|450px|right| Example of a character sheet template, missing it's translation file. {{repo|Roll20/roll20-character-sheets/tree/master/cepheus-atom Cepheus Atom}}]]
 +
<br clear=left>
 +
==== Common Mistake ====
 +
{{orange|'''Common Mistake:''' If the sheet needs the [[Character Sheet Translation|translation file]], and you don't copy it to your game, all/most text on it will show red text and the name of the language tag for each section, as seen in the example.}}
 +
<br clear=all>
  
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.
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
 
==== Preview Panel ====
 
==== Preview Panel ====
 
[[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.   }}
+
 
 +
{{orange|'''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 <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 54: Line 75:
 
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 [[Building_Character_Sheets/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.
 +
 
 +
==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.''' ([[User:1223200|1223200]] ([[User talk:1223200|talk]]) 12:29, 5 May 2021 (UTC))
 +
 
  
===Editing Sheet Code===
+
==[[Sheet Sandbox]]==
'''[[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.
+
{{main|Sheet Sandbox}}
  
The Community Wiki articles on  '''[[Building Character Sheets]]''' is specifically more comprehensive than the version available on the [[Help Center]]. [[User:1223200|1223200]] ([[User talk:1223200|talk]]) 19:54, 10 March 2021 (UTC)
+
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.
  
When testing sheet code, it's smart to use the [[Sheet Sandbox]], instead of the normal [[Sheet Editor]], as it's designed for streamlining testing and is overall quicker to use. Sheet Sandbox test games doesn't allow inviting other people  
+
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==
 
==See Also==
Line 68: Line 95:
 
** [[Add Character Sheets]]
 
** [[Add Character Sheets]]
 
* '''[[Building Character Sheets]]''' - coding
 
* '''[[Building Character Sheets]]''' - coding
** [[Building_Character_Sheets#Common_Mistakes|Common Mistakes]]
+
** [[Sheet_Mistakes|Common Mistakes]]
** [[Building_Character_Sheets#Restrictions|Restrictions]]
+
** [[Building_Character_Sheets#Restrictions|Code Restrictions]]
 
** [[Sheet Author Tips]]
 
** [[Sheet Author Tips]]
 
* [[Pro]]-subscription
 
* [[Pro]]-subscription
Line 78: Line 105:
 
[[Category:Pro]]
 
[[Category:Pro]]
 
[[Category:Character Sheets]]
 
[[Category:Character Sheets]]
 +
[[Category:FAQ]]
 +
[[Category:Language]]

Latest revision as of 19:01, 4 March 2023

Main Page: Building Character Sheets

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

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

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


[edit] Common Mistake


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

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


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

[edit] See Also