Can You Upload a Character Sheet to Character Vault

Overview

Character Sheet Evolution
Getting Started

• Using Custom Sheets
• Edifice Sheets
  (Main Folio)
• Code Restrictions
• Best Practice
• Mutual Mistakes
• Tutorials
• Examples, Templates
• Pattern Libraries
• HTML & storing data
• CSS & Styling
  • Sheet Layout
  • Images Use
  • Fonts & Icons
  • Dark Mode(NEW)
  • Mobile

Full general

• Updates & Changelog
• Known Bugs
• Character Canvass Enhancement(CSE)
• Custom Roll Parsing
• Legacy Sheet(LCS)

Reference

• Buttons
  • Macro Guide
• Repeating Sections
• Sheetworkers
  • jQuery
• Roll Templates
• sheet.json
  • Default Settings
• Translation
• Machine-Calc
• Advanced
• All SheetDev Pages

Tools & Tips

• Sheet Sandbox
• Sheet Editor
• Sheet Author Tips

Git/GitHub

• Sail Repository
• Guide to GitHub
  • Short Git Guide
• Submission Guidelines

Other

• Sheet Authors
• Graphic symbol Sheet Alphabetize
• Sheet Requests
• Character Canvass^(Forum)
• About:Sheet Dev Documentation

This is the main commodity on how to create or edit Custom Character Sheet for Roll20. You demand to be a Pro-user to access this feature.

It lists and describes many of the mutual elements of character sheet and how they function. Most larger concepts have a separate page that goes into larger particular which is linked hither, such as the pages for Buttons, Designing Graphic symbol Sheet Layout or Sheetworkers. The page is maintained/updated mostly by Roll20 community members.

The guide assumes some basic familiarity with HTML & CSS, then using other resources to learn the nuts for those is advised. The Guides-sections have some links to tutorials & resources on HTML, CSS, and JavaScript in general..

Contents

• 1 Overview
• 2 Using Custom Character Sheets
  • ii.1 Go Started
• 3 General
  • three.one Canvas Structure
• four Complete Example
• five Restrictions
  • 5.ane Security Filtering
  • 5.2 CSE
  • v.3 Legacy Canvas
• 6 Javascript
• 7 Common Mistakes
• eight HTML
  • eight.1 Storing User Data
    • 8.one.i Text & Numbers
      • 8.1.1.ane Default Values
      • viii.1.1.2 blazon="text"
        • 8.1.1.two.i Character Proper noun
      • viii.1.1.3 type="number"
        • 8.1.i.3.1 Auto-Calculating Values
      • 8.1.1.4 type="hidden"
    • 8.one.2 type="range"
    • viii.1.three Dropdown menu
    • 8.1.4 Checkboxes and Radio Buttons
  • 8.ii Static Info
  • 8.three Sheet Rolls and Roll Buttons
  • 8.4 Repeating Sections
  • 8.5 Layout
  • 8.half-dozen Images
• 9 CSS
  • 9.ane Tabs
  • 9.ii Roll20 columns/rows
  • 9.3 Google Fonts
• 10 JavaScript
  • ten.ane Sheet Workers Scripts
  • 10.ii API
• 11 Advanced Sheet Options
  • 11.1 Sheet Layout
  • 11.two Roll Templates
  • 11.three Translating Character Sheets
  • 11.four Default Sheet Settings
  • 11.v Compendium Integration
  • xi.6 Charactermancer
  • 11.7 Other
• 12 Roll20 Character Sheets Repository
  • 12.1 Minimum Requirements
    • 12.1.1 one. Lawmaking of Conduct.
    • 12.one.ii 2. Good Lawmaking
    • 12.1.3 3. A Satisfactory Experience
  • 12.ii Beyond the Minimum
  • 12.3 Patreon and Tipeee Linking Rules for Customs Sheet Contributors
• 13 Best Practices
  • 13.1 Attributes/Inputs
  • xiii.2 Sheetworkers & Curl Templates
  • thirteen.3 Other Roll20-specific
• fourteen Sail Templates/Examples
  • 14.ane Blueprint Libraries
• xv Related Pages
• 16 See Too
  • sixteen.ane Guides
  • xvi.ii Forums Threads

Using Custom Character Sheets

Primary Article: Using Custom Character Sheets

There are 2 methods of using Custom Character Sheets, The "The Sail Editor", and the "Sheet Sandbox".

The former is accessed and used in campaign where the character sheet option have been prepare to "Custom" in the Game Settings page, and the latter is a tool used for character sheet development, where yous upload (or literally cut and paste, the born editor is very basic) your lawmaking as files. Either 1 tin merely exist accessed past the Creator of the game.

The sourcecode to all community-created Roll20 sheets can exist found on Github.

Become Started

What you need to get started with Sail Editing/Creation

• Access to a

  Pro

  ^info account (to be able to examination the sail code in Roll20)
  • Ideally, become Pro for yourself, so you tin can employ the Sheet Sandbox(much better for testing)
  • Alternatively, take someone with Pro host a Exam game for you. The host would need to manually update the game's sheet code through the Canvass Editor, which is really cumbersome.
• online html/css reference guides and tutorials
• A adept text editor due east.g. VSCode, Notepad++
• plenty of patience/free fourth dimension
• plenty of java
• possibly a second monitor

If all you want to exercise is create a custom graphic symbol sheet for utilise amongst your friends, you lot don't need to create a github account, learn how to submit code nor collaborate with others.

Merely sign up to github in one case y'all accept spent the difficult time inside the sandbox writing/debugging your HTML and CSS code so it displays perfectly within a Roll20 game, then its a matter of submitting your sheet via github if y'all desire to make it widely available.

General

Graphic symbol sheets for Roll20 are created with HTML & CSS,(and for more advanced features using Sheetworkers, a limited amount of JavaScript). Roll20 uses a number of changes to normal html/css, so they cannot properly exist tested outside Roll20 in general spider web-dev environments such as Codepen or JSFiddle, and must be examined within a game.

Plain HTML/CSS code taken from elsewhere do not work right away, as there exists a number of Roll20-specific feature and definitions that need to be used to brand this piece of work. There are also a adept number of known Restrictions that limits what features of HMTL/CSS/JavaScript can be used. Converting grapheme sheets from sources such every bit pdfs is not possible either, and canvas must exist manually created, either from scratch, or based on existing Roll20 sheets.

In general, a Roll20 character sheet consists of a HTML-file, and a CSS-file. Some more advanced sheets also have a translation file.

Cheque BCS/Updates for latest updates & changes to the sail cosmos framework, and BCS/Bugs for known bugs and issues.

Sheet Structure

A general description of how the code for a graphic symbol sheet is structured:

The HTML file/code:

• Contains no <body> or similar starting elements. (The html of a sheet is actually a part of a large <grade>, which itself is inside an iframe.)
• The HTML will automatically refer to the CSS lawmaking and classes, and so no <include> or other standard steps to refer to css files or other sources can be used.
• Whatsoever user-edited information in sheets are unremarkably stored in <input>-elements or similar, and these elements must always have a proper noun-aspect that starts with attr_ for them to exist properly saved.
• (LCS but) When referring to a CSS class from the CSS file, the sail--prefix in the class' proper noun is non needed.
• Whatsoever JavaScript/Sheetworkers must be included in the html file in a separate <script type="text/worker">-element at the finish, sheets don't support JavaScript outside that chemical element.
• Roll Templates are as well divers inside the HTML file.

The CSS file/code:

• In the CSS file, all class-names must take a sheet--prefix in their name, or Roll20 won't recognize the classes. In the HTML file, this prefix is not needed.

(Optional) Translation file:

• The translation file is a .json-file, that includes the each i18n language, and pairs information technology with the corresponding content that should be displayed for the tag.

Complete Example

Principal: Consummate Examples‎

On Complete Examples, there are a selected listing of consummate, working character sheets, which could be insightful to look at to get a general idea what goes into a sheet, and how some common things are implemented. These are adequately well structured & implemented sheets on the shorter side, making them more than approachable than whatsoever randomly picked sheet from the repo's chiliad+ sheets.

Sheet Templates are intended as generic starting points for people learning to create their own character sheets, rather than using existing sheets with all the baggage they come with. About of these templates are barebones.

Pattern Libraries contains various snippets useful for creating/updating any sheet.

Restrictions

Generally speaking, grapheme sheets are created with HTML, CSS, and JavaScript (for Sheetworkers), just in that location be some constraints & security filtering that restricts what tin can be used, and where, in character sheet code.

Security Filtering

• Using the word eval anywhere in the sail code volition stop everything from working. Roll20 have put is every bit a security measure to foreclose eval to be used even in a roundabout mode. You cant have attribute or class names that includes information technology.
  • Known list of forbidden words: data:, eval, cookie, window, parent, this, behaviour, beliefs, expression, moz-binding
  • this also prevent you from importing fonts that contain eval equally part of the name, like "Medi

    eval

    Precipitous"
• All images volition exist passed through the Roll20 image proxy to prevent security attacks. This should be largely transparent to you and shouldn't affect anything, just it's something to be aware of. Images in Sheets

CSE

Character Sheet Enhancement is the new sheet code style that was released in March 2021. Information technology has expanded features, is closer to baseline HTML/CSS, and is generally less restrictive compared to Legacy Sheets.

HTML:

In the Roll20, the character sheet code is basically wrapped within a giant <class> tag(so don't utilize it).

• Nearly DOM functionalities can't be used
• Do not use Root HTML elements such as <html> <head>, <title>, or <body> which are used to in your HTML. Doing so will prevent your character sheet from loading in the virtual tabletop.
  • HTML Elements that doesn't work: <meter>, <progress>, link, video, iframe, meta, input type="color". Trying to add whatsoever of these to a sheet will either result in Roll20 removing them or behave like they are a <div>.
  • Restricted attributes examples: autoplay, download, onclick
• Elements that now works: <datalist>, <details>, <summary>, <a href>, main, section
• Enable employ of #id in HTML elements, & <a href=#>
• Attribute names are example-insensitive when checked for uniqueness. All <input>, <select>, <textarea> etc. should have unique attribute names if intended to be independent. Two inputs with same attr name volition mirror each other and update if the other one is inverse.
• To create a section where you tin dynamically add new entries, the Repeating Sections method is used through the <fieldset>-element.
• <input> and <button> elements are restricted to a limited number of types. This is likely truthful with other elements.
• All images will be passed through the Roll20 image proxy to prevent security attacks. This should be largely transparent to you and shouldn't bear upon anything, merely information technology's something to exist enlightened of. Images in Sheets
• <svg>-element aren't supported directly, but they tin be used if saved as divide.svg files: Example
• All attributes in Roll Templates need to be written with double quotes, as single quotes results in roll template lawmaking being completely ignored.
  • classes chosen in Ringlet Templates must use the sheet-classname format, like is used with Legacy Sail
• If using the roll20-made rows & columns, need to prefix sheet- to their utilize in the HTML(likely in the CSS besides).
• You lot cannot refer to external CSS stylesheets, everything need to be on the CSS file

CSS:

• Certain(?) Media queries can now be used
• Do not utilize .sail-new-window equally a CSS class name, as Roll20 already uses it and will block y'all from trying to override it. Forum thread
• Roll20 have some predefined CSS classes for it's custom row/cavalcade organisation and other default, and then very generic class names like: .sheet-row, .sheet-col, .sail-3colrow, .sheet-2colrow.
• .sheet-character is best to exist avoided when naming your own CSS classes. If you utilise the predefined classes, you need to phone call them by their full name on the HTML.
• Repeating Sections Restrictions
• Default Fonts: The post-obit fonts tin exist accessed by default: Arial, Patrick Hand, Contrail One, Shadows Into Lite and Candal
  • Google Fonts: can be used with the @import-function [Note: If you use @import with Google's own generated URL, you may encounter the post-obit error: Potential CSS security violation; character sheet template styling thrown out. To work around this effect, change css2?family to css?family in the URL (i.east., remove the "ii").]
• Enable utilise of #id in HTML elements
• You tin't refer to external CSS stylesheets, everything demand to exist on the CSS file

Legacy Sheet

Legacy Sheet is the old canvas coding framework/method, which is more restrictive than CSE.

Come across Legacy Canvas#Legacy Sheet Restrictions for details.

Javascript

Main Section: Sheetworkers - Restrictions

Many JavaScript functions or functionalities tin't be used within Roll20, are express to the Sheetworker framework.

If you're attempting to do any slightly more advanced data-handling, check existing canvass for user-cases. At that place shouldn't be whatsoever differences between Legacy Sheet and CSE for sheetworkers.

Common Mistakes

chief page: Common Mistakes - Sheet Development

A list of common mistakes by one-time and new sheet creators.

ane. Forgetting to start attribute names with attr_ (eastward.g. <input blazon="number" name="attr_dexterity"> vs. <input type="number" name="dexterity">). To shop whatever data on a graphic symbol sheet, this prefix is needed in the name. If it is left out, no data beingness saved in the field subsequently the sheet is closed.

two. Thinking the Preview Panel shows all the changes/is accurate. The preview panel does not prove an authentic view of how the sheet volition wait/work in an bodily game, and completely ignores sheetworkers. Y'all need to login to the campaign and open a character sheet there to be sure of sheet visuals/functionality, or use the Sheet Sandbox.

3. Check/Uncheck "Legacy Sanitization" when using custom lawmaking. Depending on if you have canvass code formatted for Legacy sheets or CSE, you need to check the box plant in the Sail Editor, or when using Canvas Sandbox, update the sheet.json-department.

4. (Legacy Canvas only)Forgetting to add together sheet- to the class names in your .css file. This is not need in the .html file, Roll20 automatically assumes all classes have that prefix there. (Doesn't utilise to CSE sheets) Come across CSS Styling

5. Using an underscore in the name/class of repeating sections. Each <fieldset> needs to take unique classname that starts with repeating_, and the rest of the name cannot accept underscores or the department won't relieve any data.

6. CSS: Not understanding how General Sibling Selector ~ works, and how information technology applies in making tabs/hideable areas on the canvas. The CSS Wizardry examples on show/hide areas & creating tabs relies on the correct positioning of elements, and if the html elements are thrown in a different order or withing other elements, the conditions aren't met for things to trigger.

7. Not using a linter/code validator on your HTML/CSS/Sheetworker/Translation files. Often with HTML/CSS things can seemingly work fine for a long time even when yous have mistakes, and cause problem fashion later. Running your Sheetworker's code through a JavaScript validator is a critical step to finding why it might not work. Checking any translation.json or sheet.json files is besides important.

8. Google Fonts Follow the Roll20 guide to the letter, and don't use urls generated by google, y'all need the remove the "ii" from the url, among things. Google Fonts on Roll20 Sheets

9. Do non submit a new canvas that uses <table> for layout. It'southward the about common reason for new sheets beingness rejected/delayed, use better methods for layout instead. There are quondam sheets in the repo using them, but they where created earlier this dominion against <table> was made.

General coding mistakes _{(non straight related to how Roll20 code works)}

Grand-1. Not reading the Roll20 documentation. Roll20 sheet code isn't straight upwardly simply regular HTML/CSS/JavaScript, but has a number of differences. Much of the quirks & basics related to Character Sheet Creation is documented/linked on this page, and the docs are regularly getting updated. It's always a good thought to check pages again, even if you read them in the past. BCS/Updates & BCS/Bugs are good to keep updated on recent things. List of all pages related to "Grapheme Sheet Cosmos"

Grand-2. Non looking at existing sheets. Seeing how existing sheets have been made and structured tin can assistance you avoid reinventing the wheel or making mistakes as result of knowing HTML/CSS/JavaScript but having piffling familiarity with how character sheets are created. All sheets in the Character sheet repository are nether MIT license so are free(and encouraged) to exist used equally templates for creating your own sheet, instead of making everything from scratch.

1000-iii. Not request for help when you get stuck. Roll20 has a small but active community who works with creating and improving character sheets, and are often eager to assistance out if you got stuck on some characteristic yous've tried to figure out. Roll20 Character Canvas & Compendium Forums^(Forum)

HTML

HTML is used to define the Character Sheet, and Roll20 have a couple of differences in how this work from baseline HTML, which are described in this section. Y'all can use well-nigh of the basic HTML elements, such as p, div, span, textarea, input, select, img equally normal, while some, such equally <push button> works noticeably differently.

Note: Yous cannot use JavaScript on your canvass outside of sheetworkers, and their <script type="text/worker">-element.

Storing User Data

Nigh HTML-elements used for storing user input can be used in Roll20 sheet, with an notable distinction. For each element, you must include a name-attribute which begins with attr_. This defines the unique attribute-name for the element, and tells that it's an attribute that should be saved to the grapheme. This must also exist done for values & attributes that the user can't edit, for that information to exist usable in calculations or like. All these attributes( except from repeating sections) volition show upward in the Attributes & Abilities-tab on the grapheme sheet, afterwards having been edited for the first time.

Text & Numbers

To create a field for saving text or numbers entered by the user, the following elements can be used:

• <input type="text"> MDN documentation
• <input type="number"> MDN documentation
• <textarea> MDN documentation

Annotation: <input>-elements must take a specified type, and the input types that work on Roll20 are: (text, number, hidden, checkbox, radio and range).

Example:

<input type="text" name="attr_class" value="fighter" >   // leave every bit value="" if yous don't want the user to demand to delete the default value <input blazon="number" name="attr_healthpoints" value="10" > <input type="number" proper noun="attr_healthpoints_max" value="10" > <textarea name="attr_notes" value=""></textarea> <input type="range" name="attr_hp" min="0" max="10" value="10">  // max value can't exist edited past user        

If you desire the field to use the max of an attribute instead of the normal value, you lot can append _max to the name of the field, e.1000. <input type="number" name="attr_healthpoints_max" /> represents the max value for <input type="number" proper noun="attr_healthpoints" value="x" >.

You can also apply a <span>-element to brandish a read-only attribute on your sheet, e.g. < span name="attr_strength_mod"></ span>.

It is possible to utilise a <span>-element to show the aforementioned value as an exiting attribute <input>-element with the same proper name. Updating the value in the <input>-element will update the displayed value of the <span>-element. (For a <span>-attribute to prove properly, information technology needs to be saved on the sheet in some form, either with a normal input or a <input type="hidden">

Default Values

Yous tin can optionally include a value-aspect on whatever input text/number chemical element, which volition define the default value for the field.

For instance, the following would ascertain an "AC" field with a default value of "0". If no default value is specified, it is an empty string ("").

<input type="number" proper name="attr_AC" value="0" />        

type="text"

For storing text on the sail. Also good for any input that is used for a mix of numbers and characters.

• <input blazon="text"> MDN Web Docs

<input type="text" name="attr_class" value="fighter" >        

Character Name

When making an <input type="text"> for the character name, it'south adviced to apply attr_character_name every bit it's proper noun attribute, as this volition automatically link/update with the name displayed on the N Journal's graphic symbol proper noun.

<input blazon="text" proper noun="attr_character_name" />        

type="number"

By default, small upwardly/down arrows are displayed at the end of the field when information technology's selected, that can be used to increment/decrease it's value past increments of ane. By default the number field prefers whole integers, and on hover might complain if there is decimal numbers in that location. By default, there appears up-downward arrows on the input when it's selected.

To allow decimals in the field, add step="whatsoever" to the input.

• stride: defines in what increments the input is increase/decrease, and what numbers information technology allows. When not divers, it's default is "1". Ex. step="0.2"more info
• min, max: tin can be used to ascertain the minimum and maximum values allowed in the field. Ex. min="0" max="10" more info

<input type="number" name="attr_hp" step="whatever" value="10" min="0" max="20" />        

Auto-Calculating Values

Chief Page: Auto-Calc

Y'all can include a formula in the default value for the field, and specify either disabled="truthful" or readonly for the input. If yous do then, the sail will brandish the result of the formula instead of the formula itself.

For example, this would create a StrMod-attribute, which shows half the Forcefulness value.

<input type="number" proper name="attr_StrMod" value="(@{Strength}/2)" disabled="true" />        

Auto-Calc a more simple method than using sheetworkers, simply have several drawbacks. Most sheet authors recommend against using auto-calc in anything merely the nearly uncomplicated sheets, and in stead use sheetworkers.

These machine-computing attributes can be used in Canvas Rolls, Macros, and Abilities every bit normal.

blazon="hidden"

Using <input type="hidden"> can be useful to salvage hidden variables on the character sheet, that the user doesn't need to see. It will save the value of the input, but won't be shown on the character sheet in any way, making it easier to user than having to hibernate the input with CSS.

Example:

<input type="hidden" value="ten" name="attr_str_mod" value="0" />        

Usercases for type="hidden":

• Sheetworkers brand good use of them to calculate & save various info and secondary stats sheet users don't need to come across
• storing the value of an read-simply attribute displayed with a <span>
• Advanced Grapheme Canvas Translation options
• A number of CSS Wizardry examples

type="range"

input range -MDN docs – Style Input range

<input type="range"> can be used for displaying a progress bar, just doesn't work for information technology's intended. See Custom Progress Bar for examples.

Dragging the range's "thumb" to other values doesn't update the actual value saved on the char canvas, so it only works as a display.

<input blazon="range" name="attr_hp" min="0" "max="10" value="10"> <input type="number" name="attr_hp"> <span name="attr_hp"></span>        

The <select>-chemical element can exist used to salve info a pre-determined list of options the user tin can access from a dropdown menu, which are split into separate <option>-elements. The multiple-tag for <select> doesn't seem to work in Roll20.^{forum post (Forum)}

• <select> on MDN
• <option> on MDN
• <optgroup> on MDN

Example:

<select name="attr_woundlevel">   <option value="0" selected="selected">Good for you</choice>   <selection value="i">Stunned</option>   <option value="1">Wounded</option>   <pick value="2">Wounded Twice</choice>   <option value="v">Incapacitated</option>   <choice value="10">Mortally Wounded</option> </select>        

To choose which option is selected by default, include the selected="selected" like in the example.

Optgroup

You can apply <optgroup> to group selections in your <select>-chemical element. Case of optgroup - Complimentary Spacer sheet

<select name="attr_selectedsheet">   <optgroup label="Histrion">     <selection value="1" selected>PC</option>     <pick value="2">Ship</selection>   </optgroup>   <optgroup label="Gamemaster">     <selection value="3">NPC</option>     <option value="4">Monster</option>   </optgroup> </select>        

Checkboxes and Radio Buttons

For checkboxes and radio buttons, you must always specify a value-attribute.

For checkboxes, if the box is checked the attribute will be prepare to the value of the checkbox. The value can exist annihilation, and doesn't have to be defined as "1" or "yes". If it is not checked, the value for that attribute is "0".

If you would like a checkbox to be checked past default, or choose what radio push button is selected as default, add the checked-attribute to the input(checked="truthful" as well works).

• <input blazon="checkbox"> on MDN
• <input type="radio"> on MDN

Case:

<input type="checkbox" name="attr_HasShield" value="1" checked >        

For radio inputs, if one of them is selected, the attribute will be set to the value of that radio input. If no radio input is selected, the value will be an empty string. It's recommended that of the radio inputs should have the checked aspect to prepare a default value. Radio inputs are the only type of field where information technology is meant to take more and then one field with the same name-attribute, as they are meant to be linked.

Example:

<input blazon="radio" value="10" name="attr_Multiplier" > <input blazon="radio" value="25" proper name="attr_Multiplier" checked>        

Meet also the CSS Wizardry page for some clever uses for checkboxes and radio inputs, or how to change their looks.

Static Info

General text, such as names & labels for unlike fields & other info can be displayed with by and large any of the mutual HTML tags. The default looks of most tags varies a bit, merely can be be changed with CSS when wanted.

Example:

<h2>Stats</h2> <span>Character Name:</span> <input type="text" proper name="attr_character_name" />        

• <h1> - <h5>: Good for department titles
• <bridge>, <p>: Good for a cake of text, doesn't have much formatting
• <label>: Practiced for labelling input fields. Is by default bold font and leaves extra infinite under itself
• <div>: Generally best tag for structuring the sheet. Contains no styling, can exist used for text.

Canvas Rolls and Gyre Buttons

Main Commodity: Button

Yous can include pre-divers rolls on your sheet. This is a great way to add the rolls that volition be needed by the thespian when using the standard rolls in the game system.

For instance, you may want to add together a "Roll Check" button next to each skill on the sail. To ascertain a gyre button, use the <push button> tag. The type-attribute is prepare to "ringlet". The coil itself is divers in the value-aspect. Y'all tin can too add a name attribute which allows the roll to exist referenced in external Macros, Abilities or the Chat. The name needs to accept the roll_-prefix to work.

Case of a "Barefaced check" curl push:

<button blazon="coil" value="/roll 1d20 + @{Bluff}" proper noun="roll_BluffCheck"></button>        

Referencing attributes/fields on the canvass is done with the @{AttributeName} syntax. You lot could too and so roll that example in other Macros or Abilities using %{BoB|BluffCheck}.

Notation: The names you give your roll buttons must be unique from any Ability or other ringlet button on your characters, if you lot want to reference them in Abilities or Macros. If a graphic symbol canvass have several curl buttons with identical names but different values, calling the ringlet button name will prompt the last entry in the canvas's HTML.

Meet likewise:

• Complete Guide to Macros & Rolls - Definitive guide for constructing whatever kind of macros, for full general utilise, or for gyre buttons
  • Initiative Whorl
  • Curlicue Queries - How to use Roll Queries in your buttons
  • Dice Reference - The Roll20 dice/math syntax
  • Select Attributes for Canvas Roll - An avant-garde technique for a dynamic roll button

Repeating Sections

Sometimes you may have a type of object where at that place may be 1 or more of them, and it'south not known ahead of fourth dimension how many in that location are. A good instance of this is the Skills list for a Character in Official Savage Worlds. Roll20's sheets allow you to define a template for each item in the department, and the player can then add equally many of these in the listing equally they need.
Case:

<h3>Skills</h3> <fieldset class="repeating_skills">   <button type="roll" "name="roll_skill" value="/em uses @{skillname}, and rolls [[@{dtype}]]"></button>   <input type="text" name="attr_skillname" value="">   <select name="attr_dtype" class="dtype">      <option value="d4">d4</option>     <selection value="d6">d6</option>     <option value="d8">d8</option>     <option value="d10">d10</option>     <option value="d12">d12</option>   </select> </fieldset>        

A more than detailed explanation of repeating sections including styling, naming restrictions, sheetworkers counting rows and filtering can be constitute on Styling Repeating Sections.

In many cases, things inside a Repeating Section behaves differently than if you'd create the aforementioned thing in a normal part of the sail, then adjustments to CSS & sheetworkers is very likely needed to get the same behaviour.

The naming restrictions volition exist of particular involvement as uppercase characters can cause issues with draggable buttons.

Layout

Main Article: Designing Grapheme Sheet Layout

Many canvass authors recommend using your own CSS for styling and to layout the sheet using CSS Flexbox and/or CSS Grid instead of the built-in cavalcade/rows choice, or HTML tables.

Roll20 don't accept new sail submissions that rely on HTML tables for design(Minimum Requirements -Canvass Code), so you shouldn't exist using <table> if you want your sail published in the dropdown. There are old sheets in the repo using them, just they where created earlier this rule against <table> was made.

Roll20 provides a few basic classes you lot can use to organize things into a unproblematic column-based layout. To use them, just create a div with a class of 3colrow, 2colrow, or row. Then inside of that div, create a div for each column with a class of col. For example, to create a three-column layout, you would could:

<div class='3colrow'>   <div form='col'>     <!-- Put the content for the get-go column here -->   </div>   <div class='col'>     <!-- 2d cavalcade -->   </div>   <div grade='col'>     <!-- Third cavalcade -->   </div> </div>        

Images

You tin have static images on your character sail, such every bit placing the logo for the game at the top or having an prototype in the background to make the sheet look nicer overall. To show an epitome on a grapheme sheet, you need to refer to the verbal URL of where information technology'due south located on the internet.

If y'all're creating a character canvass that will exist added to Roll20 for everybody'southward use, it's highly recommended to upload the images to GitHub along with the sheet code, and then the image is secure and doesn't risk disappearing like is possible with free image hosting sources or directly linking to some website.

New Oct. 2021: You can now also testify a character's Avatar & Token on the sheet.

• Details: Sheet Images - Avatar & Token

Logo Example:

<img src="https://raw.githubusercontent.com/Roll20/roll20-grapheme-sheets/main/kitchensink/logo.png" />        

img {   max-elevation: 100px; }        

In Roll20's kitchensink character canvas template, the image source is directly linked to the version existing in Roll20's Github and works because the image exists in that exact place. The epitome'due south size is divers in the .css-file to exist max 100px height, otherwise it would have retained it's original size.

Background Example:

.charsheet {   background-image: url(https://cdn.pixabay.com/photo/2015/09/29/15/12/stars-964022_960_720.png); /*blackness space with tiny white stars*/   background-color: black;   background-repeat: repeat;   color: white; }        

The Star Wars D6-character canvas displays in the background an black image with tiny white stars. By defining background-echo: repeat;, the epitome repeats as a blueprint in the background if it doesn't comprehend the unabridged character sheet. The background-color: black; is a fill-in in instance the image stops working, keeping the sheet background near identical without causing readability issues. colour: white; sets the default text color of the sheet every bit white, which is much more than readable against the black background.

CSS

Primary Commodity: CSS Wizardry

You tin & should use custom CSS to fashion the manner that your sheet looks to players. You can utilize nearly any CSS styling that you desire, including groundwork images, colors, font sizes, tabs, etc.

CSS Quirks in Roll20:

• On a Legacy sheet, all class-names in the CSS file must take a sail--prefix in their proper name, or Roll20 won't recognize the classes. In the HTML file, this prefix is not needed. This is no longer a requirement in CSE.
• All of your CSS styles volition exist restricted to the .charsheet parent class. And then if you put a way chosen input, the system volition automatically prefix that with .charsheet input. This shouldn't affect you in general, merely information technology prevents you lot from changing any of the Roll20 application CSS outside of the graphic symbol sheets.
• Note that past default, whatever HTML classes defined in your HTML layout which don't begin with attr_, roll_ or repeating_ will be prefixed with sheet- on Legacy sheets. So for example, if you want to style some of your input tags to be shorter than others and you ascertain the HTML every bit <input class='shortfield'>, when processing your layout it will exist changed to <input class='sheet-shortfield'>.

See Also: Character Canvas templates

Tabs

Master Article: Tabs on graphic symbol sheets

Many character sheets take multiple pages, which many organize into split tabs on Roll20 graphic symbol sheets. The CSS Wizardry page show two methods used past existing sheets.

Can be used for creating an "NPC" page, or to separate character sheet content on several pages it it gets too big.

Roll20 columns/rows

Main Commodity: Roll20 columns/rows

Roll20 provides a few basic classes you lot can use to organize things into a uncomplicated column-based layout. To use them, but create a div with a class of '3colrow', '2colrow', or 'row'. So inside of that div, create a div for each column with a form of 'col'.

Google Fonts

Full guide: Canvass Styling: Google Fonts

// imports the "Sigmar One" @import url('https://fonts.googleapis.com/css?family=Sigmar+Ane&display=bandy');  .charsheet span{     // sets all spans to use "Sigmar One" font.     font-family unit: 'Sigmar Ane', Arial;    //  sets "Arial"(1 of the default fonts) as a fallback font, if Sigmar-font doesn't piece of work }        

NOTE: Do Not use any fonts that contain eval in the name (e.g. MedievalSharp). That cord (fifty-fifty when in the middle of a font proper noun) causes security bug with Roll20 and the CSS volition get thrown out completely.

JavaScript

JavaScript can be utilized in two very limited ways for Roll20 Character sheets, through built in sail workers that are defined within a single <script type="text/worker">-element, or indirectly through the employ of API scripts(requires Pro subscription).

Roll20 sheetworkers & API tin make apply of the Underscore.js-library.

Canvas Workers Scripts

Main Article: Sheet Worker Scripts

Sail Worker Scripts, (aka. Sheetworkers), are an avant-garde characteristic of the Character Sheets organisation which allows the sheet author to specify JavaScript, which volition execute during certain events, such as whenever the values on a sail are modified. Information technology is highly recommended to use these in identify of Machine-Calculating Fields whenever you take values that infrequently modify, such as when a Character levels up or adds a new spell or assault.

Broadly speaking, sheetworkers can merely edit character sheet values, and not interact with DOM in whatever other way. Information technology tin can heed in and react to attributes irresolute values or activate on an Activity Push button.

Example(Ambition & Forehandedness):

<script blazon="text/worker"> const int = score => parseInt(score, 10) || 0;  const stats = ["str", "dex", "con", "wis", "int", "cha"]; stats.forEach(stat => {     on(`modify:${stat}`, () => {         getAttrs([stat], values => {             const stat_base = int(values[stat]);             //console.log(stat_base);             let stat_mod = 0;             if (stat_base >= nineteen) stat_mod = "+4";             else if (stat_base >= 18) stat_mod = "+3";             else if (stat_base >= 16) stat_mod = "+ii";             else if (stat_base >= 14) stat_mod = "+1";             else if (stat_base >= 12) stat_mod = "+0";             else if (stat_base >= eight) stat_mod = "-1";             else if (stat_base >= 6) stat_mod = "-2";             else stat_mod = "-three";                          setAttrs({                 [`${stat}_mod`]: stat_mod             });         });     }); }); </script>        

The higher up sheetworker automatically checks & updates an Attribute's(Str, Dex, Con etc.) modifier, any fourth dimension the Attributes changes values. This makes it piece of cake for the histrion as they don't need to update both the aspect & information technology'southward modifier, just the attribute, and the sheetworker does the residue. And then if the str attribute is changed to 6, str_mod is fix to be -2.

API

API scripts are something that are installed into campaign separately, which can do much more powerful and versatile things than the sheetworkers.

These are very advanced things, and to be able to apply APIs with a sheet in a game, the Game Creator demand to exist a Pro subscriber to take access to them, and then generally sheets shouldn't be designed to crave API to work.

API Scripts can check to brand sure that rules are followed, change properties on objects and tokens, and fifty-fifty provide custom chat commands. The scripts you write run across the entire game, and affect things the GM does likewise every bit all the players. Advanced scripts tin can also run independently, performing automatic deportment such equally moving a token on a patrol route or nudging players when their turn is taking too long.

Examples of API apply with character sheets:

• Creating complicated or conditional roll output that the normal macro system can't handle, or to roll die that aren't normal/numerical ones. Example: To roll Fantasy Flight Games' dice for their Star Wars or Genesys game, y'all need to use an API, every bit they use a unique dice organization.
• Editing stats based on rolls Normal macros can simply read stats grade character sheets, simply APIs can edit them. Case: you can integrate API similar Script:ChatSetAttr into buttons rolls to automatically heal characters when heath rolls are made, or to automatically subtract ammo/spellslots/arrows when they are used, or to apply the damage done on a ringlet straight to some other character
• Reading/Syncing/Editing attributes between character sheets Sheetworkers can simply edit and read stats of the character they are tied to, while API can look & edit stats for any character, enabling connections that otherwise aren't possible. Example: A sail for the party's ship could sync/read some aspect of the political party members and save them on the ship in relevant places then for instance ship manuvers fabricated past the helm could exist done from the ship sheet, every bit an API have read the captain's stats and copied them to the helm's department. Then the same take been done for the Gunner, which would arrive possible to make all the ship-related rolls that rely on character stats from the transport sheet as it syncs the relevant things with the party members.

Advanced Sheet Options

The following Advanced Sheet Options & Guides are not required for a basic character sheet, merely can exist dandy for enhancing your sheet's capability and usability. These things use more than one type lawmaking (HTML/CSS/JavaScript) so are not goruped under the core and basic HTML, CSS and JavaScript sections previously mentioned on this page.

Encounter As well: Canvass Writer Tips

Canvas Layout

Principal Article: Designing Character Sheet Layout

Many sheet authors recommend using your ain CSS for styling and layout of the sheet, mostly either CSS Grid or Flexbox. Roll20 provides a few bones classes you tin can use to organize things into a simple cavalcade-based layout.

In that location are likewise ways to have a character sheet accept several pages, two examples on how to implement tin be seen in the Tabs-section of the CSS Wizardry-article.

Whorl Templates

Main Article: Roll Templates

Coil Templates allow you to fully customize how the rolls from your sail appear in the chat window to all players. It's a groovy way to make the rolls in the chat better fit with the looks of the character canvass itself, likewise as making the roll results exist shown in more varied ways than just using /curlicue commands or the default roll template.

Translating Character Sheets

Grapheme sheets can be adapted to have translation capabilities, which makes it possible for anybody help translate the sheet to other languages, with the help of CrowdIn, if the sheet have the necessary translation tags. Character sheet authors take a number of controls over how the sheet is translated, and how the translation is displayed, even changing list order depending on language.

To update Translations for Community- or offical sheets on CrowdIn, you only need to annals and account and bring together the projects, only to aid interpret the main site, you demand to send information technology a ticket.

Default Sail Settings

Main Article: Default Sheet Settings

Selectable options can be specified in the canvas.json file provided with your Custom Character Sheet. These options provide default settings across all Characters when your Character Sheet is in use. These are only usable if the sheet is in the sail dropdown menu, as at that place are currently no method of using canvas.json with a Custom Character Sheet in the Sheet Editor

These can and then exist applied on the Game Settings-folio to utilize for character sheets created afterward the Default Settings are changed(Just attainable to the Game'south Creator), or update all existing sheets in a campaign on the yMy Settings-tab(available for any Gamemaster in the campaign).

Compendium Integration

Main Article: Compendium Integration

The Roll20 Compendium feature is a repository of information such as rules, spells, items, and monsters for select open-license gaming systems. By designating that your sheet is compatible with a Compendium, players will have direct access to that Compendium in the right sidebar during gameplay.

Other avant-garde options for Compendium Integration includes drag-and-drop & compendium buttons.

Charactermancer

Chief Commodity: Charactermancer Evolution

The Charactermancer is Roll20 system for guiding a user through a determination making process on the Virtual Tabletop. It has been implemented in the D&D 5E by Roll20, Official Roll20 Pathfinder 1E, Burn Bryte, and Call of Cthulhu character sheets, with plans for Pathfinder Second Edition & Starfinder.

Notation: Community sheets should not include character creation or advancement due to potential copyright restrictions. 'Past Roll20' sheets may include this content cheers to our partnerships with game creators. Sheets that are developed from the code of a 'By Roll20' sheet will need to ensure any character creation or advancement options code is removed. It's okay to have attributes that machine-summate based on other attributes (including the current level). We'll allow you know if your submitted sheet violates this rule.

Yet, the Charactermancer framework could as well be used for other purposes, such as creating a character sheet importer framework.

• Shadowrun 5E canvass^(Forum) uses Charamancer for character import
• Simplest Charamancer use^(Forum) - thread discussing how elementary implementations

Other

Additional advanced canvass features & ideas:

• Integrated Sheet Update Notification & Changelog
  • and so users easily discover & read canvass updates when looking at their sheet in-game
• Mobile-friendly - optimize sheet for utilise with the Mobile app
• Make sheets Impress-Friendly - if you lot want your roll20 sheet to be easy to print out for offline play
• Nighttime style
• Statblock Importer
• GM Screen

Roll20 Character Sheets Repository

The Roll20 sheet repository is a collection of all the community-contributed character sheets that are available for use on Roll20. Its intended purpose is to provide fans a style of creating organization-specific back up of games that Roll20 doesn't have an official character sheet for.

Sourcecode of many official character sheets exists in the repository, merely they are no longer updated. This is due to Roll20 have changed their workflow to keep their own sheets in a dissever (private) repository. A number of older sheets(that doesn't testify up in Roll20's sail option dropdown)as well exist in the repository.

See Beginner'southward Guide to GitHub and/or Brusque Git Guide for how to employ Git/GitHub for submitting your sheets to Roll20, or making updates for existing ones.

Minimum Requirements

"Minimum Requirements"

To ensure a consequent quality of graphic symbol sheets in the repository, all submissions must meet the minimum requirements below. Before submitting a pull request on GitHub, test your lawmaking in Roll20 using either the Sheet Editor or Sail Sandbox.

Ideally, don't submit sheets for games that already has a sheet. Preferably seek to amend the existing canvass.

"There will ideally be a single character canvas in the repository for any given game. And nosotros let a indistinguishable sheet if it is created and maintained past the Publisher [...] All the same, like any simple rule, in that location are some grey areas effectually what constitutes a "game"." - Nic B., Roll20 Team

1. Lawmaking of Conduct.

• The Roll20's Code of Conduct applies to grapheme sheets and they must adhere to it.

• Do non infringe on intellectual property. Community sheets should not include character creation or advancement due to potential copyright restrictions. 'By Roll20' sheets may include this content thanks to our partnerships with game creators. Publisher-created/backed sheets are obvious gratis to include whatever they desire. Sheets that are adult from the lawmaking of a 'By Roll20' sheet will need to ensure any graphic symbol creation or advocacy options lawmaking is removed. It's okay to have attributes that auto-calculate based on other attributes (including the current level). We'll allow you know if your submitted sheet violates this rule.

• There is one specific requirement for Character Sheets. All submissions of new pull requests for any graphic symbol sheet containing an area for "gender" will demand to make that a open text input (as opposed to a drop down menu containing a predefined list of options). This guideline is cogitating of our ongoing efforts to be inclusive in our arroyo to facilitating gaming -- we want the maximum amount of people to be able to game the style that provides them the most fun. In this case, taking the time to address this pocket-size programming modify makes a huge difference to our customs.

2. Good Code

• Practice Not use <⁠table> for sheet layout. As a general standard a <⁠tabular array> element should only be used for tabular data. The <⁠tabular array> shall non exist used for layouts. See Designing Character Sail Layout for ameliorate methods, or
  • This is the nigh mutual reason for new sheets being rejected/delayed by Roll20. In that location are old sheets in the repo using them, but they where created before this rule against <table> was fabricated.

• Minimum styling. All character sheets should have a minor amount of CSS & HTML styling to make them aesthetically pleasing and usable. For example elements should not unintentionally overlap when a window is resized. The sail should be familiar to players who are used to seeing the newspaper version of that canvass. It demand non exist identical to the paper version and should avoid violating whatever copyright, only it also shouldn't be laid out in such a crazy mode that players will accept a hard fourth dimension understanding how to use information technology. Design for ease of apply first and foremost.

• Proper HTML Syntax. Proper HTML syntax is encouraged to increase accessibility and make the code maintainable for community contributions. All new sheets are expected to use proper containers elements such as <⁠div> and <⁠bridge> elements. Your HTML file must not utilise <⁠head> or <⁠trunk> tag, or your character sail may not load in the virtual tabletop.

• Save the files with Unix line endings (LF). Required for all .css, .html/.htm, and .json files. A Google search tin tell you how to set this upwards in your favorite text editor, so it'due south automated.

• Every submission must include a valid sheet.json-file and a preview paradigm. Directions for creating a proper sheet.json can exist found on the GitHub README.

• Chrome & Firefox Uniform. The two official supported browsers of Roll20 are Chrome & Firefox. All graphic symbol sheets need to be tested for functionality and styling in these 2 browsers.

3. A Satisfactory Experience

• Character Sheets must be standalone by default. All basic canvas functionality must exist usable without external requirements such as images or fonts hosted exterior Roll20, or companion API Scripts. API companions are a welcome supplement for graphic symbol sheets, but to ensure accessibility & functionality to community members at all of subscription levels the sail must exist usable past default without outside requirements.

• Functional Roll Buttons. The best sheets not only keep rails of character stats, they take the most mutual rolls for the game organisation embedded in them. This makes it much easier for new players to play the game past adding intuitive functionality. While you don't have to include every roll in the whole organisation, including frequently used rolls where appropriate can elevate your sheet to the next level. Games that exercise non have rolls such equally Bister Diceless Roleplaying Game are not required to meet this standard. If you are designing a canvass for a system where this requirement does not employ, please address this in your pull request.

• Inputs & Textfields for data tracking. Character sheets for game systems which take attributes and stats should include <input> elements for users to keep track of their data. Whenever possible, use standard names for attributes, spelled out. For example, "intelligence", "force", and "wisdom". This is of import then that if a character is imported into a game with a different sheet, most of the values will be able to transition. If the aspect names are all different, then nothing can be imported. Your best bet is to await at existing sheets for that organization and whenever possible use the same attribute names that are already in utilize. Similarly <textarea> tags should exist included were applicative for users to add notes or descriptions. This requirement is highly variable based on the organisation and if this requirement is not applicable to the game system you are creating a canvass for please include a comment in your pull request.

• Rules must exist readily bachelor. Sheets tin even exist submitted for independent games and homebrew systems. Homebrew games will need to ensure they are non violating copyright for their respective game organization. In both cases the rules need to be readily bachelor online to the public (i.eastward. if you practice a web search for the name of the game, you should be able to find free or paid versions of the rules in some form). Yet unreleased games that have public beta or quickstart rules available are fine.

Across the Minimum

The suggestions below are not required of new character sheets requesting to be added to the repository. Aspiring sheet authors new to front end-end development should focus on meeting the minimum requirements for their canvass's version one. When you lot are comfy with the basics, the suggestions beneath can have the sheet 1 step further to shine every bit beacons of high quality fun.

• CSS Wizardry. Our community of sheet authors are exceptionally clever and artistic. They offer here case of ways to leverage the character sheet system.

• Customized Roll Templates. Whorl templates can be customized to match the color scheme & style of your character sheet. Additionally they can exist utilized to help users achieve a scroll output that matches the game organisation's specific mechanics.

• Sheet Workers are a powerful tool!. These scripts are an advanced characteristic of the Graphic symbol Sheets organisation which allows the sheet writer to specify JavaScript to execute during certain events, such as whenever the values on an input are modified.

• Character Canvass Translation/internationalization (i18n), will allow you to blueprint your character sheet in such a way that our community of translators volition be able to translate your sheet into their language, making that language available to anyone on Roll20. Equally of September 2016, we will no longer be accepting new character sheets that are merely alternate translations of already-existing grapheme sheets.

• Default Sheet Settings. Selectable options can be specified in the sheet.json-file provided with your Custom Character Sheet. These options provide default settings across all Characters when your Character Canvas is in use, making it easier for the GM to make adjustments on what base settings sheets have when created.

• Compendium Integration. By designating that your canvas is compatible with a Compendium, players will have direct access to that Compendium in the right sidebar during gameplay. i Compendium are still a growing characteristic on Roll20 and integration is not notwithstanding available to the majority of game systems.

• Include attribute names in Titles. Adding title=@{attribute_name} helps macro creators find the name of attributes easier. Titles are occasionally used for other purposes so use your best judgment. See Using REGEX for an instance.

• Link to a wiki page(or a Readme-file in the GitHub repo ) If you have created a wiki page for your sheet, you could link to information technology in the sheet.json'south instructions-section using Markdown.
  • (E.g. "instructions": "This is a basic character sheet for Stargate RPG by Wyvern Gaming. See [Stargate RPG](https://wiki.roll20.cyberspace/Stargate) for more info on how to employ the sheet.")

Patreon and Tipeee Linking Rules for Community Sheet Contributors

For sheet authors that are contributing to the Roll20 customs grapheme canvass repository, they are approved to advertise via subscription/donation service sites: Patreon and Tipeee. Roll20 is not responsible for any payment transactions and cannot enforce any individual arrangements.

In gild to qualify, a sheet author must first take their sheet contribution canonical by the Roll20 staff and included into the community character Canvas repository.

Y'all will want to include your Patreon or Tipeee account information in the sheet.json file that should be included with your sheet submission on GitHub.

The json file should take 1 of these fields added to it if y'all wish to annunciate with Patreon or Tipeee:

patreon: Place the URL for a Patreon campaign here, and information technology will announced under your sheet's description when selected. (due east.g."https://www.patreon.com/<name>")

tipeee: Place the URL for a Tipeee hither, and it will announced under your sheet's description when selected. (east.g. "https://www.tipeee.com/<name>")

For more information, come across github.com/Roll20/roll20-character-sheets#contributing

Linking to Patreon/Tipeee on the Roll20 Forums

Linking to Patreon or Tipeee on the Roll20 Forums are only permitted for pre-approved community members who have contributing either Graphic symbol Sheets or API Scripts. If you lot wish to solicit users direct for funding you lot may do so privately, only no such links are permitted in a public forum without any contributed material.

Best Practices

These are general best do guidelines to aid increment consistency among sheet authors, in club to make more maintainable lawmaking repository for the community. Some of these are generic, while others are specific to how the Roll20 Character Sail Framework functions.

Attributes/Inputs

• Attribute names should be lowercase. For the sake of consistency & to avert some quirks related to sheetworkers, it's best to always give lowercase aspect names, such as

• RPGs have weird words. Utilize spellcheck="imitation" for text inputs and textareas to prevent the browser from indicating spell errors.

• Use fewer Attributes & Inputs. The more attributes and inputs y'all have the slower the canvass volition load. This is not a business organization for the average sheet simply robust sheets such as the D&D 5E Sheet past Roll20- or the Pathfinder (Community)-sheets large amount of attributes & inputs can lead to performance issues if left unmanaged. If sheetworkers need to process many attributes often, or the game relies on characters having many entires in Repeating Sections, it might bear on performance.

• Spans over disabled inputs. Aspect-backed spans are more efficient than disabled inputs.

Sheetworkers & Roll Templates

• Avert Asynchronous cascades. Whenever possible avert asynchronous cascades for sheet workers. An instance of this is, getAttrs -> calculations -> setAttrs -> getAttrs -> calculations -> setAttrs… A better fashion to do this is getAttrs for everything you'll demand and then practice all necessarily calculations before finally using a single setAttrs.

• Use Sheetworkers over Auto Calculated attributes. Sheetworkers only trigger when events happen ,which improves performance for character sheets over automobile calculated attributes since these events occur less frequently.

• Place Roll Templates and sheetworker code at bottom of the html page Information technology's considered all-time exercise to place JavaScript at end of pages. This also means the rolltemplates won't mess with the Preview Pane if y'all're using the Sheet Editor.

Other Roll20-specific

• Avoid !important. Whenever possible attempt to avoid using !important in CSS as it can create a cascading effect of needing to utilize ever more !of import to set up things.

• (Applies to Legacy Sail, non CSE)Don't include sheet- for CSS Grade names in the HTML. canvas- is automatically added to the CSS classes in the HTML, so information technology's redundant to repeat it there. Leaving it out also increases readability if lots of classes are used.
  • For example in the HTML, instead of class="sail-strRow", just do class="strRow".
  • Alert: the to a higher place is untrue for classes of <rolltemplate> elements. For those, y'all do need to specify the full class name (i.e. starting with canvas-) or your rolltemplates volition simply stop working.

• Include a minimum width. Including a minimum width on the canvass volition assistance with resizing. Endeavour to not exceed the default width when a sheet opens for the starting time time, approximately 800px-900px. Graphic symbol sheets with an NPC view may exist smaller and elaborate PC sheets are sometimes bigger.

• Utilise Supported Fonts. Either use the five named fonts (Arial, Patrick Hand, Contrail One, Shadows Into Lite, and Candal), or Google Fonts. Roll20 likewise comes with some Icon Fonts, and information technology's possible to us Google'south Textile Icons.

• Use ^{ } for translations in button macros. In your push macros using ^{key} volition insert the appropriate key from the appropriate language's translation.json. This makes roll templates more adjustable to other languages, and avoid hardcoding

Sail Templates/Examples

• Roll20'south "kitchensink" - Roll20's template (fairly former)
• SPConlin/Roll20_Sheet_Template
• Anduh/Roll20-filigree-template - simple sheet layout using CSS Grid, past Andreas J.
• clevett/SheetTemplate - sheet skeleton that uses PUG & SCSS, not recommended for beginners - by Cassie
• Blades-template - by Jakob - based on Blades in the Nighttime-sheet
• aureyia/roll20-character-sheet-boilerplate - Uses PUG, Stylus(CSS) & Gulp

Pattern Libraries

• Grand-Scaffold - past Scott C.
  • Examples & Demo^(Forum)
  • Canvass Writer'south Journeying - a sail dev tutorial using K-Scaffold
• Roll20 Snippets - Char sheet & API code snippets - maintained by Scott C.
• Roll20Async - framework to back up for asynchronous code in Roll20 Sheetworkers
• The Aaron Sheet - A facade for Canvass Worker Tasks and Utility Functions, including stylized panel.log messaging.
• RepeatingSum - sheetworker snippets to make it elementary to sum upwards info on repeating sections
• Cassie's pattern library - various HTML/CSS/JS snippets & pattern patterns. Feb 2020, LCS

• Roll20 Canvas Dev (VS Code Extension) - contains some lawmaking snippets for common roll20 sheet components - by Andreas J.

• Character Sheet Development/Tutorial
• Sail Author Tips - Misc. Sheet Author tips
• Sheet Sandbox – the better editor to use when you code your character sheets
• List of Grapheme Sail Requests (that don't yet exist on Roll20)
• Character Sheet Index - Listing of Character Sheets on Roll20 (not ever upwardly to date)
• Accessibility (a11y)
• Git/GitHub
  • Beginner'due south Guide to GitHub(Roll20)
  • Short Git Guide - A guide to using the control line version of Git to work on your computer, instead of GitHub Desktop
• Andreas Guide to Canvass Development
• List of all pages related to "Character Canvas Creation"
• Complete Guide to Macros & Rolls
  • Dice Reference - how the Roll20 dice/math works
  • Macros
  • Reusing Rolls
  • Conversation Menus

Run into Too

• Roll20 Forums - Character Sheets & Compendiums^(Forum) - Best identify for discussing Sheets with other Sheet Creators, and to become current info
• Unofficial Roll20 Discord - The Discord server have two channels for discussing Character Canvass Creation, and many active Sheet Authors are present.
• Roll20 Community Character Sheet repo - source-code of all Roll20 Community character sheets, besides equally old lawmaking for some sheets made past Roll20
• SublimeSettings - Roll20-specific HTML Syntax highlight for Sublime Text
• ACSI - Automation for adding translation attributes/tags to a sail
• Building Char Sheets - Almost always outdated/lacking compared to whatsoever pages on canvass development on the wiki

Guides

General Web development Guides

• Introduction to HTML
• Introduction to CSS
  • CSS Diner learn to use CSS Selectors
• Introduction to JavaScript
  • executeprogram.com - Acquire JavaScript

Forums Threads

Insightful stuff

• Whatsoever Scientific discipline Behind Sheet Performance? March 20222

torresmearge.blogspot.com

Source: https://wiki.roll20.net/Create_character_sheet

Share this post