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 .
×

How to add a new sheet type to an existing character sheet?

1770934435

Edited 1770936533
Hi, I have been making an edit of the Pokerole 2.0 sheet for my Legends rules supplement / Pokerole 3.0 edition.&nbsp; I'm by no means a coder, I've been figuring things out myself or using the dreaded AI for a couple more complicated things.&nbsp; So far my sheet works perfectly, however I've hit a brick wall. I need to add another sheet type. Currently their are Pokémon and Trainer sheet types, which you click an image to swap between, and the sheet changes a little between both versions. I want to add a third (Vehicle) with a few changes from Trainer sheets. I'm probably good to add in the changes, I just cannot for the life of me figure out how to add an additional sheet type. GPT seems pretty stumped on this too. Everything I try just completely breaks the sheet's formatting, adding to all sheet types rather then adding a new sheet type. I wanted it to cycle between sheet type when clicking the image. (ie click the Poke ball, go to Pokémon mode, click the trainer icon that replaces it, go to Trainer mode, click my Vehicle image, go to Vehicle mode).&nbsp; If anyone could tell me how to do this I'd be eternally grateful. Here is the working HTML and CSS of my sheet (no Vehicle stuff added as of yet. You must have Legacy Sanitization checked for it to work).&nbsp; <a href="https://github.com/lowly-god/Pokerole-Legends/tree/main/Roll20%20Character%20Sheet" rel="nofollow">https://github.com/lowly-god/Pokerole-Legends/tree/main/Roll20%20Character%20Sheet</a>
1771049421
GiGs
Pro
Sheet Author
API Scripter
I don't have time to look at the sheet code, but sheet types are usually handled by CSS. The bit you want to appear appears when the CSS value is on. Try for help on making a sheet <a href="https://cybersphere.me/roll20-sheet-author-master-list/" rel="nofollow">https://cybersphere.me/roll20-sheet-author-master-list/</a> By the way, using GPT for roll20 is a bad idea. You are probably familiar with people telling you not to use AI on principle (not to mention efficiency and accuracy concerns), but I'm not doing that. AI large langue models require vast data sets to be reliable, and there just aren't enough roll20-specific code samples out there for it to produce reliable code. AI, whether GPT, Claude, or whatever, simply cannot work well for roll20, even if they work well for html, css, js, etc.
1771184638

Edited 1771184797
vÍnce
Pro
Sheet Author
Hi Lowly, This might work for you ( html/css ) it looks like the sheet was setup to use a checkbox to either show the trainer or pokemon sections.&nbsp; By adding a third option for "Vehicle", the nav needed to be reworked a little...&nbsp; I created a sheet worker that detects a hidden button click to cycle through the 3 images and type/modes.&nbsp; I just added your avatar image as the vehicle image for testing. ;-)&nbsp; Change the url in the css to point to whatever image you want.&nbsp; I've also added a colored outline for each section to simply demonstrate what is shown as you cycle through the 3 images/modes of the sheet.&nbsp; I find it helpful while developing. Comment/delete those outlines in the css after you work things out.&nbsp; You can add the "vehicle-only" class to any section you want show when the sheet cycles to the "Vehicle" type/mode.&nbsp; Same goes for "trainer-only" and "pokemon-only".&nbsp; I added a Vehicle section near the top of the sheet to demonstrate. Know that there's a hidden input that's currently setup to hide/show these modes &lt; input type = "hidden" class = "creature-toggle" name = "attr_creature_mode" value = "1" /&gt; Ensure a copy of that input is placed before, and as a sibling of any element that uses your "type/mode" classes. ie "trainer-only", "pokemon-only", "vehicle-only".&nbsp; You'll notice the sheet is already setup like this as an example to follow. There are other methods that probably don't require peppering the sheet with a ton of those hidden inputs, but I've left it as-is.&nbsp; Just know that you might be able to use a single hidden input and adjust the css to show/hide. See my css changes starting at&nbsp; line:867 &nbsp;html changes around line:273 , also changed the 3 sheet settings options to "radio".&nbsp; Wasn't sure how/if you even use the sheet settings section.&nbsp; Sheetworker image loop is at the end of your script&nbsp; Hope this helps.
1771196191

Edited 1771200792
Thank you so, so much. You absolute beast &lt;3 I am having a slight issue however that on your edit the formatting is pretty broken, some stuff from PMD mode is displaying on non-PMD mode sheets, and a bunch of other stuff has decided it lives in different places now lol. Any ideas? vÍnce said: Hi Lowly, This might work for you ( html/css ) it looks like the sheet was setup to use a checkbox to either show the trainer or pokemon sections.&nbsp; By adding a third option for "Vehicle", the nav needed to be reworked a little...&nbsp; I created a sheet worker that detects a hidden button click to cycle through the 3 images and type/modes.&nbsp; I just added your avatar image as the vehicle image for testing. ;-)&nbsp; Change the url in the css to point to whatever image you want.&nbsp; I've also added a colored outline for each section to simply demonstrate what is shown as you cycle through the 3 images/modes of the sheet.&nbsp; I find it helpful while developing. Comment/delete those outlines in the css after you work things out.&nbsp; You can add the "vehicle-only" class to any section you want show when the sheet cycles to the "Vehicle" type/mode.&nbsp; Same goes for "trainer-only" and "pokemon-only".&nbsp; I added a Vehicle section near the top of the sheet to demonstrate. Know that there's a hidden input that's currently setup to hide/show these modes &lt; input type = "hidden" class = "creature-toggle" name = "attr_creature_mode" value = "1" /&gt; Ensure a copy of that input is placed before, and as a sibling of any element that uses your "type/mode" classes. ie "trainer-only", "pokemon-only", "vehicle-only".&nbsp; You'll notice the sheet is already setup like this as an example to follow. There are other methods that probably don't require peppering the sheet with a ton of those hidden inputs, but I've left it as-is.&nbsp; Just know that you might be able to use a single hidden input and adjust the css to show/hide. See my css changes starting at&nbsp; line:867 &nbsp;html changes around line:273 , also changed the 3 sheet settings options to "radio".&nbsp; Wasn't sure how/if you even use the sheet settings section.&nbsp; Sheetworker image loop is at the end of your script&nbsp; Hope this helps.
1771221081
Andreas J.
Forum Champion
Sheet Author
Translator
Swapping visible areas (sections, or sheet types liek PC, NPC, Vehicle) have been implemented by in many sheets. CSS Wizardry have a very simple dropdown-based example on this <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a>