Custom Character Sheet

I have a character sheet on my computer that's 8 separate web pages that are linked by a bar of image-buttons I made at the top. How do I get this into Roll20. Works nice in my browser on my computer. I would really like to keep this set up but if it has to be changed then it will be changed. Haven't done any coding in years. This is my first attempt at HTML. First lesson, DON'T use Microsoft words as an HTML editor! One week down in flames on that one!

You would have to merge them into a single page, but you can use  CSS tabs to still get the same interface.

That looks really cool!  Great work.

Thank you, and I will try Brian's link to his bit of wizardry to do this. I came across it before looking up how it might be done and saw that it's 2 years old and posted to see if there is any thing new or changed about this. If I have problems I can't figure out I will be back. Right now the background isn't in or any of the CSS but I do have everything else. With no styling everything is long, really long. I'm sure it's my syntax. Look at the sheets in Github and go from there. Happy Thanksgiving and not working on it today, I'll probably roll off the seat.

Hey Barry A. I recently applied the CSS tabs to one of my sheets and they work just fine. Just copy/paste the appropriate code. You can easily change the number of tabs too. Afterwards, once you get it working, you will want to restyle the design of the buttons to fit your sheet. Good luck!

Thank you will be trying today.

Thanks to Brian and his CSS wizardry I have a character sheet with tabs so the sheet has 8 separate pages. Put the images you see above by the radio buttons and got the background image in and on all 8 pages. I used the NvU editor to create the web pages and when I copy and paste the code from the web pages I created it goes wacky in Roll20. First table is off the page, text no formatting, and fields are all the same length, namely the wrong one. Have to heavily edit the code to get it to look like what's on my computer. In looking at the code this editor wrote even as a novice in HTML I'm not impressed. It would be useful to know if any sheet authors use an Editor to create their code or is it all hand coded? Since this is version 1 of the character sheet it will be just to be able to do Avatar Descension on Roll20 with a custom character sheet. Version 2 when ever it gets done I'll put on Github so any Roll20 user can use it. Thanks for the replies.

I use a TextWrangler for my Roll20 coding. There are some things to be aware of CSS-wise, and that is all of your classes should start with "sheet-". It's not mandatory, but Roll20 will automatically make them that way, so for clarity to and ease troubleshooting, I'd recommend just making all your classes start that way in the character sheet and in the CSS file.

Hey Barry A. Personally, I am a big believer in hand coding. I edit directly online, in the Roll20 editor. This way I don't have to worry about what works in normal html/css/js and what is specific to Roll20. I have another tab open where I am ingame, so every now and then I save the code, reload the other tab, and see how it works. Once I have a vague idea how my sheet is going to look (basic layout, tabs, etc.), my workflow is basically this: Get all the sheet functionality working first, meaning all the input fields, roll buttons, sheetworkers, tabs, etc. Only once that is done do I start playing with design, layout, fonts, spacing, widths, graphics, etc. Also, my advice would be to place all your styling in the CSS, and use classes on all things. It makes fixing the styles so much easier. Hope that helps :)

Thanks for the advice. While working on this I came to the conclusion quickly to do it directly in the Roll20 Editor. In the end save time and effort. To check my progress I've have been opening up another tab with the campaign the custom sheet is on, in-game, so I can check the progress there. Do my editing, save, then refresh the in-game tab and check the result. Most things should be foundation, structure, interior, and finishing. First thing I did was get the tabs and 8 separate pages going then added the background that will be on all pages. Now I'm putting in all the content for all 8 pages. Then get the formatting and styling done. I will take your advice and remove my in-line styling in the HTML and put it all in the CSS. I will try the classes on the content on the first page so I can get a handle on how to use them. Thanks for helping a getting old dog learn some new HTML tricks.

The only tip I can suggest as I learned the hard way is do a little bit at a time then save and reload to check your work. It helped me find and correct errors easier. I'm having to go back and rename some of my inputs now due to my goofup and not making my sheet compatible with a pre-existing one that it is going to co-exist with.

Pat S. said: The only tip I can suggest as I learned the hard way is do a little bit at a time then save and reload to check your work.  All of what Pat S. said, but also, because if you don't save frequently with the Roll20, editor you could end up losing a lot of work by one simple mis-click of a button... I work with a Magic Mouse on a Mac, so a simple swipe has taken my browser back and lost all the unsaved stuff...which is why I use an external text editor (with HTML color coding support) to save all my work then just copy/paste into Roll20. I also do the tab thing.

Excellent suggestion to save frequently. It has taken me all this evening to do the first table for the first page. Change a couple of things, then save, and then check the work. Got it all done and now it will go a lot faster. This first custom character sheet is to be all tables and all are to be the same as the one I have now finished hand coding. Just copy and paste and make the adjustments for rows, columns, and the content. I'll add number inputs and autocalc of values in the next version. The one after get more fancy with the styling. If I had hand coded this version 1 sheet into Roll20 when I started it would have been done 2 weeks ago. Thanks for all the suggestion especially Brian for the coding to do a tabbed character sheet! Two questions. One is there any videos on Youtube or elsewhere that shows the coding of a character sheet in Roll20? If there isn't, some one should make one, I've looked. All the proper syntax and use of code with the tips and tricks that can save time and effort if you know them ahead of time. Second how do you get the "sheet author" badge? I will put a version of this sheet on Github one day. Thanks again.

Hey Barry A.! One other tip, something I recently learned the hard way: use sheetworkers instead of autocalc if you plan on using the calculated values for other stuff like rolls or other calculations. Using autocalc'ed values for this doesn't always work. I spent so much time trying to figure this out now I hate autocalc and now only use sheetworkers!  And to answer your second question: you get the "Sheet author" badge a day or so (from my experience at least) after your first sheet is accepted on github and is added to the drop-down list of publicly available character sheets.

I thought that was how you got the sheet author badge. I just checked about the autocalc and sheetworkers and the help doc recommends using the sheetworkers rather then auto-calculating the value. Missed that completely since I thought it was an advanced feature I wouldn't be using. Thanks! and saved me time later. Help doesn't really explain using them. All I will need is to perform is things like calculation of (str-10) = strmodifier and (int+will+wis)/3 = mentalSRbase or level up one and HP = current + (original/2). Are there sheetworkers for this in the API? I'll look later. Will this mean learning some JavaScript to go with my HTML and CSS? Learned Basic back in high school, then Fortran, bought a C++ complier (Borland) and played with that on a pentium computer mid 90s but never really got into coding. Thanks for the reply.

Hello and finally got down to creating my custom character sheet. Now spending my time writing code instead of learning how to do it. Got the first page done and going a lot faster on the second. Two minor issues. How do you adjust the position of an element from the bottom? I have text that I want to appear at the bottom of all the tabbed pages in the character sheet. On the first page it's positioned from the bottom of the last top element. I would rather position by the bottom up. I've tried various combinations of position, margin-bottom, and vertical-align. None worked so I positioned the text top down not bottom up. The drop down box is not centred vertically in the cell. Tried with the vertical-align and position and doesn't move. Is this just a quirk of the system? Also the last row is higher then the others, they should all be the same. Because of the box?