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 (Common Mistake)
(6 intermediate revisions by one user not shown)
Line 1: Line 1:
{{Revdate}}
+
{{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).
{{NavSheetDoc}}
+
 
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__
 
__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>(select all), then <code>ctrl+C</code> to copy, and then go to the Sheet Editor and <code>ctrl+V</code> to paste the code in the corresponding tab.
+
* 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(from March 2020) can be found:
  
Line 54: Line 54:
 
The editor (shown below) has four tabs: '''HTML Layout''', '''CSS Styling''', '''[[Character Sheet Translation|Translation]]''', and '''Preview'''.
 
The editor (shown below) has four tabs: '''HTML Layout''', '''CSS Styling''', '''[[Character Sheet Translation|Translation]]''', and '''Preview'''.
  
You copy your and css  to their respective tabs, and if the sheet have a translation files, you copy the content of the default translation file(usually English), or for the language you want.
+
You copy your HTML and CSS to their respective tabs, and if the sheet have a translation files, you copy the content of the default translation file(usually English), or for the language you want.
  
 
The 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.
 
The 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.
Line 60: Line 60:
 
<br clear=right>
 
<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}}]]
 
[[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><br><br>
+
<br clear=left>
{{orange|'''Common Mistake:''' If the sheet needs the 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.}}
+
==== 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>
 
<br clear=all>
 +
 
==== 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 75: Line 77:
 
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.
 
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===
+
==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.
 
'''[[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))
 
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))
  
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 overall quicker to use.
+
 
 +
==[[Sheet Sandbox]]==
 +
{{main|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.
 
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.
Line 89: 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|Code Restrictions]]
 
** [[Building_Character_Sheets#Restrictions|Code Restrictions]]
 
** [[Sheet Author Tips]]
 
** [[Sheet Author Tips]]
Line 100: Line 106:
 
[[Category:Character Sheets]]
 
[[Category:Character Sheets]]
 
[[Category:FAQ]]
 
[[Category:FAQ]]
 +
[[Category:Language]]

Revision as of 13:21, 6 March 2022

Main Page: Building Character Sheets

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

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

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 have a translation files, you copy the content of the default translation file(usually English), or for the language you want.

The scroll down the page and press the Save Changes button.


Example of a character sheet template, missing it's translation file. Cepheus Atom


Common Mistake


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.

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))


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.

See Also