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

Converting from Tables in old sheet?

I may have bitten off more than I can chew.  I want to make a character sheet for Conspiracy X using the existing All Flesh Must Be Eaten (AFMBE Unisystem) character sheet.  Mainly I wanted to remove blood splatter, change the fonts/stylings to more readable ones, fix labeling of the sheet tab radio buttons, etc.  Mechanics-wise, they're pretty much identical. As I'm getting into it, I've discovered the existing AFMBE sheet relies on tables to format itself.  I understand that tables are deprecated and new sheets can no longer include them.  What is the best method/practice for converting tables to something Roll20 friendly?  I don't have a lot of HTML or CSS experience but I can usually work it out if I know what I'm looking for.  Any advice would be greatly appreciated.
1617928486
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
CSS Grid is the most direct method. 
1617929067

Edited 1617929124
Nic B.
Roll20 Team
Hi Jesse, My strong advice for converting sheets that are using tables (and honestly for most sheet conversion these days) would be to use CSS Grid . Grid makes it super easy to make reasonably responsive layouts using CSS and divs. Here's a little bit of an example how you might use CSS Grid to refactor the AFMBE sheet: If we take the following example of code: <h3 class="sheet-center">Primary Attributes</h3> <table class="sheet-center sheet-black"> <tr> <td>Simple</td> <td>Trait</td> <td>Modifier</td> </tr> <tr> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Strength [[(@{base-Strength}*2) + @{mod-Strength} + 1d10]]">Strength</button></td> <td><input type="number" class="sheet-trait" name="attr_base-Strength" value="0"/></td> <td><input type="number" class="sheet-trait" name="attr_mod-Strength" value="0"/></td> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Strength [[@{base-Strength} + @{mod-Strength} + 1d10]]">Difficult</button></td> </tr> <tr> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Dexterity [[(@{base-Dexterity}*2) + @{mod-Dexterity} + 1d10]]">Dexterity</button></td> <td><input type="number" class="sheet-trait" name="attr_base-Dexterity" value="0"/></td> <td><input type="number" class="sheet-trait" name="attr_mod-Dexterity" value="0"/></td> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Dexterity [[@{base-Dexterity} + @{mod-Dexterity} + 1d10]]">Difficult</button></td> </tr> <tr> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Constitution [[(@{base-Constitution}*2) + @{mod-Constitution} + 1d10]]">Constitution</button></td> <td><input type="number" class="sheet-trait" name="attr_base-Constitution" value="0"/></td> <td><input type="number" class="sheet-trait" name="attr_mod-Constitution" value="0"/></td> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Constitution [[@{base-Constitution} + @{mod-Constitution} + 1d10]]">Difficult</button></td> </tr> <tr> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Intelligence [[(@{base-Intelligence}*2) + @{mod-Intelligence} + 1d10]]">Intelligence</button></td> <td><input type="number" class="sheet-trait" name="attr_base-Intelligence" value="0"/></td> <td><input type="number" class="sheet-trait" name="attr_mod-Intelligence" value="0"/></td> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Intelligence [[@{base-Intelligence} + @{mod-Intelligence} + 1d10]]">Difficult</button></td> </tr> <tr> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Perception [[(@{base-Perception}*2) + @{mod-Perception} + 1d10]]">Perception</button></td> <td><input type="number" class="sheet-trait" name="attr_base-Perception" value="0"/></td> <td><input type="number" class="sheet-trait" name="attr_mod-Perception" value="0"/></td> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Perception [[@{base-Perception} + @{mod-Perception} + 1d10]]">Difficult</button></td> </tr> <tr> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Willpower [[(@{base-Willpower}*2) + @{mod-Willpower} + 1d10]]">Willpower</button></td> <td><input type="number" class="sheet-trait" name="attr_base-Willpower" value="0"/></td> <td><input type="number" class="sheet-trait" name="attr_mod-Willpower" value="0"/></td> <td><button type='roll' class="sheet-trait_roll" value="/e rolls Willpower [[@{base-Willpower} + @{mod-Willpower} + 1d10]]">Difficult</button></td> </tr> </table> We can actually keep much of the existing code, albeit, replacing <table>, <tr>, and <td> tags with divs. A good tip with something like this, is to provide some classes at the same time, just to allow us to come back and style these at a later date if we want. <h3 class="sheet-center">Primary Attributes</h3> <div class="sheet-center sheet-black"> <div class="sheet-table__row"> <div class="sheet-table__cell">Simple</div> <div class="sheet-table__cell">Trait</div> <div class="sheet-table__cell">Modifier</div> </div> <div class="sheet-table__row"> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Strength [[(@{base-Strength}*2) + @{mod-Strength} + 1d10]]">Strength</button></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Strength" value="0"/></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Strength" value="0"/></div> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Strength [[@{base-Strength} + @{mod-Strength} + 1d10]]">Difficult</button></div> </div> <div class="sheet-table__row"> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Dexterity [[(@{base-Dexterity}*2) + @{mod-Dexterity} + 1d10]]">Dexterity</button></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Dexterity" value="0"/></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Dexterity" value="0"/></div> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Dexterity [[@{base-Dexterity} + @{mod-Dexterity} + 1d10]]">Difficult</button></div> </div> <div class="sheet-table__row"> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Constitution [[(@{base-Constitution}*2) + @{mod-Constitution} + 1d10]]">Constitution</button></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Constitution" value="0"/></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Constitution" value="0"/></div> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Constitution [[@{base-Constitution} + @{mod-Constitution} + 1d10]]">Difficult</button></div> </div> <div class="sheet-table__row"> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Intelligence [[(@{base-Intelligence}*2) + @{mod-Intelligence} + 1d10]]">Intelligence</button></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Intelligence" value="0"/></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Intelligence" value="0"/></div> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Intelligence [[@{base-Intelligence} + @{mod-Intelligence} + 1d10]]">Difficult</button></div> </div> <div class="sheet-table__row"> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Perception [[(@{base-Perception}*2) + @{mod-Perception} + 1d10]]">Perception</button></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Perception" value="0"/></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Perception" value="0"/></div> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Perception [[@{base-Perception} + @{mod-Perception} + 1d10]]">Difficult</button></div> </div> <div class="sheet-table__row"> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Willpower [[(@{base-Willpower}*2) + @{mod-Willpower} + 1d10]]">Willpower</button></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Willpower" value="0"/></div> <div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Willpower" value="0"/></div> <div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Willpower [[@{base-Willpower} + @{mod-Willpower} + 1d10]]">Difficult</button></div> </div> </div> If we put this into our sheet sandbox, we'll see that the divs are all positioned stacked on top of each other: Obviously, this isn't what we want! So, the next thing to do is add some CSS styling to the row element, in order to get the fields back in order. This is where those classes we added earlier come in handy. We only need a very small amount of CSS here to get them back in line! div.sheet-table__row { display: grid; // This div's children should be displayed in a grid layout grid-template-columns: 1fr .5fr .5fr 1fr; // This defines the column widths } Adding this to our sheet sandbox puts us back in better stead! Side Note: The 'fr' unit in CSS is a really nifty feature. It's a fr actional unit, which allows you to end up with very neat ratios. This article does a super good job of explaining it. But you could also use percentages, pixels, or any other kind of unit that suits your cause. Hope this helps, and shows that it can be quite easy! Please check back in and let us know how you're doing and if you need any more assistance.
Oh wow!  Thanks for this Nic!  This will make it easier for me to get started on this.
Quick question: Where does the CSS code snippet go?  I don't see a specific section in the CSS file that seems relevant, and if I add it at the top or bottom of the CSS file, it basically strips formatting of several elements, removes the black background on the grid, and does not display the elements on a row.