[Help] Custom Sheets - initial doubts

Hello guys! After creating some topics for questions resolved to start my sheet from scratch and take questions slowly. Below I left a scheme of how I want my file stay. My initial questions are: 1 - for each tag I have to have a class? 2 - I need to fill the css all tags or have as I determine a pattern? For example, the font size and color etc is the same for all fields of the record, I need to fill each tag with this information or have a way to merge them? 3 - The divs tag are mandatory? What are worth for? When to use or not use them?

my doubt, I realized that if I create a class for all labels, one for all ons text input and one for all the lists when I edit css this class all tags with the same class will suffer changes. Okay, that takes my doubt how to group the format many tags in one css field, but I need to change the position (top / left) of some labels, how can I do this in css if all the labels are in the same class ? You can set a deeper level specification for the css recognize each label of the same class to change their position separately?

1. You do not need a class for each tag; however, they do provide control over how the information is displayed 2. Not sure I understand the question. You can a single class for multiple tags if you want them to all have the same formatting. If you want multple classes to apply to a single tag, you would separate each class by a space. For example: <div class='sheet-class1 sheet-class2'>stuff</div> 3. Div tags are not mandatory, but they do help provide structure. You could also use table tags instead, but I have found I prefer to use div tags for anything that is not expressly a table. For example, if I were doing a Table of Contents, I would probably use the table tags, but otherwise, I tend to use divs now. You can create a single class for all labels, for all inputs, etc. You are correct, that if you change the CSS for a particular class, all elements that use that class will be affected. If you need to change the CSS for one particular field, but the class hits most of what you need, you can give the tag a class, and then add the style property (I think that's what they are called?—too lazy to look at the moment, sorry) inside the tag, and the style will override certain parts of the class. For example: <div class='sheet-class1' style='width: 30px;'>Stuff</div> In that example, the sheet-class1 class may have the width set to 100px, but by adding the style property, it forces the width to be 30px instead of 100px, but that div will inherit all of the other format specifications of sheet-class1. Not sure I understand your last question...

Finderski hello, my question is as follows: the HTML code below I have classes sheet-label-name, sheet-label-race. <Span class = "sheet-label-name"> <label for = "name"> Name: </ label> </ span> <Input class = "sheet-input-name" type = "text" name = "attr_nome" /> <Span class = "sheet-label-breed"> <label for = "race"> Breed: </ label> </ span> To save time in the css code I did so: sheet-label-race, .sheet-label-name { font-family: Palatino Linotype; font-size: 12px; } This source and this size will be the standard for the entire document, so as I'm creating a tag in HTML I insert it next to those in CSS. The point is that now I have to put the tag name in a specific position of the sheet, if I re-enter in the CSS .sheet-label-name but with the top parameters and left the CSS will work even having two .sheet-label-name described? .sheet-label-name { position = relative; top: 80px; left: 50px; } As I'm learning here in roll20 and searching the internet I do not know if this is the best way to handle it.

I managed to take my doubts about the tabs, divs and classes. My biggest question now is with conditional structures, for example: 1 - The speed varies according to race, I have a list of the races but do not know how to value the speed change as the player changes the race. 2 - The amount of skill is equal to the value of more points spent attribute, but when the character does not spend any point in the skill she should stay with a value of attribute -7 and do not know how to do this. Could someone help?

For the speed thing, your best bet will be to use a  Sheet Worker . I'm not very good at Sheet Workers, so someone better may need to help with that, but here's one you might be able to modify.  Assuming the Race input is a drop down menu, and that each race has a corresponding number for the value, and that the race input is named "attr_race" and the speed input is named "attr_speed", then this might work... <script type="text/worker"> //Set Rank according to the XP value on("change:race", function() { getAttrs(["race", "speed"], function(value) { //output to console the values (used for trouble shooting if necessary) console.log("race value: " + value.race); console.log("speed value: " + value.speed);       if (value.race === "1") {       console.log("Setting speed for Human");       setAttrs({speed: 5});       }       else if (value.race ==="2") {       console.log("Setting speed for Elf");       setAttrs({speed: 6});       }       else if (value.race ==="3") {       console.log("Setting speed for Gnome");       setAttrs({speed: 3});       }       else if (value.race ==="4") {       console.log("Setting speed for Halfling");       setAttrs({speed: 3});       }       else {       console.log("Setting speed for Orc");       setAttrs({speed: 5});       }     }); }); </script> You'd also want to set your speed input to be readonly. As for the skills...you'll likely need to use a Sheet Worker for that as well, but it might be easier if you can show us how your skills and attributes are set up. Meaning, if they are simple input boxes, why wouldn't this be left up to the player to enter, and if points aren't spent on the skill, they could simply roll the attribute with a -7 modifier?

Hello Finderski! Dude, thanks for the tip, I did not think this would be possible! I copied your code and made substitutions but unfortunately it did not work. The race is dropdown menu. The following code: <span><label for="raca">Raça:</label></span> <select name="attr_raca"> <option value="" selected> </option> <option value="1">Humano</option> <option value="2">Meio-elfo</option> <option value="3">Elfo Florestal</option> <option value="4">Elfo Dourado</option> <option value="5">Anão</option> <option value="6">Pequenino</option> </select> <span><label for="vb">Velocidade:</label></span> <input name="attr_vb" type="number" disabled="true"/> <script type="text/worker"> on("change:raca", function() { getAttrs(["raca", "vb"], function(value) { if (value.raca === "1") { setAttrs({vb: 18}); } else if (value.raca ==="2") { setAttrs({vb: 17}); } else if (value.raca ==="3") { setAttrs({vb: 16}); } else if (value.raca ==="4") { setAttrs({vb: 16}); } else if (value.raca ==="5") { setAttrs({vb: 14}); } else { setAttrs({vb: 12}); } }); }); </script>

Your attr_vb field needs to be "readonly" not "disabled." This code should work (at least it worked for me): <span><label for="raca">Raça:</label></span>             <select name="attr_raca">                 <option value="0" selected> </option>                 <option value="1">Humano</option>                 <option value="2">Meio-elfo</option>                 <option value="3">Elfo Florestal</option>                 <option value="4">Elfo Dourado</option>                 <option value="5">Anão</option>                 <option value="6">Pequenino</option>             </select> <span><label for="vb">Velocidade:</label></span>         <input  name="attr_vb" type="number"  readonly="true"/>         <script type="text/worker">                 on("change:raca", function() {             getAttrs(["raca", "vb"], function(value) {                   if (value.raca === "1") {                   setAttrs({vb: 18});                   }                   else if (value.raca === "2") {                   setAttrs({vb: 17});                   }                   else if (value.raca === "3") {                   setAttrs({vb: 16});                   }                   else if (value.raca === "4") {                   setAttrs({vb: 16});                   }                   else if (value.raca === "5") {                       setAttrs({vb: 14});                   }                   else {                   setAttrs({vb: 12});                   }                });             });         </script>  I hope this helps.

It worked perfectly, thank you, I am amazed at the possibilities of roll20

Finderski, I'm back with a problem. I created a repeating field using the <fieldset> tag, inside it has other tags (list, input and roll), these tags I managed to set the css them, however, do not know how to: 1 - reduce the blank space between a repeated field (1) and other (2) 2 - reduce the gap between the last field and + Add and Modify buttons 3 - change the format of the + Add and Modify buttons What class should I declare the CSS to be able to make the above changes? The code: HTML <span><label for="lingua">Língua:</label></span> <fieldset> <input value="0" type="number" name="attr_lingua"/> <select value="0" name="attr_tipo_lingua"/> <option value="" selected></option> <option value="m-set">Malês Setent.</option> <option value="m-cent">Malês Central</option> <option value="m-merid">Malês Merid.</option> <option value="leva">Leva</option> <option value="lud">Lud</option> <option value="eredri">Eredri</option> <option value="dant">Dantseniano</option> <option value="maranes">Maranês</option> <option value="runes">Runês</option> <option value="abad">Abadrim</option> <option value="plan">Planense</option> <option value="l-cestados">Cidades-Estados</option> <option value="l-mangue">Mangues</option> <option value="rub">Rúbeo</option> <option value="lazuli">Lazúli</option> <option value="l-barb">Bárbara</option> <option value="aktar">Aktar</option> <option value="dictio">Díctio</option> <option value="birso">Birso</option> <option value="l-pdesert">L. do deserto</option> <option value="lanta">Lanta</option> <option value="elfico">Élfico</option> <option value="v-pedra">Voz de Pedra</option> <option value="tessal">Tessaldar</option> <option value="kurng">Kurng</option> <option value="l-fada">Língua das fadas</option> <option value="l-dragao">L. dos dragões</option> <option value="marante">Marante</option> </select> <input value="@{intelecto}+@{lingua}" type="number" disabled="true "name="attr_total-lingua"/> <button type='roll' value='#Habilidade' name='roll_lingua'></button> </fieldset> CSS .sheet-label-ling{ position:relative; top:-160px; left:0px; } .sheet-list-ling{ position: relative; top: -170px; left:-50px; width:130px; } .sheet-input-ling{ position: relative; top: -175px; left:130px; } .sheet-input-total-ling{ position: relative; top: -175px; left:-5px; } .sheet-roll-ling{ position:relative; top: -205px; left:230px; }

Not sure if this will help, but make sure to assign a unique repeating class to your fieldset. &nbsp;ie &nbsp;&lt;fieldset class="repeating_FOO"&gt; where "FOO" is a unique name for that repeating section. &nbsp;This identifies the section to roll20 as repeating which implies certain functions.&nbsp; wiki ref: <a href="https://wiki.roll20.net/Building_Character_Sheets#Repeating_Sections" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Repeating_Sections</a>

Hello Vince! Good to see you here on the topic, from their tips to my "zombie Quarter" I've learned a lot, I'm able to make a sheet of full rpg. I followed his advice and managed to reposition the fields of fieldset, but for some reason the + Add and Modify buttons disappeared HTML &lt;span&gt;&lt;label for="lingua"&gt;Língua:&lt;/label&gt;&lt;/span&gt; &lt;fieldset&gt; &lt;input value="0" type="number" name="attr_lingua"/&gt; &lt;select value="0" name="attr_tipo_lingua"/&gt; &lt;option value="" selected&gt;&lt;/option&gt; &lt;option value="m-set"&gt;Malês Setent.&lt;/option&gt; &lt;option value="m-cent"&gt;Malês Central&lt;/option&gt; &lt;option value="m-merid"&gt;Malês Merid.&lt;/option&gt; &lt;option value="leva"&gt;Leva&lt;/option&gt; &lt;option value="lud"&gt;Lud&lt;/option&gt; &lt;option value="eredri"&gt;Eredri&lt;/option&gt; &lt;option value="dant"&gt;Dantseniano&lt;/option&gt; &lt;option value="maranes"&gt;Maranês&lt;/option&gt; &lt;option value="runes"&gt;Runês&lt;/option&gt; &lt;option value="abad"&gt;Abadrim&lt;/option&gt; &lt;option value="plan"&gt;Planense&lt;/option&gt; &lt;option value="l-cestados"&gt;Cidades-Estados&lt;/option&gt; &lt;option value="l-mangue"&gt;Mangues&lt;/option&gt; &lt;option value="rub"&gt;Rúbeo&lt;/option&gt; &lt;option value="lazuli"&gt;Lazúli&lt;/option&gt; &lt;option value="l-barb"&gt;Bárbara&lt;/option&gt; &lt;option value="aktar"&gt;Aktar&lt;/option&gt; &lt;option value="dictio"&gt;Díctio&lt;/option&gt; &lt;option value="birso"&gt;Birso&lt;/option&gt; &lt;option value="l-pdesert"&gt;L. do deserto&lt;/option&gt; &lt;option value="lanta"&gt;Lanta&lt;/option&gt; &lt;option value="elfico"&gt;Élfico&lt;/option&gt; &lt;option value="v-pedra"&gt;Voz de Pedra&lt;/option&gt; &lt;option value="tessal"&gt;Tessaldar&lt;/option&gt; &lt;option value="kurng"&gt;Kurng&lt;/option&gt; &lt;option value="l-fada"&gt;Língua das fadas&lt;/option&gt; &lt;option value="l-dragao"&gt;L. dos dragões&lt;/option&gt; &lt;option value="marante"&gt;Marante&lt;/option&gt; &lt;/select&gt; &lt;input value="@{intelecto}+@{lingua}" type="number" disabled="true "name="attr_total-lingua"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_lingua'&gt;&lt;/button&gt; &lt;/fieldset&gt; CSS .sheet-label-ling{ position:relative; top:-160px; left:0px; } .sheet-list-ling{ position: relative; top: -170px; left:-50px; width:130px; } .sheet-input-ling{ position: relative; top: -175px; left:130px; } .sheet-input-total-ling{ position: relative; top: -175px; left:-5px; } .sheet-roll-ling{ position:relative; top: -205px; left:230px; } .sheet-repeating_ling{ position: relative; top: 0px; left:0px; border: 1px solid; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-top-left-radius: 0.5em; border-top-right-radius:0.5em; border-left: 2px; border-right: 2px; }

Vince said: Not sure if this will help, but make sure to assign a unique repeating class to your fieldset. &nbsp;ie &nbsp;&lt;fieldset class="repeating_FOO"&gt; where "FOO" is a unique name for that repeating section. &nbsp;This identifies the section to roll20 as repeating which implies certain functions.&nbsp; wiki ref: <a href="https://wiki.roll20.net/Building_Character_Sheets#Repeating_Sections" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Repeating_Sections</a> Add a class name to your fieldset and your +Add and Modify will show up directly under the last repeating row. ie &lt;fieldset class="repeating_languages"&gt;

Looks like Vince hooked you up on one of your questions...as for changing the appearance of the +Add Button CSS: //This changes what the button says; you'd change the data-groupname= to whatever your repeating section is called. [data-groupname=repeating_skills] &gt; button.btn.repcontrol_add::after { content: " Non-core Skills"; } //This changes what the buttons look like .charsheet .repcontrol_add, //Changes how the +Add button looks .charsheet .repcontrol_edit, //Changes how the Edit button looks .charsheet .repcontrol_del { //Changes how the Delete button looks display: block; &nbsp; &nbsp; background: #000; &nbsp; &nbsp; color: white; &nbsp; &nbsp; /*text-shadow:0px 0px 2px #000,0px 0px 2px #000,0px 0px 2px #000;*/ &nbsp; &nbsp; box-shadow:none; &nbsp; &nbsp; /*float:left!important;*/ &nbsp; &nbsp; /*margin-bottom:0px;*/ &nbsp; &nbsp; font-size:0.9em; &nbsp; &nbsp; height:2.2em; }

Hello Finderski, your tip worked fine, but I have a hard time. Are two writing skills and language (Escrita and Língua in Portuguese), I managed to adjust the + add and modify written language but the buttons are now stuck below and can not fix them, should look like this: escrita +add modify lingua +add modify HTML &lt;span&gt;&lt;label for="escrita"&gt;Escrita:&lt;/label&gt;&lt;/span&gt; &lt;fieldset&gt; &lt;input value="0" type="number" name="attr_escrita"/&gt; &lt;select value="0" name="attr_tipo_escrita"/&gt; &lt;option value="" selected&gt;&lt;/option&gt; &lt;option value="m-set"&gt;Malês Setent.&lt;/option&gt; &lt;option value="m-cent"&gt;Malês Central&lt;/option&gt; &lt;option value="m-merid"&gt;Malês Merid.&lt;/option&gt; &lt;option value="leva"&gt;Leva&lt;/option&gt; &lt;option value="lud"&gt;Lud&lt;/option&gt; &lt;option value="eredri"&gt;Eredri&lt;/option&gt; &lt;option value="dant"&gt;Dantseniano&lt;/option&gt; &lt;option value="maranes"&gt;Maranês&lt;/option&gt; &lt;option value="runes"&gt;Runês&lt;/option&gt; &lt;option value="abad"&gt;Abadrim&lt;/option&gt; &lt;option value="plan"&gt;Planense&lt;/option&gt; &lt;option value="l-cestados"&gt;Cidades-Estados&lt;/option&gt; &lt;option value="l-mangue"&gt;Mangues&lt;/option&gt; &lt;option value="rub"&gt;Rúbeo&lt;/option&gt; &lt;option value="lazuli"&gt;Lazúli&lt;/option&gt; &lt;option value="l-barb"&gt;Bárbara&lt;/option&gt; &lt;option value="aktar"&gt;Aktar&lt;/option&gt; &lt;option value="dictio"&gt;Díctio&lt;/option&gt; &lt;option value="birso"&gt;Birso&lt;/option&gt; &lt;option value="l-pdesert"&gt;L. do deserto&lt;/option&gt; &lt;option value="lanta"&gt;Lanta&lt;/option&gt; &lt;option value="elfico"&gt;Élfico&lt;/option&gt; &lt;option value="v-pedra"&gt;Voz de Pedra&lt;/option&gt; &lt;option value="tessal"&gt;Tessaldar&lt;/option&gt; &lt;option value="kurng"&gt;Kurng&lt;/option&gt; &lt;option value="l-fada"&gt;Língua das fadas&lt;/option&gt; &lt;option value="l-dragao"&gt;L. dos dragões&lt;/option&gt; &lt;option value="marante"&gt;Marante&lt;/option&gt; &lt;/select&gt; &lt;input value="@{intelecto}+@{escrita}" type="number" disabled="true "name="attr_total-escrita"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_escrita'&gt;&lt;/button&gt; &lt;/fieldset&gt; &lt;span&gt;&lt;label for="lingua"&gt;Língua:&lt;/label&gt;&lt;/span&gt; &lt;fieldset&gt; &lt;input value="0" type="number" name="attr_lingua"/&gt; &lt;select value="0" name="attr_tipo_lingua"/&gt; &lt;option value="" selected&gt;&lt;/option&gt; &lt;option value="m-set"&gt;Malês Setent.&lt;/option&gt; &lt;option value="m-cent"&gt;Malês Central&lt;/option&gt; &lt;option value="m-merid"&gt;Malês Merid.&lt;/option&gt; &lt;option value="leva"&gt;Leva&lt;/option&gt; &lt;option value="lud"&gt;Lud&lt;/option&gt; &lt;option value="eredri"&gt;Eredri&lt;/option&gt; &lt;option value="dant"&gt;Dantseniano&lt;/option&gt; &lt;option value="maranes"&gt;Maranês&lt;/option&gt; &lt;option value="runes"&gt;Runês&lt;/option&gt; &lt;option value="abad"&gt;Abadrim&lt;/option&gt; &lt;option value="plan"&gt;Planense&lt;/option&gt; &lt;option value="l-cestados"&gt;Cidades-Estados&lt;/option&gt; &lt;option value="l-mangue"&gt;Mangues&lt;/option&gt; &lt;option value="rub"&gt;Rúbeo&lt;/option&gt; &lt;option value="lazuli"&gt;Lazúli&lt;/option&gt; &lt;option value="l-barb"&gt;Bárbara&lt;/option&gt; &lt;option value="aktar"&gt;Aktar&lt;/option&gt; &lt;option value="dictio"&gt;Díctio&lt;/option&gt; &lt;option value="birso"&gt;Birso&lt;/option&gt; &lt;option value="l-pdesert"&gt;L. do deserto&lt;/option&gt; &lt;option value="lanta"&gt;Lanta&lt;/option&gt; &lt;option value="elfico"&gt;Élfico&lt;/option&gt; &lt;option value="v-pedra"&gt;Voz de Pedra&lt;/option&gt; &lt;option value="tessal"&gt;Tessaldar&lt;/option&gt; &lt;option value="kurng"&gt;Kurng&lt;/option&gt; &lt;option value="l-fada"&gt;Língua das fadas&lt;/option&gt; &lt;option value="l-dragao"&gt;L. dos dragões&lt;/option&gt; &lt;option value="marante"&gt;Marante&lt;/option&gt; &lt;/select&gt; &lt;input value="@{intelecto}+@{lingua}" type="number" disabled="true "name="attr_total-lingua"/&gt; &lt;button type='roll' value='#Habilidade' name='roll_lingua'&gt;&lt;/button&gt; &lt;/fieldset&gt; CSS .sheet-label-esc{ position:relative; top:-160px; left:0px; } .sheet-list-esc{ position: relative; top: -170px; left:-50px; width:130px; } .sheet-input-esc{ position: relative; top: -175px; left:130px; } .sheet-input-total-esc{ position: relative; top: -175px; left:-5px; } .sheet-roll-esc{ position:relative; top: -175px; left:-5px; } .sheet-repeating_esc{ position:relative; top:-150px; left:0px; } .charsheet .repcontrol_add{ position:relative; top:-170px; left:0px; width:45px; border: 1px solid; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-top-left-radius: 0.5em; border-top-right-radius:0.5em; border-left: 2px; border-right: 2px; float:left; } .charsheet .repcontrol_edit{ position:relative; top:-170px; left:-15px; width:45px; border: 1px solid; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-top-left-radius: 0.5em; border-top-right-radius:0.5em; border-left: 2px; border-right: 2px; float:left; } .sheet-label-ling{ position:relative; top:-175px; left:-50px; } .sheet-list-ling{ position: relative; top: -170px; left:-50px; width:130px; } .sheet-input-ling{ position: relative; top: -175px; left:130px; } .sheet-input-total-ling{ position: relative; top: -175px; left:-5px; } .sheet-roll-ling{ position:relative; top: -175px; left:-5px; } .sheet-repeating_ling{ position:relative; top:-190px; left:0px; } div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4, input.sheet-tab5:checked ~ div.sheet-tab5, { display: block; } input.sheet-tab { width: 150px; height: 20px; position: relative; top: -70px; left: 6px; margin: -1.5px; cursor: pointer; z-index: 1; } input.sheet-tab::before { content: attr(title); border: solid 1px #a8a8a8; border-bottom-color: black; text-align: center; display: inline-block; background: #fff; width: 150px; height: 20px; font-size: 18px; font-family:Palatino Linotype; font-size: 18px; position:relative; border: 1px solid; border-bottom:none; border-top-left-radius: 0.5em; border-top-right-radius:0.5em; border-left: 1px; border-right: 1px; background-color: none; }

You must assign a unique class name for repeating fieldsets Thiago or you are going to have problems. &nbsp;ie &lt;fieldset class="repeating_FOO"... &nbsp;This may be what's causing your current issues.

So Vinci, in fact I declared a class for each fieldset, but for some reason when I copy and paste the code here it clear that part

Vince I tried to change the statement in css swapping .charsheet .repcontrol_add for .sheet-repeating_esc .repcontrol_add and .charsheet .sheet-repeating_esc .repcontrol_add, but in both cases did not solve the issue.