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

Cookie Preferences

We use Cookies to help personalize and improve Roll20. For more information on our use of non-essential Cookies, visit our Privacy Policy here.
Create a free account

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

  1. Community Forums
  2. Character Sheets & Compendium
  3. CSS styling not working on sheet, made in atom by non-roll20 user
April 09 (5 years ago)

Edited April 09 (5 years ago)
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Permalink for 8428289 Quote

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:

<html lang="en" dir="ltr">

    <head>

        <meta charset="utf-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="style.css"/>

        <link href="https://fonts.googleapis.com/css2?family=Girassol&display=swap" rel="stylesheet">


    </head>

        <!-- TABS HTML only -->


        <!-- ATTRIBUTES -->

        <div class="entiretable">

            <table class="MsoNormalTable" width="240" align="left">


                <tr>

                    <th colspan="2" class="firstATRrow">Physical</th>

                    <th colspan="2" class="firstATRrow">Mental</th>

                    <th colspan="2" class="firstATRrow">Derived</th>

                </tr>

                <tr>

                    <td class="ATRcolumn">ST</td>

                    <td class="inputArea">

                        <input type="number" name="attr_strength" placeholder="0" min="-5" max="5">

                    </td>

                    <td class="ATRcolumn">

                        WP

                    </td>

                    <td class="inputArea">

                        <p class="Standard" style="text-align: center;" align="center"><input type="number" name="attr_willpower" style="" placeholder="0" min="-5" max="5"></p>

                    </td>

                    <td class="ATRcolumnTotal" width="45">

                        <p class="" style="text-align: center;" align="center">

                            <span style="">AP</span>

                        </p>

                    </td>

                    <td class="inputAreaTotal">

                        <input type="text" name="attr_actionpoints" style=" font-weight: bold;" placeholder="4">

                    </td>

                </tr>

                <tr >

                    <td class="ATRcolumn">

                        AG


                    </td>

                    <td class="inputArea">

                        <input type="number" name="attr_agility" style=" font-weight: bold;" value="0" min="-5" max="5">

                    </td>

                    <td class="ATRcolumn" style="">

                        WT


                    </td>

                    <td class="inputArea">

                        <p class="Standard" style="text-align: center;" align="center"><input type="number" name="attr_wit" style=" font-weight: bold;" value="0" min="-5" max="5"></p>

                    </td>

                    <td class="ATRcolumnTotal">

                        RF

                    </td>

                    <td class="inputAreaTotal">

                        <input type="number" name="attr_reflex" value="0" min="-10" max="10">

                    </td>

                </tr>

                <tr style="height: 12.8pt;">

                    <td class="ATRcolumn">

                        TG

                    </p>

                </td>

                <td class="inputArea">

                    <input type="number" name="attr_toughness" style=" font-weight: bold;" placeholder="0" min="-5" max="5">

                </td>

                <td class="ATRcolumn">

                    <p class="Standard" style="text-align: center;" align="center">

                        <span >PR</span>

                    </p>

                </td>

                <td class="inputArea">

                    <p class="Standard" style="text-align: center;" align="center"><input type="number" name="attr_perception" style=" font-weight: bold;" placeholder="0" min="-5" max="5"></p>

                </td>

                <td class="ATRcolumnTotal">

                    KN

                </td>

                <td class="inputAreaTotal">

                    <!--removed <p> tag from this input and other input fields to fix formatting -->

                    <input type="number" name="attr_knockdown" style=" font-weight: bold;" placeholder="0" min="-5" max="5">

                </td>

            </tr>

            <tr class="" style="">

                <td class="ATRcolumn" style="">

                    SZ

                </td>

                <td class="inputArea">

                    <input type="number" name="attr_size" style=" font-weight: bold;" placeholder="0" min="-6">

                </td>

                <td style="" class="ATRcolumn">

                    IN

                </td>

                <td class="inputArea">

                    <input type="number" name="attr_intelligence" style=" font-weight: bold;" placeholder="0" min="-5" max="5">

                </td>

                <td class="ATRcolumnTotal">

                    KO

                </td>

                <td class="inputAreaTotal">

                    <input class="" type="number" name="attr_knockout" style=" font-weight: bold;" placeholder="0" min="-5" max="5">

                </td>

            </tr>


            <tr class="tablefooter1">

                <td class="ATRcolumnTotal ">

                    PW

                </td>

                <td >

                    <input type="number" name="attr_power" style=" font-weight: bold;" placeholder="0">

                </td>

                <td class="ATRcolumnTotal">

                    BD

                </td>

                <td>

                    <p class="Standard" style="text-align: center;" align="center"><input type="number" name="attr_body" style=" font-weight: bold;" placeholder="0"></p>

                </td>

                <td class="ATRcolumnTotal" id="move">

                    Move

                </td>

                <td>

                    <input type="text" name="attr_movement" style=" font-weight: bold;" placeholder="5">

                </td>

            </tr>


        </table>

    </div>


CSS:

.charsheet
   v2.0 | 20110126
   License: none (public domain)
   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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

.charsheet body {
    line-height: 1;
    background-color: #C5C3B6
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-spacing: 0;
    border-radius: 5px;
    border-style: solid;
    border: none;
    border-color: #352719;
    background-color: #DBD8CA;
    -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
    box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
}


/* END CSS STYLING RESET PAGE
-------------------------------------------
*/

.charsheet body {
    font-family: 'Girassol', cursive;
    font-size: 1.2em;
}

td {
    background: #F2F2F2;
    padding: 0in .5pt 0in .5pt;
    height: 12.8pt;
}

input {
    width: 80%;
    font-weight: 800;
    background: #352719;
    background-color: #FFFFFF;
}

.inputArea {
    background-color: #DBD8CA;
}

.inputAreaTotal {
    background-color: default;
}

.MsoNormalTable {
    margin: 1em;
}

.firstATRrow {
    font-size: 150%;
    font-weight: 200;
    padding: .4em;
    
    font-family: 'Girassol', cursive;
}

.secondATRrow {}

.ATRcolumn {
    background-color: #DBD8CA;
    text-align: center;
    font-size: 110%;
    padding: .3em;
}

.ATRcolumnTotal {
    font-size: 110%;
    padding: .3em;
    background-color: #352719;
    color: #ffffff;
    text-align: center;
}

.spanTitle {
    font-size: 70%;
}

.attributeSpan {
    font-size: 100%;
}

.tablefooter1 {
    color: red;
}

#move {
    font-size: 100%;
}
© 2020 GitHub, Inc.
April 09 (5 years ago)

Edited April 09 (5 years ago)
vÍnce
Pro
Sheet Author
Permalink for 8428554 Quote

Hi Daniel,

it's awesome that you have taken the steps to try and code your own sheet!  Three cheers for you!!!


The way Roll20 handles html, css, and js for character sheets within the vtt is a little unique.  There are numerous nuances that you must be aware of in order to write valid code useable for roll20's sheets. 


Make sure you have read 

Building Character sheets: https://wiki.roll20.net/Building_Character_Sheets#Restrictions. A quick read over this document should illuminate some issues in your code above. 


Example;

- unlike a typical webpage, you do not need to include <html>,<head>, <body>, etc.  So you can remove those.

- all css class names need to include ".sheet-" in order for them to be recognized by the vtt. ie .inputArea {...} should be .sheet-inputArea {...}  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.  You simply include all your css in your css text file and/or use inline styling.  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).  Just use a unique class name if needed.


Have a read through the Building Character Sheets and adjust your html and css.  Post back as you get stuck.  Cheers

April 09 (5 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator
Permalink for 8430127 Quote

The Roll20wiki's version of the article is more complete than the link Vince shared.

April 09 (5 years ago)

Edited April 09 (5 years ago)
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Permalink for 8430711 Quote

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.

April 09 (5 years ago)
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Permalink for 8431621 Quote

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('https://fonts.googleapis.com/css2?family=Girassol&display=swap');

On the top of the html it just shows up as text. If I put it in the CSS it breaks all of it.

April 09 (5 years ago)

Edited April 09 (5 years ago)
GiGs
Pro
Sheet Author
API Scripter
Permalink for 8431724 Quote

It goes at the top of your CSS file, and it should look like

@import url('https://fonts.googleapis.com/css?family=Girassol&display=swap');

note the css?, not css2?

April 09 (5 years ago)
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Permalink for 8431754 Quote

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.

April 09 (5 years ago)
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Permalink for 8431825 Quote

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.

You must Login to your Roll20 Account to post a reply.