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

Looking for practical tips for character sheet authors

1461764249

Edited 1461764262
Hello, I just started learning HTML and CSS from scratch (I have never studied coding or any ICT for that matter) in order to help with the character sheets and eventually making my own custom one. I'm asking for help from the community pros. What are the best practices in character sheet creation? I'm looking for an answer questions like: What software to use for coding? Is there a way to write the code and immediately see/test the changes without copy-pasting a new version to roll20 as a custom sheet after each small change? In Github, are the sheet authors (original creator) the only ones who can make/accept changes to existing sheets or can anyone release new versions? If anyone can do it, how is the quality managed? How much can one usually "loan" from other sheets generally? I don't mean leagality just practicality. How far can I expect to get by "just" looking for good examples of how to do things in other sheets and copying code from them? What would you recommend as the first step (after being to some degree familiar with tags and HTML/CSS syntax) in this process? I have use Github a bit when updating Battlescribe catalogues but in reality I'm a total noob there too. Any tips on how to use Github with the sheets effectively and efficiently? I'm looking for all the help I can get so if you have anything to say...I mean write about the subject, please pitch in. Thanks a lot in advance!
1461767393
Finderski
Pro
Sheet Author
Compendium Curator
Maetco said: Hello, I just started learning HTML and CSS from scratch (I have never studied coding or any ICT for that matter) in order to help with the character sheets and eventually making my own custom one. I'm asking for help from the community pros. What are the best practices in character sheet creation? I'm looking for an answer questions like: Welcome to the club. :) What software to use for coding? I just Text Wrangler (a spiffy notepad like program that supports color-coding for HTML and CSS and JavaScript). I then copy/paste the code into the Roll20 editor. When I do that, I use Chrome with 2 tabs open (one with the game loaded, and one with the custom sheet editor opened). I try to use Preview (and have better luck with Chrome than any other browser), but if the preview doesn't work, I just save the custom sheet and reload the game tab to view the changes to the sheet. Also, for some changes, the actual game is the only way to really see the changes (for things like Repeating Sections, and Sheet Workers, etc). Is there a way to write the code and immediately see/test the changes without copy-pasting a new version to roll20 as a custom sheet after each small change? There's a way to sort of do it if you have Dreamweaver and all the necessary CSS files for roll20. There's a thread somewhere in the Character Sheet Forums that gives links to those files (I'll see if I can find it, but no promises), but I've heard that it isn't full-proof, because of some the nuances with things like repeating sections, etc. In Github, are the sheet authors (original creator) the only ones who can make/accept changes to existing sheets or can anyone release new versions? If anyone can do it, how is the quality managed? No, they are not the only ones who can, and I'll let Vince speak to this one, because I know he helps maintain one of the Pathfinder sheets and there are multiple (at least two) people working on that sheet. I'm not sure how it's managed.  My personal practice is, if I'm going to touch another author's sheet, I typically try to reach out to them and see if they are working on the changes. If not, I ask their permission to modify the sheet. If I get no response back, I assume the sheet is no longer being maintained and update the sheet.  Just to be clear, when I say I reach out to the author, I typically do that via Roll20 Private Messages. How much can one usually "loan" from other sheets generally? I don't mean leagality just practicality. How far can I expect to get by "just" looking for good examples of how to do things in other sheets and copying code from them? You can get a long way taking from other sheets.  The entire Savage Worlds Tabbed sheet is basically a Frankenstein sheet that I put together by cribbing awesome code from other sheets.  The base was the original Savage Worlds sheet, then I stole liberally from Actoba's 5e sheet.  I also used the CSS thread A LOT to figure out the other stuff that I couldn't find in other sheets, etc.  I always recommend people steal code from other sheets...one of the best ways to learn. Especially since Roll20 has some uniqueness due to it's nature. For example, you can have checkboxes function just like a radio button in roll20 (and I've found it easier to do that than use radio buttons...don't ask me why, just easier for my mind). What would you recommend as the first step (after being to some degree familiar with tags and HTML/CSS syntax) in this process? Find sheets that do what you are wanting to do and look at the code. Steal as much of it as you want, but also analyze it to see why it does what it does. Simply stealing code won't help you in the long run, I recommend understanding why it does it, because then you can figure out how to modify it to do something different later. That's how the Configuration section of my Savage Worlds Tabbed sheet came about... Also, be sure to read up on the wiki on all the character sheet pages and on roll templates and Sheet Workers.  I'll post links when I have a little more time (if someone doesn't beat me to the punch first, but in the meantime just go to the wiki and search for those terms and you'll find the pages pretty easy). I have use Github a bit when updating Battlescribe catalogues but in reality I'm a total noob there too. Any tips on how to use Github with the sheets effectively and efficiently? If you're using a Mac, get the desktop client. Made my world A LOT easier once I got that installed.  If you're not using a Mac, someone else will have to help answer this a bit more helpfully...because in many regards, github is still a magic box that I don't fully understand. :-/ Thanks a lot in advance! I hope this was helpful, and good luck.  And never be afraid to ask questions...this is one of the best forums around for getting help.
1461777887
Phoxounet
Sheet Author
Translator
Hi ! I think G.V. gave you the best possible advices. I started to learn html and css 5 months ago with my first character sheet. Now, I feel I can do a lot of things. I did eaxctly what G.V. said. And read a lot of websites about html and css coding.  When I was experienced enough to produce some basic code from scratch, I used this  website to improve my skills. Good luck ;)
1461785773

Edited 1461786294
Lithl
Pro
Sheet Author
API Scripter
Maetco said: What software to use for coding? Is there a way to write the code and immediately see/test the changes without copy-pasting a new version to roll20 as a custom sheet after each small change? In Github, are the sheet authors (original creator) the only ones who can make/accept changes to existing sheets or can anyone release new versions? If anyone can do it, how is the quality managed? How much can one usually "loan" from other sheets generally? I don't mean leagality just practicality. How far can I expect to get by "just" looking for good examples of how to do things in other sheets and copying code from them? What would you recommend as the first step (after being to some degree familiar with tags and HTML/CSS syntax) in this process? I have use Github a bit when updating Battlescribe catalogues but in reality I'm a total noob there too. Any tips on how to use Github with the sheets effectively and efficiently? I work directly in the Roll20 custom sheet editor, personally. The Preview tab... sometimes works. You can also use a "skeleton" with Roll20's CSS files to test with.  Here's an example . Basically, you need  app.css and  base.css , plus a little bit of HTML wrapped around your character sheet. However, if you want to do anything particularly advanced with your CSS, especially things to do with repeating sections, the only way to accurately test it is by loading up the VTT with your stuff saved as a custom sheet. No, anyone can create a pull request for any sheet. Only the Roll20 admins can accept pull requests, so not even the actual sheet authors can do that. Of course, if you fork from another sheet's author's fork and create a pull request into their  repository, they would be the ones in control if it, not Roll20, but to get those changes into the community sheet listing, they would then have to create a pull request into the Roll20 repo. I will mention that I have had someone submit a pull request for a sheet I created, and Steve sent me a PM asking if the changes were okay before merging them, so the original authors aren't being entirely  ignored, either. Oh, plenty. I think CoalPoweredPuppet has learned almost everything by looking at other people's sheets, and CPP is probably the most prolific sheet author around! =D I know that all (or very nearly all) of the sheets for systems which use "fill in a set of bubbles from left to right", such as White Wolf's various Storyteller System games, are straight-up copying the work I did on the Exalted Second Edition sheet. So, while it was only  a runner-up in the character sheet contest , my Ex2 sheet has some far-reaching impact on the community sheets at large. G V. said: I have use Github a bit when updating Battlescribe catalogues but in reality I'm a total noob there too. Any tips on how to use Github with the sheets effectively and efficiently? If you're using a Mac, get the desktop client. Made my world A LOT easier once I got that installed.  If you're not using a Mac, someone else will have to help answer this a bit more helpfully...because in many regards, github is still a magic box that I don't fully understand. :-/ There is also a Windows version of the desktop client. I created the  Beginner's Guide to GitHub a while ago to help people figure out the desktop client, although my screenshots are slightly out of date now, and it's possible to create a pull request straight from the client, instead of only through the GitHub website like the guide instructs you to do. I should fix that at some point >.> Also, one "best practice" to consider would be preparing for the translation support currently on the dev server. Even if you don't want to put in the i18n data just yet, you can set up your HTML to make it slightly easier in the future. For example, take this existing HTML: <label> Name: <input type="text" name="attr_character_name"> </label> The "Name" string should be translated, but you don't want to force the translator to deal with your HTML by instructing the system to translate the entire label. So, you can change your HTML to this: <label> <span>Name:</span> <input type="text" name="attr_character_name"> </label> When i18n support is added to the sheet, it's easy: <label> <span data-i18n="name">Name:</span> <input type="text" name="attr_character_name"> </label> You could also move the colon outside the span, so that you don't need a separate i18n key for "Name:" and "Name", if the word shows up elsewhere on the sheet without a colon (for example, in a table of weapons with a Name column): <label> <span data-i18n="name">Name</span>: <input type="text" name="attr_character_name"> </label> That does  sacrifice the ability to translate for RTL languages like Arabic, but the Name string and the character_name input would be in the wrong order for RTL, anyway.
Thanks a bunch. I will be asking a lot of not so intelligent quesitons so please just be bears with me. Here's one: How do I clone the Roll20 repo? Or more precisely how do I get the repo to show up on my Github desktop application?
1462025509

Edited 1462025614
Carl T
Sheet Author
Test in as many browsers as you can. Not just your favourite. A good practice at all times and especially when you are making custom versions of form elements. Even the Roll20 site is guilty of having broken basic behaviours in certain browsers. IMO the whole point of web/browsers is its universality so do as much as you can to keep that true.
1462050388
Finderski
Pro
Sheet Author
Compendium Curator
Maetco said: Here's one: How do I clone the Roll20 repo? Or more precisely how do I get the repo to show up on my Github desktop application? First you need to fork the  Roll20/roll20-character-sheets repository. When you are signed in on Github, just search for Roll20, and you should see a link to the above link. When you click on that link the page will display a ton of directories and near the top right there should be a "fork" button. When you click that button, it should create a repo on your account.  Then when you click clone on your git client above, you should see the fork appear as an option to clone. 
Thanks!. I didn't know I needed to work on a fork. In BSdata we work directly the master.
1462089740
Lithl
Pro
Sheet Author
API Scripter
Maetco said: Thanks!. I didn't know I needed to work on a fork. In BSdata we work directly the master. That would be because you are a contributor. If you're not given permission to commit to a repository directly (as you aren't with the Roll20 repo), you have to make a copy of the repo (fork it) and then suggest changes to the original with pull requests.
What is that .json file, do I need to do something to it and if yes what and how? Also how is that png screen meant to be made?
1462197293

Edited 1462197314
Lithl
Pro
Sheet Author
API Scripter
The JSON file is basically metadata for your sheet. It provides the description that a GM sees when selecting the sheet, gives you credit for creating it, etc. It is required if you want your sheet to be selectable by other users, but most of it is simple to write. The preview image (which doesn't have  to be a PNG, it just needs to be an image) can be made by just taking a screenshot of your sheet in action. (And then putting the name of the preview image file in your JSON.) The documentation says the preview should be 500x500px, although in practice there are a lot of sheets with much larger images.
Ok. If I'm updating an existing sheet (HTML and/or CSS file) do I also need to update the json?
1462199172
Finderski
Pro
Sheet Author
Compendium Curator
Maetco said: Ok. If I'm updating an existing sheet (HTML and/or CSS file) do I also need to update the json? "Need to"? Probably not, but you may want to add your name to the Author section of the JSON file. That way people you get credit for it, but also if the original author isn't going to support it any longer people have someone they can reach out to if something is wrong/broken. I wouldn't necessarily remove the original author's name, though...just add yours.
1462227385
Lithl
Pro
Sheet Author
API Scripter
G V. said: I wouldn't necessarily remove the original author's name, though...just add yours. Definitely. I practically rewrote the Ex3 sheet from the ground up, but I left the original author credits in the JSON. Even if they're not responsible for the current iteration of the sheet, they still deserve credit for the fact that they contributed to it in some capacity.
Ok, I did my first changes to the Fate Core sheet and got them released with a pull request. I did some more and this time I accidentally (well not accidentally, I did it on purpose as I forgot that BattleScribe and Roll20 work differently) clicked the sync button under the pull request. Then I tried to fix this by making a pull request but the Github desktop software didn't find any local changes. What happened to the changes? Were they merged into the Master automatically and the sheet will automatically be updated when a new version is released or did I lose the changes somehow or what? If they were added to the Master like this, which is a better way (sync vs pull request) and why? I told you, 'a lot of not so intelligent questions' :)
To answer my own question, the syncing doesn't seem to do anything when working on a fork. I managed to find the changed I commited though so I was able to make a pull request of the changed I have made. My problem was to go to the end (all the way right) where I couldn't see any local changes but every commit has its own dot on the line and one needs to go to those dots to make the pull requests. Hope this helps someone else trying to figure out how to use the desktop software.