Difference between revisions of "Legacy Sheet Sanitization"
From Roll20 Wiki
Andreas J. (Talk | contribs) m |
Andreas J. (Talk | contribs) m (→Migrating from LCS to CSE) |
||
(5 intermediate revisions by one user not shown) | |||
Line 1: | Line 1: | ||
− | <noinclude>{{revdate}}{{ | + | <noinclude>{{revdate}}{{BCS}} |
− | + | ||
{{stub}} | {{stub}} | ||
− | '''Legacy Sheet Sanitization''' ( or '''LCS''', ''Legacy Character Sheets'') refers to the older and more restricted method used for creating custom character sheets that was the only mode for sheets until March 2021 when [[CSE]] was revealed.{{source|https://app.roll20.net/forum/permalink/9883156/ | + | |
+ | {{NavSheetDoc}}'''Legacy Sheet Sanitization''' ( or '''LCS''', ''Legacy Character Sheets'') refers to the older and more restricted framework/method used for creating custom character sheets that was the only mode for sheets until March 2021 when [[CSE]] was revealed.{{source|https://app.roll20.net/forum/permalink/9883156/}} | ||
Line 13: | Line 13: | ||
If you copy the source code of a Legacy sheet and save it either using the [[Sheet Editor]], you need to check the box for "legacy sanitation", otherwise the editor assumes you have [[CSE]]-compatible code. | If you copy the source code of a Legacy sheet and save it either using the [[Sheet Editor]], you need to check the box for "legacy sanitation", otherwise the editor assumes you have [[CSE]]-compatible code. | ||
− | [[File:Legacy-Sanitization-checkbox.png| | + | [[File:Legacy-Sanitization-checkbox.png|nail|550px|left|Check the box if you want to use (older) [[LCS|legacy code]].]] |
Using the [[Sheet Sandbox]], you need to add a [[sheet.json]]-file that includes the <code>"legacy":true</code> line. See more on [[Sheet_Sandbox#Sheet.json_Editor]] | Using the [[Sheet Sandbox]], you need to add a [[sheet.json]]-file that includes the <code>"legacy":true</code> line. See more on [[Sheet_Sandbox#Sheet.json_Editor]] | ||
Line 19: | Line 19: | ||
==Legacy Sheet Restrictions== | ==Legacy Sheet Restrictions== | ||
− | See Also '''[[BCS/Bugs]]''' for newly | + | See Also '''[[BCS/Bugs]]''' for newly reported issues & bugs. |
</noinclude> | </noinclude> | ||
'''HTML:''' | '''HTML:''' | ||
Line 29: | Line 29: | ||
* HTML Elements that doesn't work: <code><section></code>, <code><header></code>, <code><footer></code>, <code><a></code>, <code><meter></code>, <code><progress></code>, <code><datalist></code>, <code><details></code>, <code><summary></code>. Trying to add any of these to a sheet will either result in Roll20 removing them or behave like they are a <code><nowiki><div></nowiki></code>. | * HTML Elements that doesn't work: <code><section></code>, <code><header></code>, <code><footer></code>, <code><a></code>, <code><meter></code>, <code><progress></code>, <code><datalist></code>, <code><details></code>, <code><summary></code>. Trying to add any of these to a sheet will either result in Roll20 removing them or behave like they are a <code><nowiki><div></nowiki></code>. | ||
* Attribute names are case-insensitive when checked for uniqueness. All <code><input></code>, <code><select></code>, <code><textarea></code> etc. should have unique attribute names if intended to be independent. Two inputs with same attr name will mirror each other and update if the other one is changed. | * Attribute names are case-insensitive when checked for uniqueness. All <code><input></code>, <code><select></code>, <code><textarea></code> etc. should have unique attribute names if intended to be independent. Two inputs with same attr name will mirror each other and update if the other one is changed. | ||
− | * To create a section where you can dynamically add new entries, the [[Repeating_Sections#Restrictions|Repeating Sections]] method is used through the <code><fieldset></code> element. | + | * To create a section where you can dynamically add new entries, the [[BCS/Repeating_Sections#Restrictions|Repeating Sections]] method is used through the <code><fieldset></code> element. |
* <code><input></code>([[Building_Character_Sheets#Text_.26_Numbers|inputs]]) and <code><button></code>([[Button]]) elements are restricted to a limited number of types. This is likely true with other elements. | * <code><input></code>([[Building_Character_Sheets#Text_.26_Numbers|inputs]]) and <code><button></code>([[Button]]) elements are restricted to a limited number of types. This is likely true with other elements. | ||
* All CSS classes referenced in the HTML that don't start with <code>attr_</code>, <code>repeating_</code>, <code>roll_</code> or <code>sheet-</code>, will be prefixed with <code>sheet-</code> automatically when rendered in Roll20. The <code>sheet-</code> prefix is only required on the CSS file, except for roll templates which needs them in the html. | * All CSS classes referenced in the HTML that don't start with <code>attr_</code>, <code>repeating_</code>, <code>roll_</code> or <code>sheet-</code>, will be prefixed with <code>sheet-</code> automatically when rendered in Roll20. The <code>sheet-</code> prefix is only required on the CSS file, except for roll templates which needs them in the html. | ||
Line 44: | Line 44: | ||
* Do not use <code>.sheet-new-window</code> as a CSS class name, as Roll20 already uses it and will block you from trying to override it. [https://app.roll20.net/forum/post/8618852/css-compiler-error-with-new-window-class/ Forum thread] | * Do not use <code>.sheet-new-window</code> as a CSS class name, as Roll20 already uses it and will block you from trying to override it. [https://app.roll20.net/forum/post/8618852/css-compiler-error-with-new-window-class/ Forum thread] | ||
* Roll20 have some predefined CSS classes for it's [[Designing_Character_Sheet_Layout#Roll20_columns.2Frows|custom row/column system]] and other default, so very generic class names like: <code>.sheet-row</code>, <code>.sheet-col</code>, <code>3colrow</code>, <code>2colrow</code> and <code>.sheet-character</code> is best to be avoided. | * Roll20 have some predefined CSS classes for it's [[Designing_Character_Sheet_Layout#Roll20_columns.2Frows|custom row/column system]] and other default, so very generic class names like: <code>.sheet-row</code>, <code>.sheet-col</code>, <code>3colrow</code>, <code>2colrow</code> and <code>.sheet-character</code> is best to be avoided. | ||
− | * [[Repeating_Sections#Restrictions|Repeating Sections Restrictions]] | + | * [[BCS/Repeating_Sections#Restrictions|Repeating Sections Restrictions]] |
* '''Default Fonts:''' The following fonts can be accessed by default: <code>Arial</code>, <code>Patrick Hand</code>, <code>Contrail One</code>, <code>Shadows Into Light</code> and <code>Candal</code> | * '''Default Fonts:''' The following fonts can be accessed by default: <code>Arial</code>, <code>Patrick Hand</code>, <code>Contrail One</code>, <code>Shadows Into Light</code> and <code>Candal</code> | ||
* '''[[#Google Fonts|Google Fonts]]:''' can be used with the <code>@import</code>-function ['''Note:''' If you use <code>@import</code> with Google’s own generated URL, you may see the following error: <code>Potential CSS security violation; character sheet template styling thrown out.</code> To work around this issue, change <code>css2?family</code> to <code>css?family</code> in the URL (i.e., remove the “<code>2</code>”).] | * '''[[#Google Fonts|Google Fonts]]:''' can be used with the <code>@import</code>-function ['''Note:''' If you use <code>@import</code> with Google’s own generated URL, you may see the following error: <code>Potential CSS security violation; character sheet template styling thrown out.</code> To work around this issue, change <code>css2?family</code> to <code>css?family</code> in the URL (i.e., remove the “<code>2</code>”).] | ||
Line 60: | Line 60: | ||
This does mean that you cannot utilize ID-linked <code><label></code> elements (eg, <code><label for="my_id">My Label Text</label></code>). You can place elements inside the label to link them together (eg, <code><label>Label Text <input ... /></label></code>), although that can come at the expense of some flexibility in your CSS. | This does mean that you cannot utilize ID-linked <code><label></code> elements (eg, <code><label for="my_id">My Label Text</label></code>). You can place elements inside the label to link them together (eg, <code><label>Label Text <input ... /></label></code>), although that can come at the expense of some flexibility in your CSS. | ||
<noinclude> | <noinclude> | ||
+ | |||
+ | ==Migrating from LCS to CSE== | ||
+ | Tips from [[Scott C.]] - {{fpl|11928307 link}} | ||
+ | |||
+ | Here's my simple(ish) guide to converting to [[CSE]]: | ||
+ | * swap {{c|legacy}} flag to {{c|false}} (in the [[sheet.json]] | ||
+ | * If your CSS classes in HTML don't have the {{c|sheet-}} prefix on them, remove them from your css file, '''except for anything that impacts Roll Templates''') | ||
+ | * Add {{c|.ui-dialog .tab-content .charsheet}} to the start of ALL your CSS that impacts the character sheet itself. This will ensure that your styling overrides the Roll20 default styling while still operating from the same "base" specificity level. | ||
+ | * If you had any styling that affected both the Roll Templates and the sheet, make sure to do both of the above | ||
+ | |||
+ | That should resolve 99% of the issues. | ||
==Related Pages== | ==Related Pages== | ||
− | * [[Character Sheet Enhancement]] the improved version to LCS, with more features and less restrictions | + | * [[Character Sheet Enhancement|Character Sheet Enhancement(CSE)]] the improved version to LCS, with more features and less restrictions |
* [[Sheet Author Tips]] - misc advanced tips | * [[Sheet Author Tips]] - misc advanced tips | ||
− | + | ||
− | + | ||
[[Category:Character Sheet Creation]]</noinclude> | [[Category:Character Sheet Creation]]</noinclude> |
Latest revision as of 12:13, 9 June 2024
Page Updated: 2024-06-09 |
This is related to Editing(coding) Character Sheets, which require Pro info to be able to use.Main Page: Building Character Sheets |
![]() | This article is a stub. |
Character Sheet Development
Getting Started
- Using Custom Sheets
- Building Sheets
(Main Page) - Glossary
- Code Restrictions
- Best Practice
- Common Mistakes
- Tutorials
- Examples, Templates
- Pattern Libraries
- HTML & storing data
- CSS & Styling
General
- Updates & Changelog
- Known Bugs
- Character Sheet Enhancement(CSE)
- Custom Roll Parsing
- Legacy Sheet(LCS)
- (upcoming) Beacon SDK
Reference
- Buttons
- Repeating Sections
- Sheetworkers
- Roll Templates
- sheet.json
- Translation
- Auto-Calc
- Advanced
- All SheetDev Pages
Tools & Tips
Other
Considering the Community Sheet Repository consists of +850 character sheets, which have been created between 2015 & 2021, a majority of them will likely remain Legacy Sheets for a good while, so looking at existing sheets. Most or all sheet examples on the wiki are made for Legacy Sheets, unless otherwise stated.
Character Sheet Enhancement(CSE) is the new sheet creation method released March 2021, with new features and less restrictions than Legacy Sheets. Legacy Sheets are not compatible with CSE straight away, and need to be adjusted first. Check the CSE page for more info.
Contents |
[edit] Using a Legacy Sheet
If you copy the source code of a Legacy sheet and save it either using the Sheet Editor, you need to check the box for "legacy sanitation", otherwise the editor assumes you have CSE-compatible code.
Using the Sheet Sandbox, you need to add a sheet.json-file that includes the "legacy":true
line. See more on Sheet_Sandbox#Sheet.json_Editor
[edit] Legacy Sheet Restrictions
See Also BCS/Bugs for newly reported issues & bugs.
HTML:
In the Roll20, the character sheet code is basically wrapped inside a giant <form>
tag(so don't use it).
- Id attributes cannot be used. (Any ID attributes on one character's sheet would affect another character's sheet in the same campaign when opened)
- Any 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:
<section>
,<header>
,<footer>
,<a>
,<meter>
,<progress>
,<datalist>
,<details>
,<summary>
. Trying to add any of these to a sheet will either result in Roll20 removing them or behave like they are a<div>
. - Attribute names are case-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 will mirror each other and update if the other one is changed. - To create a section where you can dynamically add new entries, the Repeating Sections method is used through the
<fieldset>
element. -
<input>
(inputs) and<button>
(Button) elements are restricted to a limited number of types. This is likely true with other elements. - All CSS classes referenced in the HTML that don't start with
attr_
,repeating_
,roll_
orsheet-
, will be prefixed withsheet-
automatically when rendered in Roll20. Thesheet-
prefix is only required on the CSS file, except for roll templates which needs them in the html. - All images will be passed through the Roll20 image proxy to prevent security attacks. This should be largely transparent to you and shouldn't affect anything, but it's something to be aware of.
-
<svg>
-tag isn't supported directly, but there are ways to use.svg
files, Example - All attributes in Roll Templates need to be written with double quotes, as single quotes results in roll template code being completely ignored.
- You can't refer to external CSS stylesheets, everything need to be on the CSS file
CSS:
- In the CSS file, all general classes should have a start with a
sheet-
prefix for Roll20 to read them. - Media queries can't currently be utilized
- Do not use
.sheet-new-window
as a CSS class name, as Roll20 already uses it and will block you from trying to override it. Forum thread - Roll20 have some predefined CSS classes for it's custom row/column system and other default, so very generic class names like:
.sheet-row
,.sheet-col
,3colrow
,2colrow
and.sheet-character
is best to be avoided. - Repeating Sections Restrictions
- Default Fonts: The following fonts can be accessed by default:
Arial
,Patrick Hand
,Contrail One
,Shadows Into Light
andCandal
- Google Fonts: can be used with the
@import
-function [Note: If you use@import
with Google’s own generated URL, you may see the following error:Potential CSS security violation; character sheet template styling thrown out.
To work around this issue, changecss2?family
tocss?family
in the URL (i.e., remove the “2
”).] - You can't refer to external CSS stylesheets, everying need to be on the CSS file
JavaScript: (Main Article: Sheetworkers)
Many JavaScript functions or functionalities can't be used within Roll20, and everything and one should check existing sheet for user-cases, if you're attempting to do any slightly more advanced data-handling.
- See JavaScript Restrictions for more details
[edit] Only Use Classes, not IDs
You should not use IDs on your tags (for example, DO NOT do <input type='text' id='name' />
). Since there are multiple copies of each sheet in the DOM at once, using an ID is incorrect since IDs should only be used on unique elements.
This does mean that you cannot utilize ID-linked <label>
elements (eg, <label for="my_id">My Label Text</label>
). You can place elements inside the label to link them together (eg, <label>Label Text <input ... /></label>
), although that can come at the expense of some flexibility in your CSS.
[edit] Migrating from LCS to CSE
Tips from Scott C. - link(Forum)
Here's my simple(ish) guide to converting to CSE:
- swap
legacy
flag tofalse
(in the sheet.json - If your CSS classes in HTML don't have the
sheet-
prefix on them, remove them from your css file, except for anything that impacts Roll Templates) - Add
.ui-dialog .tab-content .charsheet
to the start of ALL your CSS that impacts the character sheet itself. This will ensure that your styling overrides the Roll20 default styling while still operating from the same "base" specificity level. - If you had any styling that affected both the Roll Templates and the sheet, make sure to do both of the above
That should resolve 99% of the issues.
[edit] Related Pages
- Character Sheet Enhancement(CSE) the improved version to LCS, with more features and less restrictions
- Sheet Author Tips - misc advanced tips