Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Sheet Creation from scratch

Hi people, I thought about creating a sheet for a german RPG called HeXXen 1733 , which is not available in English yet. My feeble attempt on creating my own Shadowrun sheet in German failed miserably. Could some of you guys try to point me in the direction of tools that might help? I don't think the editor for HTML or CSS on Roll20 is very user firendly. What do you guys use? Also, if I succeed this time, what is the proper process to have it published on Roll20, so even free users can use it? Thanks in advance.
1584876264
Andreas J.
Forum Champion
Sheet Author
Translator
There really isn't any tools to create them, you need to write them in HTML/CSS. Building Character Sheets is the guide that gives advice on things. It's recommended to start from an existing sheet rather than start from scratch. The include instructions on the minimum requirements for submitting a sheet, as well as how to do it.
1584876486

Edited 1584879190
I just thought there might be some WYSIWYG editors that help you do it. Starting from an existing sheet is quite hard if the game you try to create a sheet for is probably not even known to most of Roll20 users.
1584878913
Andreas J.
Forum Champion
Sheet Author
Translator
Werner said: Starting from an existing sheet is quite hard if the game you try to create a sheet for is probably not even known to mist of Roll20 users. Do you want to reinvent the wheel, or is this game's sheet/ game mechanics structured in such a unique way it's like nothing that currently have a character sheet for Roll20? If so, go ahead. I just thought there might be some WYSIWYG editors that help you do it. Roll20 have enough unique things going on that WYSIWYG editors for HTML/CSS wouldn't really work. But you could look into how Chrome/Firefox Browser Developer tools work. They could kinda be used as a WYSIWYG editor for character sheets if you're logged into a game with an existing sheet and try to do changes.
1584883022
GiGs
Pro
Sheet Author
API Scripter
Also look at the custom sandbox feature, it lets you use external editors like visual studio code or sublime text, which aren't WYSIWIG, but they are better than the roll20 editor.
Hey GIGs, I saw your TORG sheet and to me, this is pure magic. AWESOME! When I create something in the custom sandbox, can I move this to normal games? I just found out that using Google fonts is also only possible in the sandbox. All these little barriers and problems while you already struggle on the thing itself... xD That was why I asked for WYSIWYG editors, coding in HTML and CSS is definitely not my superpower.
1584911333
vÍnce
Pro
Sheet Author
Werner said: Hey GIGs, I saw your TORG sheet and to me, this is pure magic. AWESOME! When I create something in the custom sandbox, can I move this to normal games? I just found out that using Google fonts is also only possible in the sandbox. All these little barriers and problems while you already struggle on the thing itself... xD That was why I asked for WYSIWYG editors, coding in HTML and CSS is definitely not my superpower. Unfortunately there isn't a WYSIWYG. The sandbox is nice since it removes having to edit locally, copy/paste to the settings editor, save, reload/refresh test game, review, and repeat.  With the new sandbox feature, you can simply link to your local html, css, and translate(optional) files, edit locally, then refresh the link to the file you are editing to see the results in your sandbox game.  Much faster. That said, you will still be editing code locally using a text-based editor of your choice(notepad++, notepad, vsc, sublime, etc.)  While these tools are great for editing code, they normally do not include a WYSIWYG (live layout/design gui) component that "auto-magically" creates the necessary html, css, and js to make it happen within a browser.   Google fonts are available to all sheets now, not just within the sandbox.
1584916353
GiGs
Pro
Sheet Author
API Scripter
Werner  said: Hey GIGs, I saw your TORG sheet and to me, this is pure magic.  AWESOME! Thanks! It's taken me 2-3 years to reach the point where I could make a sheet like that. There's a lot of different skills to acquire. Vince has answered your questions. Yes when you have created a sheet using the sandbox you can transfer it to a normal campaign. As Vince points out, you'll be working in text files (html and css). When ready, you just create a new campaign, set the sheet as Custom Sheet, and copy those files in as normal.
1584983323

Edited 1584985233
@Vince Could you tell me how to use Google Fonts in a sheet? I tried to implement it into the CSS as Google suggested but somehow didn't work. Is there any tutorial? Or a short explanation? Never mind, in Sandbox it works...
1584987696
vÍnce
Pro
Sheet Author
Werner said: @Vince Could you tell me how to use Google Fonts in a sheet? I tried to implement it into the CSS as Google suggested but somehow didn't work. Is there any tutorial? Or a short explanation? Never mind, in Sandbox it works... Just for anyone else following along (this is from the February release notes ) Did You Say Google Fonts?!? We didn't mean to bury the lede, but yes! Google Fonts are now supported in custom and community sheets!&nbsp; You can call a Google Font in your CSS using the @import function: @import url(' <a href="https://fonts.googleapis.com/css?family=" rel="nofollow">https://fonts.googleapis.com/css?family=</a> Sigmar+One &amp;display=swap'); You can then call the font from inside your CSS with the font-family attribute: font-family: 'Sigmar One'; To call more than one Google Font for your sheet, separate them with a | symbol: @import url(' <a href="https://fonts.googleapis.com/css?family=" rel="nofollow">https://fonts.googleapis.com/css?family=</a> Sigmar+One|Sriracha &amp;display=swap'); Supporting Google Fonts and other external font sources is&nbsp; a popular suggestion &nbsp;in the Suggestions Forum, and we're glad to make it an option with this update! For licensing reasons, this is limited to Google Fonts, available at&nbsp; fonts.googleapis.com .
Werner said: Hi people, I thought about creating a sheet for a german RPG called HeXXen 1733 , which is not available in English yet. My feeble attempt on creating my own Shadowrun sheet in German failed miserably. Could some of you guys try to point me in the direction of tools that might help? I don't think the editor for HTML or CSS on Roll20 is very user firendly. What do you guys use? Also, if I succeed this time, what is the proper process to have it published on Roll20, so even free users can use it? Thanks in advance. I made a&nbsp; thread &nbsp;where I talked about my learning process with Roll20 API and character sheet creation. I'm now at a point where I have learned sufficient amounts of Javascript, CSS, and HTML to understand anyone's code. I've listed all the tools I used to get here.&nbsp; I've also looked at some of the popular API scripts others have published and character sheet code for the game I want to run. If you commit the time to teasing them apart - add comments to each block of functional code you understand - you'll pick up the language faster and faster.&nbsp; If you need some resources I listed them. After you get more familiar with how others have worked around the shortcoming inherent to Roll20 you'll learn how to improvise yourself.&nbsp; I recommend using&nbsp; JSFiddle &nbsp;as a spot to type all the character sheet code before you paste it into the Roll20 game settings. You can save and rerun as needed. It'll give more feedback as you play with the code. The only thing it will exclude is the custom Roll20 content (like custom buttons for whenever something set as a 'type=roll' ).