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

CSS styling not working on sheet, made in atom by non-roll20 user

1586402948

Edited 1586403015
Daniel S.
Pro
Sheet Author
Hi there. I've been learning some html and css, and hacking together a sheet. I got some help styling the sheet from my brother who codes for a living and is studying user experience, design, etc. It looks pretty neat, but I can't figure out why it won't work with any CSS styling in roll20. I've of course been reading around, looking at guides that talk about making sure to use .charsheet- and .sheet- or something, but can't seem to figure out what I'm missing. I'll keep trying, but maybe you guys can save me some time? Hoping to run a playtest with it tomorrow and been at it most of the day and week. I'll post the first table code here, and then the css after. Feel like it's likely something simple. Thanks for any help! HTML: &lt;html lang="en" dir="ltr"&gt; &nbsp; &nbsp; &lt;head&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset="utf-8"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;&lt;/title&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;link href=" <a href="https://fonts.googleapis.com/css2?family=Girassol&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=Girassol&amp;display=swap</a> " rel="stylesheet"&gt; &nbsp; &nbsp; &lt;/head&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- TABS HTML only --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- ATTRIBUTES --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="entiretable"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;table class="MsoNormalTable" width="240" align="left"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th colspan="2" class="firstATRrow"&gt;Physical&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th colspan="2" class="firstATRrow"&gt;Mental&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th colspan="2" class="firstATRrow"&gt;Derived&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumn"&gt;ST&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputArea"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_strength" placeholder="0" min="-5" max="5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumn"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; WP &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputArea"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="Standard" style="text-align: center;" align="center"&gt;&lt;input type="number" name="attr_willpower" style="" placeholder="0" min="-5" max="5"&gt;&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumnTotal" width="45"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="" style="text-align: center;" align="center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span style=""&gt;AP&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputAreaTotal"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_actionpoints" style=" font-weight: bold;" placeholder="4"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumn"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; AG &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputArea"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_agility" style=" font-weight: bold;" value="0" min="-5" max="5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumn" style=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; WT &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputArea"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="Standard" style="text-align: center;" align="center"&gt;&lt;input type="number" name="attr_wit" style=" font-weight: bold;" value="0" min="-5" max="5"&gt;&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumnTotal"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RF &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputAreaTotal"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_reflex" value="0" min="-10" max="10"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr style="height: 12.8pt;"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumn"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TG &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputArea"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_toughness" style=" font-weight: bold;" placeholder="0" min="-5" max="5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumn"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="Standard" style="text-align: center;" align="center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span &gt;PR&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputArea"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="Standard" style="text-align: center;" align="center"&gt;&lt;input type="number" name="attr_perception" style=" font-weight: bold;" placeholder="0" min="-5" max="5"&gt;&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumnTotal"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KN &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputAreaTotal"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!--removed &lt;p&gt; tag from this input and other input fields to fix formatting --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_knockdown" style=" font-weight: bold;" placeholder="0" min="-5" max="5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr class="" style=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumn" style=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SZ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputArea"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_size" style=" font-weight: bold;" placeholder="0" min="-6"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td style="" class="ATRcolumn"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; IN &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputArea"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_intelligence" style=" font-weight: bold;" placeholder="0" min="-5" max="5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumnTotal"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KO &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="inputAreaTotal"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class="" type="number" name="attr_knockout" style=" font-weight: bold;" placeholder="0" min="-5" max="5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr class="tablefooter1"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumnTotal "&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; PW &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" name="attr_power" style=" font-weight: bold;" placeholder="0"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumnTotal"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BD &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="Standard" style="text-align: center;" align="center"&gt;&lt;input type="number" name="attr_body" style=" font-weight: bold;" placeholder="0"&gt;&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="ATRcolumnTotal" id="move"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Move &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_movement" style=" font-weight: bold;" placeholder="5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/table&gt; &nbsp; &nbsp; &lt;/div&gt; CSS: .charsheet /* <a href="http://meyerweb.com/eric/tools/css/reset/" rel="nofollow">http://meyerweb.com/eric/tools/css/reset/</a> &nbsp; &nbsp;v2.0 | 20110126 &nbsp; &nbsp;License: none (public domain) &nbsp; &nbsp;CSS reset sheet to remove all default styling */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { &nbsp; &nbsp; margin: 0; &nbsp; &nbsp; padding: 0; &nbsp; &nbsp; border: 0; &nbsp; &nbsp; font-size: 100%; &nbsp; &nbsp; font: inherit; &nbsp; &nbsp; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { &nbsp; &nbsp; display: block; } .charsheet body { &nbsp; &nbsp; line-height: 1; &nbsp; &nbsp; background-color: #C5C3B6 } ol, ul { &nbsp; &nbsp; list-style: none; } blockquote, q { &nbsp; &nbsp; quotes: none; } blockquote:before, blockquote:after, q:before, q:after { &nbsp; &nbsp; content: ''; &nbsp; &nbsp; content: none; } table { &nbsp; &nbsp; border-spacing: 0; &nbsp; &nbsp; border-radius: 5px; &nbsp; &nbsp; border-style: solid; &nbsp; &nbsp; border: none; &nbsp; &nbsp; border-color: #352719; &nbsp; &nbsp; background-color: #DBD8CA; &nbsp; &nbsp; -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45); &nbsp; &nbsp; box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45); } /* END CSS STYLING RESET PAGE ------------------------------------------- */ .charsheet body { &nbsp; &nbsp; font-family: 'Girassol', cursive; &nbsp; &nbsp; font-size: 1.2em; } td { &nbsp; &nbsp; background: #F2F2F2; &nbsp; &nbsp; padding: 0in .5pt 0in .5pt; &nbsp; &nbsp; height: 12.8pt; } input { &nbsp; &nbsp; width: 80%; &nbsp; &nbsp; font-weight: 800; &nbsp; &nbsp; background: #352719; &nbsp; &nbsp; background-color: #FFFFFF; } .inputArea { &nbsp; &nbsp; background-color: #DBD8CA; } .inputAreaTotal { &nbsp; &nbsp; background-color: default; } .MsoNormalTable { &nbsp; &nbsp; margin: 1em; } .firstATRrow { &nbsp; &nbsp; font-size: 150%; &nbsp; &nbsp; font-weight: 200; &nbsp; &nbsp; padding: .4em; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; font-family: 'Girassol', cursive; } .secondATRrow {} .ATRcolumn { &nbsp; &nbsp; background-color: #DBD8CA; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; font-size: 110%; &nbsp; &nbsp; padding: .3em; } .ATRcolumnTotal { &nbsp; &nbsp; font-size: 110%; &nbsp; &nbsp; padding: .3em; &nbsp; &nbsp; background-color: #352719; &nbsp; &nbsp; color: #ffffff; &nbsp; &nbsp; text-align: center; } .spanTitle { &nbsp; &nbsp; font-size: 70%; } .attributeSpan { &nbsp; &nbsp; font-size: 100%; } .tablefooter1 { &nbsp; &nbsp; color: red; } #move { &nbsp; &nbsp; font-size: 100%; } © 2020 GitHub, Inc.
1586407023

Edited 1586441406
vÍnce
Pro
Sheet Author
Hi Daniel, it's awesome that you have taken the steps to try and code your own sheet!&nbsp; Three cheers for you!!! The way Roll20 handles html, css, and js for character sheets within the vtt is a little unique.&nbsp; There are numerous nuances that you must be aware of in order to write valid code useable for roll20's sheets.&nbsp; Make sure you have read&nbsp; Building Character sheets:&nbsp; <a href="https://wiki.roll20.net/Building_Character_Sheets#Restrictions" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Restrictions</a> . A quick read over this document should illuminate some issues in your code above.&nbsp; Example; - unlike a typical webpage, you do not need to include &lt;html&gt;,&lt;head&gt;, &lt;body&gt;, etc.&nbsp; So you can remove those. - all css class names need to include ".sheet-" in order for them to be recognized by the vtt. ie&nbsp;.inputArea {...} should be .sheet-inputArea {...}&nbsp; Note that you don't need to include ".sheet-" in the html because roll20 will automatically insert them when loading your sheet's html. - you cannot link to external style sheet's on roll20.&nbsp; You simply include all your css in your css text file and/or use inline styling.&nbsp; So remove any reference in the html to external stylesheet. - I don't think you can use # in roll20's css (you also cannot use id since all player's in a game share the same sheet code).&nbsp; Just use a unique class name if needed. Have a read through the Building Character Sheets and adjust your html and css.&nbsp; Post back as you get stuck.&nbsp; Cheers
1586440378
Andreas J.
Forum Champion
Sheet Author
Translator
The Roll20wiki's version of the article is more complete than the link Vince shared.
1586447241

Edited 1586447287
Daniel S.
Pro
Sheet Author
Thanks for the specifics guys. I'll try those out. I've been having trouble translating those articles/deciphering them in regards to code I have so far. But I've combed through them many times. Perhaps I just need a better understanding of CSS overall. I'll check the new more thorough article, maybe that will help! Thanks again.
1586455597
Daniel S.
Pro
Sheet Author
Well I tried all those specifics. It seems to have done the trick. It appears that the #move basically broke all the css. Removing that makes the rest work, after adding .sheet- to all the .etc parts, and getting rid of the linking to files. I can't get the google fonts to work though unfortunately. If I put this: @import url('<a href="https://fonts.googleapis.com/css2?family=Girassol&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=Girassol&amp;display=swap</a>'); On the top of the html it just shows up as text. If I put it in the CSS it breaks all of it.
1586456596

Edited 1586456612
GiGs
Pro
Sheet Author
API Scripter
It goes at the top of your CSS file, and it should look like @import&nbsp;url('<a href="https://fonts.googleapis.com/css?family=Girassol&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Girassol&amp;display=swap</a>'); note the css? , not css2?
1586456778
Daniel S.
Pro
Sheet Author
I think I tried that. Maybe this specific font doesn't work or something if it's css2? Or I can try dropping the css2. I'll drop it in there again.
1586457334
Daniel S.
Pro
Sheet Author
Looks like that worked to import it. Not sure what step I did wrong or out of order, but thank you! It still worked when removing the css2 so that's good.