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

Help with basics of character sheet CSS and HTML

November 10 (4 years ago)

Hi All,


So I've been tasked by my GM to design a character sheet for a game system he's been working on. I have a sheet I've worked on already but it needs re-designing.


Problem is, things are happening with the sheet that I don't quite understand.


First off, I have the following HTML:

<!DOCTYPE html>
<head>
    <title>Sheet Version 3</title>
</head>

<body>
<h2>Character Information</h2>
    <div class = "basicInfo">
     <div class = "basicName">
            Name: <input type="text" name="attr_charName" id="charName" style="width: 130px;">
        </div>
       
<div class = "basicGender">
        Gender:
<select name="attr_chaGenderList" id="chaGenderList">            
<option value="Male">Male</option>
        <option value="Female">Female</option>
        </select>
        </div>
       
<div class = "basicRace">
        Race:
<input name="attr_RACE" type="text" value="Human" id="txtRACE">
        </div>
       
    <div class = "basicLevel">   
                Level: <select name="attr_chaLevelList" id="chaLevelList">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                </select>
            </div>
           
           <div class = "basicProficiency">
             Proficiency: <input name="attr_ProfAmt" type="text" value = "0" id ="chaProfLvl">
            </div>
    </div>
</body>

Then, the matching CSS:

.basicInfo {
border: 2px solid #ddd;    
border-radius: 10px;
padding: 5px;
background-color: gray;
}

So from what I understand, this should cast a border around my entire div that contains all of these elements. However, this is what is displayed:

No border :(

Also, that greyish repeating background image shouldn't be there. I did use this in my other sheet but I'm starting fresh with this one. As you can see from both the HTML and the CSS above, there's no background image provided.

As for the CSS not making a border, am I not able to use class selectors? Would I need to use ID selectors or god forbid, element selectors?

If this turns out to be a simple thing, I apologise in advance. Currently learning the ropes.

November 10 (4 years ago)

Edited November 10 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator
  1. You're likely looking at the preview image, and that doesn't tell the whole truth, only by viewing the sheet in-game does it show 100% correctly. That grey background is a common occurrence with that.
  2. you have bunch of extra code in the html, that is completely wrong to have in sheets. Roll20 sheets have a bunch of quirk you need to read/learn about, you can't just use any HTML you come up with.

Read the documentation: https://wiki.roll20.net/Building_Character_Sheets

Start From these two:


Here is your HTML and CSS, cleaned up & corrected to work/be proper for Roll20:

<h2>Character Information</h2>
<div class="basicInfo">
<div class="basicName">
Name: <input type="text" name="attr_charName" style="width: 130px;">
</div>

<div class="basicGender">
Gender:
<select name="attr_chaGenderList">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>

<div class="basicRace">
Race:
<input name="attr_RACE" type="text" value="Human">
</div>

<div class="basicLevel">
Level: <select name="attr_chaLevelList">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>

<div class="basicProficiency">
Proficiency: <input name="attr_ProfAmt" type="text" value = "0">
</div>
</div>


.sheet-basicInfo {
border: 2px solid #ddd;    
border-radius: 10px;
padding: 5px;
background-color: gray;
}


November 10 (4 years ago)

This is a huge help. Thanks a tonne :)

November 11 (4 years ago)
Eric
Sheet Author

Also ... go to your Roll20 Home screen, click Custom Sheet Sandbox button, create a new sandbox and launch the game. In the Sheet Sandbox Tools window use the HTM and CSS buttons to load your files. Create a new character and open its char sheet.  Now you can edit your html/css files on your local computer (use a good editor like VS Code), and easily use the sandbox HTML/CSS buttons to load your changes and instantly see the results. Productivity goes straight up. Cheers.

November 11 (4 years ago)

The same i need them thanks so much