Zombie World Sheet

Hey guys and girls, Loving Zombie World here on Roll20 (Seriously, the Delux set is so good). My players and I run in a bit of 'rotating cast'/'Westmarches' style, so we wanted a place to keep some easy-to-access records of the various characters...so I took the sheet example and whipped a sheet up just for fun. Thought "I'll share this, but not put it on the compendium." If someone wants to take this ugly, but functional, sheet and run with it and all that....feel free (some kudos would be nice, but I'm not fussed). Enjoy! -Obi HTML: &lt;div class="3colrow"&gt; &nbsp; &nbsp; &lt;div class="col"&gt; &nbsp; &nbsp; &lt;label&gt;Name:&lt;/label&gt;&lt;input type="text" name="attr_character_name" /&gt; &lt;label&gt;Description:&lt;/label&gt;&lt;input type="text" name="attr_rank" /&gt; &lt;label&gt;Enclave:&lt;/label&gt;&lt;input type="text" name="attr_enclave" /&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;img src="<a href="https://i.imgur.com/GJhFI8n.png" rel="nofollow">https://i.imgur.com/GJhFI8n.png</a>" /&gt; &lt;!--Insert your own image here!--&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;img src="<a href="https://i.imgur.com/3sKyHEz.png" rel="nofollow">https://i.imgur.com/3sKyHEz.png</a>" /&gt; &lt;!--Insert your own image here!--&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr/&gt; &lt;div class="3colrow"&gt; &lt;div class="col"&gt; &lt;h3&gt;Past&lt;/h3&gt; &lt;textarea name="attr_past"&gt;&lt;/textarea&gt; &lt;h3&gt;Present&lt;/h3&gt; &lt;textarea name="attr_present"&gt;&lt;/textarea&gt; &lt;h3&gt;Trauma&lt;/h3&gt; &lt;textarea name="attr_trauma"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;h2&gt;Stats&lt;/h2&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stats"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Savagery&lt;/label&gt;&lt;input type="text" name="attr_savagery" /&gt;&lt;br&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Steel&lt;/label&gt;&lt;input type="text" name="attr_steel" /&gt;&lt;br&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Soul&lt;/label&gt;&lt;input type="text" name="attr_soul"&nbsp; /&gt;&lt;br&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Survival&lt;/label&gt;&lt;input type="text" name="attr_survival" " /&gt;&lt;br&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &lt;br&gt; &lt;h2&gt; Stress &lt;/h2&gt; &lt;input type='checkbox' name='attr_stress1' value='1' /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type='checkbox' name='attr_stress1' value='2' /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type='checkbox' name='attr_stress1' value='3' /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type='checkbox' name='attr_stress1' value='4' /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type='checkbox' name='attr_stress1' value='5' /&gt;&lt;span&gt;&lt;/span&gt; &lt;p&gt; &lt;h3&gt; Suffering Serious Harm &lt;/h3&gt; When you &lt;b&gt;Suffer Serious Harm&lt;/b&gt; draw a card from the Survivor Deck.&lt;br&gt; Draw and Additional Card for each true Statement:&lt;br&gt; &lt;i&gt;The Harm is unintentional.&lt;br&gt; The harm isn't explicitly lethal.&lt;br&gt; You have Cover, Body Armor, or a Bodyguard.&lt;p&gt;&lt;/i&gt; On a &lt;b&gt;Hit&lt;/b&gt;, you'll live. On a &lt;b&gt;Triumph&lt;/b&gt;, it's a minor but Heroic Wound. On and Edge, you choose one:&lt;br&gt; &lt;i&gt;It's messy; you'll die without immediate aid.&lt;br&gt; It's painful; take -1 ongoing until you get some rest.&lt;br&gt; It's lasting; one of your stats goes down by 1 permanently.&lt;/i&gt;&lt;p&gt; On a &lt;b&gt;Miss&lt;/b&gt;, you're dead. The GM will tell you when. &lt;/div&gt; &lt;div class="col"&gt; &lt;h3&gt;Relationships&lt;/h3&gt; &lt;textarea name="attr_relationships"&gt;&lt;/textarea&gt; &lt;h3&gt;Allies&lt;/h3&gt; &lt;textarea name="attr_allies"&gt;&lt;/textarea&gt; &lt;h3&gt;Equipment&lt;/h3&gt; &lt;textarea name="attr_equipment"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;h3&gt;Notes&lt;/h3&gt; &lt;textarea name="attr_notes"&gt;&lt;/textarea&gt; CSS: /* Set the min-width so that when the window is resized the look will stay consistant */ .charsheet { background-image: url("<a href="https://i.imgur.com/uO7G46b.jpg" rel="nofollow">https://i.imgur.com/uO7G46b.jpg</a>"); background-color: #ddd; min-width: 800px; } /* Universal styling applied to all elements of these types */ h2 { font-size: 2em; margin-bottom: 10px; text-align: center; } label { display: inline-block; width: 31%; } input { display: inline-block; width: 165px; } img { max-height: 100px; } textarea { resize: vertical; } /* Targetted styling that only effects elements with these classes */ input.sheet-short { width: 17%; } select.sheet-dtype { &nbsp; &nbsp; vertical-align: top; &nbsp; &nbsp; width: 60px; } span.sheet-dee { font-size: 1.4em; font-weight: bold; left: -36%; padding-right: 4px; position: relative; top: 3px; } /* Targetted styling that only effects elements contained within the stated class */ .sheet-stats h3 { display: inline-block; text-align: center; } .sheet-stats h3:first-child { margin-left: 35%; margin-right: 15%; } .sheet-stats input { margin-right: 8%; width: 17%; } /* Hide actual radio/checkbox */ input[type="radio"], input[type="checkbox"] { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; } /* Fake radio/checkbox */ input[type="radio"] + span::before, input[type="checkbox"] + span::before { &nbsp; &nbsp; margin-right: 4px; &nbsp; &nbsp; border: solid 1px #a8a8a8; &nbsp; &nbsp; line-height: 25px; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp; box-shadow: 0 0 2px #ccc; &nbsp; &nbsp; background: #f6f6f6; &nbsp; &nbsp; background: radial-gradient(#f6f6f6, #dfdfdf); } /* Fake radio */ input[type="radio"] + span::before { &nbsp; &nbsp; content: ""; &nbsp; &nbsp; width: 12px; &nbsp; &nbsp; height: 12px; &nbsp; &nbsp; font-size: 24px; &nbsp; &nbsp; border-radius: 50%; } input[type="radio"]:checked + span::before { &nbsp; &nbsp; content: "•"; } /* Fake checkbox */ input[type="checkbox"] + span::before { &nbsp; &nbsp; content: ""; &nbsp; &nbsp; width: 25px; &nbsp; &nbsp; height: 25px; &nbsp; &nbsp; font-size: 20px; &nbsp; &nbsp; border-radius: 5px; } input[type="checkbox"]:checked + span::before { &nbsp; &nbsp; content: "✓"; }

Thank you for sharing it, I've been playing with your code trying to recreate the original character sheet disposition and also learned how to fix the checkbox behaviour to match my expectations. This is the first time dealing with character sheet code and I feel quite lost, so much to learn. Any advice to give different sizes to each column on the 3colrow would be helpful.

In the section you want to tweak, change each instance of&nbsp; &lt;div class="col"&gt; to&nbsp; &lt;div class="col mywidth"&gt; and at the end of the CSS file add .sheet-mywidth { &nbsp; &nbsp;width: 100px; } change the width&nbsp; to whatever width you want, you can also use percentages instead of pixel widths. You can change "mywidth" to whatever name you want. If you want columns of different widths, just use different names and create a different entry in the CSS for each. It'll likely take some experimentation to find the widths you want. You can also remove the col part from the entry, like &lt;div class="mywidth"&gt; But it might have some other effects - changing padding, margin size, and other stuff. I'm not sure which is why i didnt remove it entirely. But you can try it out and see what happens, and put it back if you dont like it.

Thanks GiGs! Time to tinker :D

Sr. K said: Thank you for sharing it, I've been playing with your code trying to recreate the original character sheet disposition and also learned how to fix the checkbox behaviour to match my expectations. This is the first time dealing with character sheet code and I feel quite lost, so much to learn. Any advice to give different sizes to each column on the 3colrow would be helpful. Dont use the "3colrow" or the other old CSS things, it's been discouraged for years and is just plainly bad and outdated. Use CSS Grid or Flexbox classes instead, works much better. I think references to "3colrow" and those other pre-existing classes have been removed from the wiki documentation precisely because they aren't that great to use. I also recommend OP to take a look at those two as it will help down the line when continuing to tinker with character sheets.

I hadnt realised that they weren't there anymore, but I think its bad form to tell people not to use them, without explaining how to replace them. 3colrow and col add styling information invisibly, and people aren't going to know what they do if they just remove them. And telling people to jump to flexbox and grid when they dont even know what classes are is also not like the most helpful thing ever. Especially when there are still plenty of sheets in the repository which use inline styles instead of classes. Let's not ask people to jump before they can walk. IMO People can use 3colrow and col, and as they experiment and add features, they'll figure out what they need to improve, and can stop using them when they are ready.

GiGs said: And telling people to jump to flexbox and grid when they dont even know what classes are is also not like the most helpful thing ever. Especially when there are still plenty of sheets in the repository which use inline styles instead of classes. Let's not ask people to jump before they can walk. IMO People can use 3colrow and col, and as they experiment and add features, they'll figure out what they need to improve, and can stop using them when they are ready. Yeah that's true. Don't know at what point the references was removed form the wiki, but that's one of the reasons to discourage use considering they are now gone from barely documented to undocumented. And yes considering a clear, simple replacement to do the same thing haven't been added other than just references to Grid and Flexbox, I realize they still had their place. Edit: I went and looked at the page's edit history and found, as I suspected, that it was me how removed the references to the columns from the page, as described in the edit history.

I don't know if you remember this, but you're the one who removed the description of roll20s custom 3colrow and 2colrow styles. I just restored them, because they should be documented.

GiGs said: I don't know if you remember this, but you're the one who removed the description of roll20s custom 3colrow and 2colrow styles. I just restored them, because they should be documented. Yes. It seems I noticed it and edit my last comment just before you (3 minutes :P) also noticed it. Good thing I leave comments on what I do. :D Thanks for restoring it. There was also a disclaimer discouraging their use(although added by me and later adjusted by Cassie), but the important thing is that it should exist in the documentation even if it is discouraged from being used.

In my re-addition, i do point out it's limited, and people are encouraged to use better approaches, but the info should definitely be there.

Andreas J. said: GiGs said: I don't know if you remember this, but you're the one who removed the description of roll20s custom 3colrow and 2colrow styles. I just restored them, because they should be documented. Yes. It seems I noticed it and edit my last comment just before you (3 minutes :P) also noticed it. Good thing I leave comments on what I do. :D Thanks for restoring it. There was also a disclaimer discouraging their use(although added by me and later adjusted by Cassie), but the important thing is that it should exist in the documentation even if it is discouraged from being used. Well, r20 needs to update their sheet template then, because I just took that and rolled with it for this....as it was a 'quick and dirty' job to just get my group a sheet.

GiGs said: In my re-addition, i do point out it's limited, and people are encouraged to use better approaches, but the info should definitely be there. Totally agree, all info is welcome in order to learn, even if its outdated or not optimal. Since this is my first time I just wanted some code to play with (quick and dirty was great) and some knowledge to deal with it. Now I'm discovering new ways and I think I can afford to use CSS Grid syntax in order to keep myself in the right path. Thanks to everyone!

Obi said: Well, r20 needs to update their sheet template then, because I just took that and rolled with it for this....as it was a 'quick and dirty' job to just get my group a sheet. Yes, the kitchensink template is good for a 'quick and dirty' sheet, and as GiGs pointed out, the roll20 css classes are okay for simple things, just not recommended to use if you want to build more complex or better looking sheets. The Building Character Sheets page have links to several alternative sheet templates.

Andreas J. said: Obi said: Well, r20 needs to update their sheet template then, because I just took that and rolled with it for this....as it was a 'quick and dirty' job to just get my group a sheet. Yes, the kitchensink template is good for a 'quick and dirty' sheet, and as GiGs pointed out, the roll20 css classes are okay for simple things, just not recommended to use if you want to build more complex or better looking sheets. The Building Character Sheets page have links to several alternative sheet templates. Thanks for the advice, I know a bit of my way around sheet design, as I was one of the contributors on the V5 sheet (both versions).....but more information is always handy.