How To Add Html Character Sheet On Roll20

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. You can use most of the basic HTML elements, such equally p, div, span, textarea, input, select, img as normal, while some, such as <button> works noticeably differently.

Graphic symbol Sheet Development
Getting Started

Using Custom Sheets
Building Sheets
(Master Page)
Code Restrictions
All-time Practice
Common Mistakes
Tutorials
Examples, Templates
Pattern Libraries
HTML & storing information
CSS & Styling
- Sail Layout
- Images Use
- Fonts & Icons
- Dark Mode(NEW)
- Mobile

General

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

Reference

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

Tools & Tips

Sheet Sandbox
Canvas Editor
Sheet Author Tips

Git/GitHub

Sheet Repository
Guide to GitHub
- Short Git Guide
Submission Guidelines

Other

Canvas Authors
Character Sail Alphabetize
Sheet Requests
Character Sheet^(Forum)
About:Sheet Dev Documentation

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

See Building Character Sheets#Restrictions for how Roll20 differs in how HTML tin can be used.

one Storing User Data
- 1.1 Text & Numbers
  - 1.one.1 Default Values
  - one.1.2 blazon="text"
    - one.1.2.ane Character Name
  - 1.1.3 type="number"
    - 1.1.3.1 Auto-Calculating Values
  - 1.1.iv type="hidden"
- 1.2 type="range"
- 1.3 Dropdown carte du jour
- 1.4 Checkboxes and Radio Buttons
2 Static Info
3 Sheet Rolls and Roll Buttons
4 Repeating Sections
v Layout
vi Images
seven See Also

Storing User Data

Most HTML-elements used for storing user input can be used in Roll20 sail, with an notable stardom. For each chemical 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 character. This must besides be washed for values & attributes that the user can't edit, for that data to be usable in calculations or similar. All these attributes( except from repeating sections) will show upwardly in the Attributes & Abilities-tab on the character canvass, after having been edited for the get-go time.

Text & Numbers

To create a field for saving text or numbers entered past the user, the post-obit elements tin be used:

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

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

Example:

<input blazon="text" name="attr_class" value="fighter" >   // leave as value="" if you don't want the user to need to delete the default value <input blazon="number" name="attr_healthpoints" value="10" > <input type="number" name="attr_healthpoints_max" value="10" > <textarea proper name="attr_notes" value=""></textarea> <input type="range" name="attr_hp" min="0" max="ten" value="ten">  // max value can't be edited by user

If you want the field to utilize the max of an attribute instead of the normal value, you tin append _max to the name of the field, e.one thousand. <input type="number" name="attr_healthpoints_max" /> represents the max value for <input blazon="number" name="attr_healthpoints" value="ten" >.

You can also employ a <bridge>-element to display a read-just attribute on your sheet, due east.g. < bridge proper noun="attr_strength_mod"></ span>.

It is possible to use a <bridge>-element to show the aforementioned value equally an exiting attribute <input>-element with the aforementioned proper noun. Updating the value in the <input>-element will update the displayed value of the <span>-chemical element. (For a <span>-attribute to show properly, it needs to exist saved on the sheet in some form, either with a normal input or a <input blazon="subconscious">

Default Values

Y'all tin can optionally include a value-aspect on whatever input text/number element, which will define the default value for the field.

For example, the post-obit would define an "AC" field with a default value of "0". If no default value is specified, it is an empty cord ("").

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

type="text"

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

<input type="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's adviced to use attr_character_name as it's name attribute, as this will automatically link/update with the name displayed on the N Journal'due south graphic symbol name.

<input type="text" name="attr_character_name" />

type="number"

By default, small upwards/down arrows are displayed at the end of the field when information technology'southward selected, that tin can be used to increase/subtract information technology's value by increments of one. By default the number field prefers whole integers, and on hover might mutter if at that place is decimal numbers there. By default, there appears up-down arrows on the input when information technology's selected.

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

stride: defines in what increments the input is increase/subtract, and what numbers it allows. When non defined, it's default is "1". Ex. footstep="0.2"more than info
min, max: tin be used to define the minimum and maximum values allowed in the field. Ex. min="0" max="x" more than info

<input type="number" name="attr_hp" footstep="any" value="10" min="0" max="twenty" />

Auto-Calculating Values

Main Folio: Auto-Calc

You can include a formula in the default value for the field, and specify either disabled="true" or readonly for the input. If you lot do so, the sail will brandish the result of the formula instead of the formula itself.

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

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

Car-Calc a more simple method than using sheetworkers, but have several drawbacks. Near sheet authors recommend against using auto-calc in anything but the virtually simple sheets, and in stead use sheetworkers.

These auto-computing attributes can be used in Sheet Rolls, Macros, and Abilities as normal.

blazon="subconscious"

Using <input type="subconscious"> can exist useful to save subconscious variables on the grapheme sail, that the user doesn't need to come across. Information technology will save the value of the input, but won't be shown on the graphic symbol sheet in any way, making it easier to user than having to hide the input with CSS.

Case:

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

Usercases for blazon="hidden":

Sheetworkers make good use of them to calculate & salvage various info and secondary stats sail users don't demand to see
storing the value of an read-only attribute displayed with a <span>
Advanced Character Canvas Translation options
A number of CSS Wizardry examples

blazon="range"

input range -MDN docs – Style Input range

<input type="range"> can be used for displaying a progress bar, only doesn't work for it's intended. Run into Custom Progress Bar for examples.

Dragging the range'due south "thumb" to other values doesn't update the actual value saved on the char canvas, then information technology just works as a brandish.

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

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

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

Case:

<select proper noun="attr_woundlevel">   <option value="0" selected="selected">Salubrious</option>   <option value="1">Stunned</option>   <option value="1">Wounded</option>   <option value="2">Wounded Twice</selection>   <choice value="five">Incapacitated</option>   <pick value="ten">Mortally Wounded</option> </select>

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

Optgroup

You can utilise <optgroup> to group selections in your <select>-element. Example of optgroup - Free Spacer sail

<select proper name="attr_selectedsheet">   <optgroup label="Player">     <option value="one" selected>PC</option>     <option value="ii">Ship</option>   </optgroup>   <optgroup label="Gamemaster">     <option value="3">NPC</choice>     <option value="iv">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 exist gear up to the value of the checkbox. The value tin be anything, and doesn't have to exist defined equally "1" or "yes". If it is not checked, the value for that aspect is "0".

If you would like a checkbox to be checked by default, or choose what radio button is selected as default, add the checked-aspect to the input(checked="true" likewise works).

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

Example:

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

For radio inputs, if ane of them is selected, the aspect will be set to the value of that radio input. If no radio input is selected, the value volition be an empty string. It's recommended that of the radio inputs should take the checked attribute to gear up a default value. Radio inputs are the only type of field where it is meant to take more than so i field with the same name-attribute, as they are meant to be linked.

Example:

<input type="radio" value="ten" name="attr_Multiplier" > <input type="radio" value="25" name="attr_Multiplier" checked>

Meet besides the CSS Wizardry folio for some clever uses for checkboxes and radio inputs, or how to modify their looks.

Static Info

General text, such as names & labels for different fields & other info tin can be displayed with generally any of the common HTML tags. The default looks of most tags varies a scrap, but can be be changed with CSS when wanted.

Case:

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

<h1> - <h5>: Good for section titles
<bridge>, <p>: Good for a block of text, doesn't take much formatting
<label>: Good for labelling input fields. Is by default bold font and leaves extra space under itself
<div>: Generally best tag for structuring the sheet. Contains no styling, can be used for text.

Sheet Rolls and Roll Buttons

Primary Commodity: Button

You lot can include pre-divers rolls on your canvas. This is a dandy way to add the rolls that will be needed by the histrion when using the standard rolls in the game organization.

For instance, you may want to add a "Gyre Cheque" button next to each skill on the canvass. To define a coil button, use the <button> tag. The type-attribute is set to "roll". The curl itself is defined in the value-attribute. You tin also add together a name attribute which allows the ringlet to be referenced in external Macros, Abilities or the Conversation. The name needs to have the roll_-prefix to piece of work.

Instance of a "Bluff cheque" curl button:

<button type="coil" value="/scroll 1d20 + @{Bluff}" name="roll_BluffCheck"></button>

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

Note: The names yous give your roll buttons must be unique from any Ability or other curl button on your characters, if you want to reference them in Abilities or Macros. If a character sheet have several roll buttons with identical names but unlike values, calling the roll button name will prompt the last entry in the sheet's HTML.

See also:

Complete Guide to Macros & Rolls - Definitive guide for constructing whatever kind of macros, for general use, or for gyre buttons
- Initiative Scroll
- Roll Queries - How to use Roll Queries in your buttons
- Dice Reference - The Roll20 dice/math syntax
- Select Attributes for Sheet Scroll - An advanced technique for a dynamic roll button

Repeating Sections

Sometimes you may accept a type of object where at that place may be one or more than of them, and it's not known ahead of fourth dimension how many there are. A skillful example of this is the Skills listing for a Grapheme in Official Vicious Worlds. Roll20's sheets let you lot to define a template for each item in the department, and the player can so add as many of these in the list as they need.
Example:

<h3>Skills</h3> <fieldset form="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" grade="dtype">      <pick value="d4">d4</option>     <pick value="d6">d6</option>     <pick value="d8">d8</selection>     <selection value="d10">d10</option>     <option value="d12">d12</option>   </select> </fieldset>

A more detailed caption of repeating sections including styling, naming restrictions, sheetworkers counting rows and filtering tin exist constitute on Styling Repeating Sections.

In many cases, things inside a Repeating Department behaves differently than if yous'd create the same matter in a normal part of the sail, so adjustments to CSS & sheetworkers is very likely needed to get the same behaviour.

The naming restrictions will be of item interest as uppercase characters can crusade issues with draggable buttons.

Layout

Main Article: Designing Character Sheet Layout

Many canvas authors recommend using your ain CSS for styling and to layout the sheet using CSS Flexbox and/or CSS Grid instead of the built-in column/rows pick, or HTML tables.

Roll20 don't accept new canvas submissions that rely on HTML tables for blueprint(Minimum Requirements -Sheet Code), and then you shouldn't exist using <table> if you want your sail published in the dropdown. In that location are old sheets in the repo using them, but they where created before this rule against <table> was made.

Roll20 provides a few bones classes you can use to organize things into a simple column-based layout. To use them, only 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 3-cavalcade layout, y'all would could:

<div class='3colrow'>   <div class='col'>     <!-- Put the content for the first column here -->   </div>   <div form='col'>     <!-- Second column -->   </div>   <div grade='col'>     <!-- 3rd column -->   </div> </div>

Images

You can have static images on your character sheet, such equally placing the logo for the game at the top or having an image in the background to make the sail look nicer overall. To show an image on a character sheet, you need to refer to the exact URL of where it'southward located on the internet.

If you're creating a character canvas that will exist added to Roll20 for everybody's utilize, it'south highly recommended to upload the images to GitHub along with the sheet code, so the prototype is secure and doesn't hazard disappearing like is possible with gratuitous epitome hosting sources or directly linking to some website.

New October. 2021: You can now also show a character's Avatar & Token on the sail.

Details: Canvass Images - Avatar & Token

Logo Example:

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

img {   max-height: 100px; }

In Roll20's kitchensink character sheet template, the paradigm source is directly linked to the version existing in Roll20's Github and works because the image exists in that exact place. The image'south size is defined in the .css-file to be max 100px height, otherwise information technology would accept retained it'south original size.

Groundwork Example:

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

The Star Wars D6-graphic symbol sail displays in the background an black image with tiny white stars. By defining background-repeat: repeat;, the prototype repeats every bit a pattern in the groundwork if it doesn't cover the entire character sheet. The background-color: black; is a backup in instance the prototype stops working, keeping the sheet background near identical without causing readability bug. colour: white; sets the default text color of the sheet as white, which is much more readable against the blackness groundwork.

Come across Besides

Canvas Examples
Building Character Sheets#Restrictions
Graphic symbol Sheet Evolution/CSS
- Designing Graphic symbol Sheet Layout
- Image use in character sheets
Sheet Author Tips
Graphic symbol Sail Repository‎