Can div class="sheet-undertext" print variables?

Sheet Author

remove attr_ <div class="sheet-undertext"> (@{class}) Levels</div>

1581263123

Edited 1581263199

Thanks! Did that and have learned that I have failed to properly define the attribute to reference to apparently. I've tried a few different variations, and the odd thing is that it doesn't seem to break the dropdown menu I'm using for setting the value. <div class="sheet-header-block"> <div class="sheet-undertext">Class</div> <select class="sheet-long-text-input" type="text" name="attr_class"> <option type="text" name="archer" value="archer">Archer</option> <option type="text" value="attr_class">Beguiler</option> <option value="attr_class_druid">Druid</option> <option value="attr_class:guardian">Guardian</option> </select> </div> So that's the way I'm setting the class attribute in the first place (well, four examples of failed attempts), and somehow all four of those work as valid options for creating the dropdown menu, but none of them are seemingly changing the value of attr_class which is probably why it's still not working. I'm assuming I've completely failed to tell it what to do but since it's actually creating the dropdown menu properly, I'm not entirely sure where the problem lies. I'd attempted with type="number" before that, with several numeric values to try to get anything out of it, and that didn't go any better. Looking at example code for how to set an attribute, it shoooould work... Like looking at another piece of example code, <td> <select class="sheet-numbox" name="attr_acrobatics_prof"> <option value="0">0</option> <option value="floor(@{prof} / 2)">½P</option>         <option value="@{prof}">P</option> <option value="(2*@{prof})">2×P</option> </select> </td><td> +<input class="sheet-numbox" type="number" name="attr_acrobatics" value="@{acrobatics_prof}+@{dexterity_mod}" disabled="disabled"> </td> This code pulled from a D&D5e one which works, it looks like you should be able to just set an attribute by giving a dropdown option, selecting it, and the value="X" should be what it gets set to. I'm not sure if it's an issue with the example being a numbox instead of long-text-input but that seems like it's just the display field type is all and shouldn't affect the variable being set. Either way, I'm pretty sure I'm missing something important here, but I'm not sure what it is.

1581263832

Edited 1581264259

Sheet Author

The class attribute is a  reference to css accept in the case of repeating_sections. You do not need the name="archer" in the option nor the type really.  When an option is selected you reference it through the selected attribute.  You do not need sheet- in the class as it gets added automatically (you do need it in the css). Is class supposed to be a numeric value? <div class="sheet-header-block"> <div class="sheet-undertext">Class</div> <select class="long-text-input" type="text" name="attr_class"> <option value="Archer">Archer</option> <option value="Beguiler">Beguiler</option>                                         <option value="Druid">Druid</option> <option value="Guardian">Guardian</option> </select> </div>

1581264998

Aah, okay, so it's mostly there to tell the CSS how to stylize stuff then, but doesn't do much on its own normally. Okay, that's good to know. So if I get that right, then, it means once you specify it as attr_X then whichever option is selected under that is automatically set as the value of the attribute. That's useful to know so thanks! In this case, no, the class is just character class; unfortunately "class" is used for referencing other things. Perhaps I should name it something else so it doesn't get confused? Like cclass for combat-class to differentiate it so it doesn't risk getting mixed up with the classifications like long-text-input? It doesn't have to be set to a number for it to make use of it either, does it? Regardless, thank you a great deal for the help!

1581265223

Edited 1581265300

Sheet Author

Catreece M. said: Aah, okay, so it's mostly there to tell the CSS how to stylize stuff then, but doesn't do much on its own normally. Okay, that's good to know. So if I get that right, then, it means once you specify it as attr_X then whichever option is selected under that is automatically set as the value of the attribute. That's useful to know so thanks! In this case, no, the class is just character class; unfortunately "class" is used for referencing other things. Perhaps I should name it something else so it doesn't get confused? Like cclass for combat-class to differentiate it so it doesn't risk getting mixed up with the classifications like long-text-input? It doesn't have to be set to a number for it to make use of it either, does it? Regardless, thank you a great deal for the help! Class in the HTML tags have nothing to do with RPG classes. It will not get confused.

1581265284

Yeah, didn't think they did, just concerned if a variable is named "Class" it may confuse the two was all.

1581266019

Sheet Author

If you do need numeric values this should give you ahead start.  <input style="display:none" name="attr_ArcherVal" value="0.1"> <input style="display:none" name="attr_BeguilerVal" value="0.2"> <input style="display:none" name="attr_DruidVal" value="0.3"> <input style="display:none" name="attr_GuardianVal" value="0.4"> <div class="header-block"> <div class="undertext">Class</div> <select class="long-text-input" type="number" name="attr_classVal"> <option value="@{ArcherVal}">Archer</option> <option value="@{BeguilerVal}">Beguiler</option>                 <option value="@{DruidVal}">Druid</option>     <option value="@{GuardianVal}">Guardian</option> </select> </div> <input  disabled="true" value="[[@{classVal}]]" name="attr_classValx">

1581268477

That's a... really weird way to do that, but at least it means it's possible to set specific numeric values and call them. I've little doubt I'll find a way to make use of that so thanks! As far as I can tell there's no way to actually include if-then-else functions directly into the character sheet, though there must be at least some way to call a value other than just performing math upon it. Like if I were to set the class to Archer, then it should be possible to check that the value is archer and should update the options for the prestige classes dropdown menu to only be valid archer options. I've seen this done in at least the charactermancer for D&D5e, though the source code for that displays all on one line which makes it kind of useless for trying to read through if you're not sure what you're looking for already. Looking at what you have there, I think I can maybe use a sheet worker to pull the numeric value and to then set the options to values based on that as well? This seems like a really clunky way of handling such, so I'm wondering if there's a more elegant method of doing this that won't bog things down.

1581282498

Edited 1581282765

Forum Champion

Sheet Author

Translator

Building Character Sheets is a page you should absolutely read, and explains several Roll20-specific things about how html/css is handled, and links to other pages & resources related to this. I also suggest you look at more existing, functioning, character sheets to get a better idea of how things are constructed. [...] though the source code for that displays all on one line which makes it kind of useless for trying to read through if you're not sure what you're looking for already. You should use some online code formatter for reading source-code if i isn't in a readable format.

1581287482

Yep, been digging through existing sheets to try to figure out how to do stuff, and have several different pages open for the HTML5/CSS setup, along with the Roll20 wiki's stuff. There's just so much of it and if you're not sure what something is called and can't find an example of it, it's extremely slow to find it. It would reaaaaally help if the last time I had used HTML wasn't about 18 years ago or so. There's so much new stuff it's taking awhile to dig through the new functionality. Mostly I'm just getting frustrated when there are things I'm positive that must be possible but I have no idea what the function is even called to search for it, hence the asking for some specific things. Most of them I've been okay with, like I've already managed to pull apart and rebuild a table with multiple radial buttons and colour coded backgrounds for each button, so that took awhile but was totally doable! Still stumped on how to have one selection adjust the options in another selection though. Spent a few hours reading and testing stuff and kind of hit a wall when I realized I have no idea how to change the options, and none of the sheets I've looked at have done so. I know it's possible in the charactermancer, but it uses a bunch of different rules and the one that does what I want is one of the charactermancer-specific ones so I'm not sure if it's actually possible on normal character sheets or not, and not sure what to search for so blaaaah. Anyway, thank you for the suggestions of places to look! Doing faaairly well so far, just not as well as I'd like is all. Which is mostly my fault for not learning HTML5 first before trying to use this. To be fair, I didn't realize it used HTML5 and CSS until after I upgraded to pro and saw how it was set up. I was expecting it to be a lot more visual rather than done entirely through text/code. Not upset about it, just surprised is all.

1581291402

Edited 1581291748

Sheet Author

I almost certain you will not able to have one select change another.  For for security reasons sheet creators do not have access to  the normal way of  doing this. The only way I think it could be done say if you want a sub-class list based on the class chosen. You would to have a seperate select for each set of subclasses and  hide/unhide using a sheetworker on the class select and css. But I am more than likely wrong.

1581291598

Edited 1581291720

Sheet Author

Take a look at hidden sections here  <a href="https://wiki.roll20.net/CSS_Wizardry" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry</a>  and sheet workers here <a href="https://wiki.roll20.net/Sheet_Worker_Scripts" rel="nofollow">https://wiki.roll20.net/Sheet_Worker_Scripts</a>

1581293926

Edited 1581294333

Pro

Sheet Author

API Scripter

Your frustration is understandable, it is really tricky to get started. The best way to get help is to say exactly what you want for one specific task, and give the code that you've tried. People can then explain how to do that one thing. You learn a bit more, and can ask about the next thing. Like, you're asking about having something change something else, but that is too vague for us to give specific help. Tell us what should be changing and why (give game stats, the rule that is being implemented, and the html code you currently have set up), and we can likely tell you what needs to be done.

1581294044

Ah thanks, that would explain why I was having so much trouble with trying to find it. I guess people will just have to settle for typing it in manually. Kind of a nuisance, I'd rather hoped I could auto-fill most of the details in so they wouldn't have to. It's a little disappointing when I can get more functionality out of a PDF, even if it absolutely hated even trying to do some of the things I'd made the poor thing do. Still, it's a minor nuisance, nothing too bad. I'd been trying to look through the worker scripts, but the wizardry one I probably could reaaaaly use so thanks! All those extra functions and how to use them should be a godsend!

1581329875

Finderski

Pro

Sheet Author

Compendium Curator

Catreece M. said: Ah thanks, that would explain why I was having so much trouble with trying to find it. I guess people will just have to settle for typing it in manually. Kind of a nuisance, I'd rather hoped I could auto-fill most of the details in so they wouldn't have to. It's a little disappointing when I can get more functionality out of a PDF, even if it absolutely hated even trying to do some of the things I'd made the poor thing do. Still, it's a minor nuisance, nothing too bad. Actually, they may not need to, if you can give GiGs more information. As I understand your dilemma, you'd like a drop down with a list of classes to choose from. Then when a selection is made, have other fields pre-fill or be selected based on that class.  It sounds like you should be able to accomplish that with a sheet worker. To help construct the sheet worker, we'd need to know what are the list of classes, what are the additional fields that would be impacted by each class selection, do you have code (html and css) for the basic structure of the sheet for that class information, etc.  Once we know what we are working with, chances are we can help you.  GiGs is awesome with sheet workers, he just needs a little more to work with.

1581338214

Finderski said: Actually, they may not need to, if you can give GiGs more information. As I understand your dilemma, you'd like a drop down with a list of classes to choose from. Then when a selection is made, have other fields pre-fill or be selected based on that class.  It sounds like you should be able to accomplish that with a sheet worker. To help construct the sheet worker, we'd need to know what are the list of classes, what are the additional fields that would be impacted by each class selection, do you have code (html and css) for the basic structure of the sheet for that class information, etc.  Once we know what we are working with, chances are we can help you.  GiGs is awesome with sheet workers, he just needs a little more to work with. Oh, that's good then! Alright, so the initial test I was trying to do was to see if I could have it change the options on other fields. If I could get it to do that, then I'd try to get into the more messy stuff later on like adding to a skill page anything you get by default for the class. I don't think I'm going to go that far right now, I'd more like basic functionality to start with and worry about fancy stuff once the basics work. To give a few specifics for this case though, there are 12 classes, each having 3 specializations and 3 prestige classes unique to such. Ideally, once you select a base class, it would update the dropdown options for the specialization and prestige options to only show the valid options. There a bunch of other things I'd like to do with that later on, but for now understanding the basics is the most important step. So here's the other information for an idea of what this would look like: <div class="header-block"> <div class="undertext">Class</div> <select class="long-text-input" type="text" name="attr_baseclass"> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option>                 <option value="druid">Druid</option>     <option value="guardian">Guardian</option> <option value="maestro">Maestro</option> <option value="mage">Mage</option>                               <option value="rectora">Rectora</option>      <option value="pugilist">Pugilist</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker</option>                  <option value="summoner">Summoner</option>      <option value="warrior">Warrior</option> </select> </div> That I was able to do without any real problems. It creates a dropdown for your base class, select it from the list, yay. You can change classes later on so eventually I'll need to be able to have like a button or some method of that adding the selected class to a list on the sheet, but it's not that important at the moment. Next off, the theory would go that this would have a similar set of options for a given class, so a similar dropdown for specialization, and a third for prestige classes. <div class="header-block"> <div class="undertext">Specialization</div> <select class="long-text-input" type="text" name="attr_archerspec1"> <option value="patient">The Patient Hunter</option> <option value="biting">Biting Wind</option>                 <option value="kindred">Kindred Spirit</option> </select> </div> <div class="header-block"> <div class="undertext">Specialization</div> <select class="long-text-input" type="text" name="attr_beguilerspec1"> <option value="curse">Curses & Toxins</option> <option value="illusion">Illusion</option>                 <option value="distortion">Distortion</option> </select> </div> Specifically, once you complete a specialization you can pick a new one afterward, so the attribute would have to be attr_archerspec1 to differentiate from a second or third spec gained later on. It doesn't really matter for the moment, but I'd implement it that way now to save myself trouble later on so I don't have to change a ton of variable names in the future. Two example sets should be enough to see if it works to switch back and forth between them anyway. One question while I think of it, being the "illusion" and "curse" option values, do those set the attribute of beguilerspec1 to those values, or do they count as attributes of their own? Since I'd probably need to set up illusion and curses as attributes later on for spells, and I'm not sure how the information is being organized fully from just looking at it. I think they're just the text value of the beguilerspec1 attribute, not their own, independent attributes, so I should be able to have separate attr_illusion and attr_curse variables later on, but best to check now before it breaks everything. Anyway, same idea though, prestige classes work in a very similar way to specializations, both modify the base class by giving it extra abilities. The specific details would be your base class goes from 1-20, at level 1 you pick a specialization which gains levels at the same rate up to 10, so 1-10 is spec1. At level 11, you get a second specialization after the first is completed, and your first prestige class, so 11-20 is 1-10 for spec2 and prestige1. Though you cap out on your base class at 20, you can keep gaining character levels so could keep mastering all the specializations and prestige classes if you really wanted to, or could change to a new base class at 10 or 20 and pick a new specialization and eventually prestige there as well. It's meant to allow for indefinite growth over time for multiple campaigns if you want to keep a character around that you like. You don't really get much stronger after the level 20 cap, mostly it just gives you greater versatility. Sorry, a bit too much information probably, but it's for future reference since eventually I'll be trying to model that into the character sheet, but it's not really a necessity at the moment. So yeah, the prestige stuff, same concept. <div class="header-block"> <div class="undertext">Prestige</div> <select class="long-text-input" type="text" name="attr_archerprest1"> <option value="none">None</option> <option value="prism">Prism</option> <option value="woodwaen">Woodwaen</option>                 <option value="ballistae">Ballistae</option> </select> </div> <div class="header-block"> <div class="undertext">Prestige</div> <select class="long-text-input" type="text" name="attr_beguilerprest1"> <option value="none">None</option> <option value="weaver">Weaver</option> <option value="mesmer">Mesmer</option>                 <option value="oracle">Oracle</option> </select> </div> That would at least give the prestige dropdowns to choose from, I'm just not sure how to use a sheet worker to actually tell it to change which one to look at. I assume it would somehow involve changing something like the attr_archerprest1 to attr_beguilerprest1 and having that attribute change update the option values that are available, but reading through the sheet worker page of the wiki hasn't really made it clear how to do that yet. It's probably clear to someone who knows what they're doing, but it's definitely going over my head currently. Anyway, probably too much information, but hopefully it gives you everything you need to understand where I'm eventually going with this and what my current goals are. TL: DR - setting class to "archer" on the dropdown should change the specialization dropdown to have the options "Patient Hunter" "Biting Wind" and "Kindred Spirit" as the only choices shown. Anything else past that, I'll deal with later. As long as I can get it to update information at all, it should be fine. I also just discovered, while writing this, that apparently the preview doesn't actually run the sheet workers... so I may have actually had something working previously, didn't realize it, and threw it out. That... kinda sucks. It would have been nice to have known that. At least I now know for the future.

1581340869

GiGs said: Your frustration is understandable, it is really tricky to get started. The best way to get help is to say exactly what you want for one specific task, and give the code that you've tried. People can then explain how to do that one thing. You learn a bit more, and can ask about the next thing. Like, you're asking about having something change something else, but that is too vague for us to give specific help. Tell us what should be changing and why (give game stats, the rule that is being implemented, and the html code you currently have set up), and we can likely tell you what needs to be done. Oof, missed your post entirely as well, sorry about that! Thank you very much for that advice as well. In the future I'll try to give an overabundance of information to make it easier on everyone! And yeah, definitely finding it hard to know where to get started. I mostly picked a few basic sheets that were on github so I could see how they did different tasks. Not all sheets do everything I want though, and some I haven't found examples of yet. The wiki is... clearly written for someone who is already familiar with the programming languages in use, only really saying what's different in the roll20 version, but not specifying what it would look like normally, nor providing clear examples. I'm finding a lot of the examples are like (insert a function here) and if I'm not sure which functions would be valid or the syntax for it, it's not really useful to me without a ton more research trying to figure out which functions exist and would do what I want. It's the kind of thing that, once I'm done figuring out all of this and have some free time, I'm sorely tempted to go back and either make a video or fix the wiki to actually be useful to new people. That's probably going to be awhile though. Anyway, my previous post above this one gives far more information and details of explicitly what I'm trying to do right this moment, and what I will be aiming for in the future, so hopefully that'll help!

1581342776

Edited 1581344280

Pro

Sheet Author

API Scripter

Some of what you are trying to do here isn't possible (in the way you expect - dont lose hope) on roll20: for security reasons, we have no ability to alter the contents of drop downs. Two examples: To give a few specifics for this case though, there are 12 classes, each having 3 specializations and 3 prestige classes unique to such. Ideally, once you select a base class, it would update the dropdown options for the specialization and prestige options to only show the valid options. On other websites, you'd be able to dynamically update the contents of a dropdown, and put anything you want in there. But as david said earlier, in roll20, we cannot change a drop down in anyway (except to select from options created by the sheet designer). What you can do, though, is have multiple separate dropdowns, each with their own contents. By default, they'd be hidden (using the CSS rule display:none) , and selection in your first dropdown sets which other dropdowns become visible. You do this using CSS rules. You need one tweak to your initial dropdown:                 <div class="header-block"> <div class="undertext">Class</div>                         <input type="hidden" name="attr_baseclass" class="toggle-prestige"> <select class="long-text-input" type="text" name="attr_baseclass"> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option>                 <option value="druid">Druid</option>     <option value="guardian">Guardian</option> <option value="maestro">Maestro</option> <option value="mage">Mage</option>                               <option value="rectora">Rectora</option>      <option value="pugilist">Pugilist</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker</option>                  <option value="summoner">Summoner</option>      <option value="warrior">Warrior</option> </select> </div> Notice the addition of a hidden input. When you want to use CSS to alter the appearance of a sheet based on an attributes values, you need to use a hidden input. Notice the type="hidden" and the fact that it's name is identical to the select. The user selects something, the input gets that value, and CSS responds to the inputs class and value. CSS rules often are reliant on the class of the input, so I've added a class="toggle-prestige". Then for your prestige dropdown, you need to give it a unique class that CSS can operate on.                  <div class="header-block prestige-archer"> <div class="undertext">Prestige</div> <select class="long-text-input" type="text" name="attr_archerprest1"> <option value="none">None</option> <option value="prism">Prism</option> <option value="woodwaen">Woodwaen</option>                 <option value="ballistae">Ballistae</option> </select> </div> <div class="header-block prestige-beguiler"> <div class="undertext">Prestige</div> <select class="long-text-input" type="text" name="attr_beguilerprest1"> <option value="none">None</option> <option value="weaver">Weaver</option> <option value="mesmer">Mesmer</option>                 <option value="oracle">Oracle</option> </select> </div> In the CSS, you'd have something like the following two rules div.sheet-prestige-archer, div.sheet-prestige-beguiler {         display:none; } input[value="archer"].sheet-toggle-prestige ~ div.sheet-prestige-archer, input[value="beguiler"].sheet-toggle-prestige ~ div.sheet-prestige-beguiler {     display: inline-block; } Notice the CSS classes are directly from the html code above. The first rule hides each section, and the second rule checks the value of the input with the matching class name (toggle-prestige), and for the one with matching value, makes visible the div with the matching class. Anyway, same idea though, prestige classes work in a very similar way to specializations, both modify the base class by giving it extra abilities. The specific details would be your base class goes from 1-20, at level 1 you pick a specialization which gains levels at the same rate up to 10, so 1-10 is spec1. At level 11, you get a second specialization after the first is completed, and your first prestige class, so 11-20 is 1-10 for spec2 and prestige1.  For your second prestige class, you'd have a second copy of all the sections above, with slightly altered class names to make them unique. You could also put this second set all in a single div, and have that entire thing hidden until the characters level reaches 11.

1581342909

Pro

Sheet Author

API Scripter

Note that for the prestige class names, you might instead use <div class="header-block prestige-archer"> <div class="undertext">Prestige</div> <select class="long-text-input" type="text" name="attr_prestige1"> <option value="none">None</option> <option value="prism">Prism</option> <option value="woodwaen">Woodwaen</option>                 <option value="ballistae">Ballistae</option> </select> </div> <div class="header-block prestige-beguiler"> <div class="undertext">Prestige</div> <select class="long-text-input" type="text" name="attr_prestige1"> <option value="none">None</option> <option value="weaver">Weaver</option> <option value="mesmer">Mesmer</option>                 <option value="oracle">Oracle</option> </select> </div> They probably dont need to be unique. It'll be easier to access them in code if you use a standard name. If characters can only pick one prestige for levels 1-10, and a second at 11+, it's better to use names of this form. 

1581343058

Pro

Sheet Author

API Scripter

Catreece M. said: Thank you very much for that advice as well. In the future I'll try to give an overabundance of information to make it easier on everyone! You do have to use a little judgement :) Giving too much information can make it difficult to help (and most of us wont have time to read through really long posts and code, it'll put people off). But in my experience, people give too little information way more often than they give too much.

1581344951

Edited 1581345555

Forum Champion

Sheet Author

Translator

Catreece M. said: [...] The wiki is... clearly written for someone who is already familiar with the programming languages in use, only really saying what's different in the roll20 version, but not specifying what it would look like normally, nor providing clear examples. I'm finding a lot of the examples are like (insert a function here) and if I'm not sure which functions would be valid or the syntax for it, it's not really useful to me without a ton more research trying to figure out which functions exist and would do what I want. It's the kind of thing that, once I'm done figuring out all of this and have some free time, I'm sorely tempted to go back and either make a video or fix the wiki to actually be useful to new people. That's probably going to be awhile though. Well, you're basically correct that it's written in a way that assumes you get to know the basics of HTML/CSS elsewhere, not trying to duplicate information that is abundant and better presented elsewhere. Over the last two years I've revised and improved the article, migrating some advanced stuff to other pages to keep the core of the article for the basic stuff. My focus have always been to write out the myriad of poorly/undocumented parts of how Roll20 character sheets function, rather than try to do a general HTML/CSS guide when far better resources exists elsewhere. I can tell you that when I started learning this stuff, the article was borderline useless to me, and can't really be compared to how it looks today. You're warmly welcome to expand on the existing articles and create new ones, and I agree that a basic HTML and CSS guide could be a good idea, and it would likely be best made as a separate article meant to be read before the main BCS page. GiGs said: [..] But in my experience, people give too little information way more often than they give too much. So much this. Some eveneing I just make a driveby on threads and ask the questions and leave solving/troubleshooting for others, knowing that my question have made the process quicker.

1581361835

GiGs said: Some of what you are trying to do here isn't possible (in the way you expect - dont lose hope) on roll20: for security reasons, we have no ability to alter the contents of drop downs... On other websites, you'd be able to dynamically update the contents of a dropdown, and put anything you want in there. But as david said earlier, in roll20, we cannot change a drop down in anyway (except to select from options created by the sheet designer). What you can do, though, is have multiple separate dropdowns, each with their own contents. By default, they'd be hidden (using the CSS rule display:none) , and selection in your first dropdown sets which other dropdowns become visible. You do this using CSS rules. Aaah, I see! Thank you very much for being so clear on this! I did something really similar with the first character sheet attempt using PDFs, basically a bunch of hidden information which got displayed upon clicking buttons or on mouse rollovers, though... PDFs apparently were never meant to do that and they kind of had a hissy fit about having a few hundred layers of that going on for some reason. Can't possibly imagine why. The way you described it makes sense, so this is good! I didn't even know you could make unique classifications, I figured they were from a pre-set list only, so I may have gone for ages before I caught onto that. Hrm. So for the level restriction, basically the prestige dropdown itself would be hidden unless like attr_classlevel > 10. Hrm... so it'd need a sheet worker to check when the attr_baseclass changes, and when it does to modify it from hidden to visible. Looking through the sheet worker scripts I'm not entirely sure how the syntax works. I sort of almost get it, but I'm not quite certain the specifics. Like... on ( "change:baseclass" , function () { getAttrs ([ "baseclass" ], function (values) { //I assume I tell it to somehow check the math of the attr_baseclass to check if it's > 10, but not sure how       function(type) {         //This should now change the type from "hidden" to... not hidden? Shown? I assume toggle would make the most sense, but again not sure how to write that         } }); }); Sorry if this is a bit super basic for questions, I'm not really sure of the syntax or specific commands to use yet and am not sure where to find examples of the currently. Like I'm sure they exist, but without knowing what I'm looking for I'm not even quite sure how to phrase the question to search for it. Hopefully this is in the goldilocks zone for information at least =P

1581362609

Andreas J. said: Well, you're basically correct that it's written in a way that assumes you get to know the basics of HTML/CSS elsewhere, not trying to duplicate information that is abundant and better presented elsewhere. Over the last two years I've revised and improved the article, migrating some advanced stuff to other pages to keep the core of the article for the basic stuff. My focus have always been to write out the myriad of poorly/undocumented parts of how Roll20 character sheets function, rather than try to do a general HTML/CSS guide when far better resources exists elsewhere. I can tell you that when I started learning this stuff, the article was borderline useless to me, and can't really be compared to how it looks today. You're warmly welcome to expand on the existing articles and create new ones, and I agree that a basic HTML and CSS guide could be a good idea, and it would likely be best made as a separate article meant to be read before the main BCS page. Thank you a ton then for what you have done so far! I can get the gist of a lot of it so far, so it's not totally useless, it's just like it'll give an example that's... not a functional example, which I don't know what to do with. An example from what I was grabbing for the previous post: on ( "change:strength" , function () { getAttrs ([ "Strength" , "Level" ], function (values) { //Do something with values.Strength and/or values[ "Level" ] }); }); For someone who understands what they're doing, this is fine, it tells you the way to phrase the sheet worker script, and gives an example of when you would use it. It doesn't show how to actually use it, however, and it's phrased a bit oddly. Like for my thoughts reading through this, I'm assuming Strength and Level are both attributes, but then the way it describes values.Strength and values[ "Level" ] as being written differently makes me question if they're even both attributes in the first place, and it doesn't show an example of how I would actually tell it to do something with the information once it's looking at them. This is presumably shown elsewhere, and assumed you wouldn't mess with the sheet worker until you know what you can do with it. This is obviously not how I'm learning though =P I'd probably just want to put in an actual example of it doing something, like get strength and level, then run a quick math comparison to see if strength is greater than (level -1), and if so, alter another attribute like attr_damagebonus to give +(values.Strength), basically a damage increase for your strength but only if your strength is equal to or greater than your level. Basically just a practical example of how it would actually look in practice would be handy! I'll try to go in and add some examples myself once I understand enough to confidently do so, but it'll probably be awhile. I don't even know how to write out the example currently (or if it's even possible, though I don't see any reason why not), so not happening yet. Soon though, hopefully, I can provide something of value in return for the wonderful help being offered! Anyway, thanks a ton again for the work you have done on such already! I dread to think of what it looked like before you got to it!

1581364038

Forum Champion

Sheet Author

Translator

I'm not great at sheetworkers so haven't touched anthing related to those articles, but GiGs have provided several more example that exists on the other Sheet Worker pages linked at the Sheet worker scripts page: <a href="https://wiki.roll20.net/Sheet_Worker_Scripts#See_Also" rel="nofollow">https://wiki.roll20.net/Sheet_Worker_Scripts#See_Also</a>

1581371146

Thanks for the links Andreas! That'll come in handy soon enough I'm sure! For now, I'm trying to get what GiGs had suggested earlier, and I've found all sorts of new and interesting ways to break things. On the plus side, I've learned that the header-block and sheet-form-group div classes specify ways to order displayed text, which I hadn't expected. That or there's a CSS rule in here in the base sheet I'm modifying that adjusts for such based on those classes. Probably a CSS rule for them, honestly. I'm sure this works with just building it from scratch, though I'm pretty certain I have a rule somewhere in the CSS which is preventing me from doing what I want, but I'm not sure where it is. The issue with taking a base sheet and trying to modify it, rather than starting with something fresh, being there's lots of parts that exist which I'm not sure what they're doing or what's affecting things currently. I've had both display at the same time, both trying to display overlapping each other somehow, only one displaying but not changing, and neither displaying. I'm at least learning a fair bit as I tweak things to see how they work, but it's awkward that it's not working since the explanation makes total sense and I can see how the parts "should" be interacting. Hrm... actually, I wiped everything with backups so I could test and... huh. Everything works except the second CSS part, which isn't triggering, not even in the game itself on an active character sheet. input[value="archer"].sheet-toggle-prestige ~ div.sheet-prestige-archer, input[value="beguiler"].sheet-toggle-prestige ~ div.sheet-prestige-beguiler { display:inline-block; } So maybe I did have it working otherwise, but it's not getting the message to turn back on and it seems to be with that snippet of code there. And I don't have nearly the knowledge yet to know what's wrong with it since it seems reasonable so far. If I understand this, it should be looking for an input on the sheet toggle-prestige, and if that input is archer, it'll tell it to do "something" to anything labeled as div with the class prestige-archer, and that something will be to set it to display as inline-block. I've been able to test the inline block display easily enough, not quite sure how to test the others yet without knowing more about the syntax. While trying to research this further, I've discovered you can do some other neat things like input[value^='archer'] input[value$='archer'] which would allow for accepting any value that starts with, or ends with, the thing in single-quotes, so like the former would allow for any input which would be like "archer 1" or "archer npc" but only the latter would see like "big archer" or "gnoll archer". These are neat and probably useful at some point, but I still have no idea why the inline-block display isn't working. All the specific parts look okay to me so far, but even on essentially a clean install test sheet, it's still not working, and it seems to be that second CSS rule at fault, but I'm not sure what's at fault with it.

1581371780

Scott C.

Forum Champion

Sheet Author

API Scripter

Compendium Curator

I'm assuming that your classes in the select are archer  and beguiler  not "archer"  and "beguiler" . This is important as the CSS selector you're using looks for everything after the equal sign and before the closing bracket in the value. So, right now your rule is looking for a value of "archer"  or "beguiler" . Try this css declaration: input[value=archer].sheet-toggle-prestige ~ div.sheet-prestige-archer, input[value=beguiler].sheet-toggle-prestige ~ div.sheet-prestige-beguiler { display:inline-block; } Also, what does your html for the section that should be displayed (including the .sheet-toggle-prestige input) look like?

1581377019

Scott C. said: I'm assuming that your classes in the select are archer  and beguiler  not "archer"  and "beguiler" . This is important as the CSS selector you're using looks for everything after the equal sign and before the closing bracket in the value. So, right now your rule is looking for a value of "archer"  or "beguiler" . Try this css declaration: input[value=archer].sheet-toggle-prestige ~ div.sheet-prestige-archer, input[value=beguiler].sheet-toggle-prestige ~ div.sheet-prestige-beguiler { display:inline-block; } Also, what does your html for the section that should be displayed (including the .sheet-toggle-prestige input) look like? Aah, that's handy to know. Tried taking that out, but still having issues, ah well. Still, here's the code you asked for: <div class="sheet-form-group"> <label>Base Class:</label> <input type="hidden" name="attr_baseclass" class="toggle-prestige">     <select class="long-text-input" type="text" name="attr_baseclass"> <option value="">Choose</option> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option> <option value="druid">Druid</option> <option value="guardian">Guardian</option> <option value="maestra">Maestra (Not Ready)</option> <option value="mage">Mage</option> <option value="rectora">Rectora</option> <option value="pugilist">Pugilist (Not Ready)</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker (Not Ready)</option> <option value="summoner">Summoner</option> <option value="warrior">Warrior (Not Ready)</option>     </select> <input type="hidden" name="attr_custom_class" class="sheet-field-toggle"> <input type="text" name="attr_cust_classname"> <label>Specialization:</label> <input type="text" name="attr_specialization"> <div class="prestige-archer"> <label>Prestige Class:</label> <select class="long-text-input" type="text" name="attr_archerprest1"> <option value="none">None</option> <option value="prism">Prism</option> <option value="woodwaen">Woodwaen</option> <option value="ballistae">Ballistae</option> </select> </div> <div class="prestige-beguiler">     <label>Prestige Class:</label> <select class="long-text-input" type="text" name="attr_beguilerprest1">     <option value="none">None</option> <option value="weaver">Weaver</option> <option value="mesmer">Mesmer</option> <option value="oracle">Oracle</option>     </select> </div> </div> Out of curiosity, why the ~ modifier anyway? I looked it up and it suggests it selects everything of a given target other than the first in the list, so wouldn't that skip over the entire thing if the class is only listed once? Testing with/without it doesn't seem to change anything so it doesn't look like it's the problem either way. It'd make sense if it were targeting the attr_baseclass to me, but the CSS is targeting the prestige-archer and prestige-beguiler classes instead, so wouldn't it be skipping over the first instance of those and there's no second instance to target? I'm assuming I'm misunderstanding how that works, but it doesn't seem to be the issue either way. I can definitely get it to make the prestige class dropdowns disappear with the CSS, and can make them not disappear in the first place by removing the first batch of CSS, namely: div.sheet-prestige-archer, div.sheet-prestige-beguiler { display:none; } If I comment that out, it doesn't hide them to start with, so that works fine. Not sure why it isn't selecting the target to display it again after is all. The triggering event of selecting a specific input looks correct, it should be looking to the unique class set (though the ~ says it should skip it? I dunno), and it should then set whichever one was targeted to inline-block display. So... everything looks like it should work. As for the "archer" thing, I tried it both with "archer" and archer in each combination of the CSS and HTML aspects, so quotes/noquotes, quotes/quotes, noquotes/noquotes, and noquotes/quotes, and none of them had an effect on it, so I'm not sure that's the issue.

1581396760

Pro

Sheet Author

API Scripter

Using the html you just posted and the following CSS, the prestige sections appear as needed div.sheet-prestige-archer, div.sheet-prestige-beguiler {          display:none; } input[value="archer"].sheet-toggle-prestige ~ div.sheet-prestige-archer, input[value="beguiler"].sheet-toggle-prestige ~ div.sheet-prestige-beguiler {      display:inline-block; } Scotts version also works div.sheet-prestige-archer, div.sheet-prestige-beguiler {          display:none; } input[value=archer].sheet-toggle-prestige ~ div.sheet-prestige-archer, input[value=beguiler].sheet-toggle-prestige ~ div.sheet-prestige-beguiler {      display:inline-block; } Remember you need to select either archer or beguiler in the dropdown - the others havent been set up. If this isnt working, there's another issue in your code. If you have a a syntax error before a section of CSS, it stops everything after it from working.

1581397033

Pro

Sheet Author

API Scripter

I'd suggest changing the html to make it clearer that something is changing, like so: <div class="sheet-form-group"> <label>Base Class:</label> <input type="hidden" name="attr_baseclass" class="toggle-prestige">     <select class="long-text-input" type="text" name="attr_baseclass"> <option value="" selected>Choose</option> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option> <option value="druid">Druid</option> <option value="guardian">Guardian</option> <option value="maestra">Maestra (Not Ready)</option> <option value="mage">Mage</option> <option value="rectora">Rectora</option> <option value="pugilist">Pugilist (Not Ready)</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker (Not Ready)</option> <option value="summoner">Summoner</option> <option value="warrior">Warrior (Not Ready)</option>     </select> <input type="hidden" name="attr_custom_class" class="sheet-field-toggle"> <input type="text" name="attr_cust_classname"> <label>Specialization:</label> <input type="text" name="attr_specialization"> <div class="prestige-archer"> <label>Archer Prestige Class:</label> <select class="long-text-input" type="text" name="attr_prestige1"> <option value="none" selected>None</option> <option value="prism">Prism</option> <option value="woodwaen">Woodwaen</option> <option value="ballistae">Ballistae</option> </select> </div> <div class="prestige-beguiler">     <label>Beguiler Prestige Class:</label> <select class="long-text-input" type="text" name="attr_prestige1">     <option value="none" selected>None</option> <option value="weaver">Weaver</option> <option value="mesmer">Mesmer</option> <option value="oracle">Oracle</option>     </select> </div> </div> There are three changes in the above code: added the class name to the Prestige Class label changed the attribute number for both prestige class sections to prestige1 (this will be a major benefit later on) added "selected" to one of the entries in each dropdown. This sets a default value - always a good idea when using selects in roll20, if you're planning to use sheet workers later. It ensure the attribute always has a value.

1581397166

Edited 1581397198

Pro

Sheet Author

API Scripter

I'm very happy to discuss sheet worker issues, but you should make a new thread for that, and keep this one for figuring out CSS issues. It's always best to start a new thread for each distinct problem or thing you want to understand, and describe what you want help with in the title (like you did, kind of, in this thread) so you can attract people who like answering those kinds of questions.

1581420761

GiGs said: Using the html you just posted and the following CSS, the prestige sections appear as needed Remember you need to select either archer or beguiler in the dropdown - the others havent been set up. If this isnt working, there's another issue in your code. If you have a a syntax error before a section of CSS, it stops everything after it from working. Yeah, it seems like everything shouuuuld work, hence why I'm so stumped. I'll try another clean wipe test in a bit today to see what's going on, with just those sections and nothing else so nothing can interfere with it. I had noticed the syntax error issue as well, since I discovered if you put other, incorrect directions in brackets it breaks the former section. Like I'm currently modifying the darker dungeons character sheet as a base starting point as it comes fairly close in a number of regards to what I'm trying to do, and have successfully changed over a few sections without issue. There are a few points I'm a bit iffy on still, but it seems to be mostly working. I'd wondered for a time if I hadn't selected the correct sections, so had tried actually just grabbing the CSS sheets which the particular section I'm working on references in the sheet, and tried enclosing the new code within the brackets to see if it was just not pointing to the right section, but this broke it immediately, and it took awhile to figure out it was breaking it rather than fixing it, because it was showing the dropdowns at the same time, because the hiding them function was breaking but it looked at first glance like it was the showing them part was being partially fixed. Looking at it now, I see why it was doing what it was doing. .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-logo { div.sheet-prestige-archer, div.sheet-prestige-beguiler { display:none; } input[value=archer].sheet-toggle-prestige ~ div.sheet-prestige-archer, input[value=beguiler].sheet-toggle-prestige ~ div.sheet-prestige-beguiler { display:inline-block;     } } I have a better understanding of why this didn't work at least now, whereas it was a mystery as to what that was doing at the start of yesterday. I'm not using the above attempt any longer (the inclusion of the .charsheet line) because I know it doesn't work now and why it doesn't, but wanted to include it as an example of what had seemed reasonable a day ago. Anyway, for the next bit! Remember you need to select either archer or beguiler in the dropdown - the others havent been set up. If this isnt working, there's another issue in your code. If you have a a syntax error before a section of CSS, it stops everything after it from working. Yep, definitely have that down, have been checking between them and sometimes doing different code for the two of them to see if one works and the other doesn't for quicker comparisons. That may be a problem but it doesn't look like it should be with how it's being done. There are three changes in the above code: added the class name to the Prestige Class label changed the attribute number for both prestige class sections to prestige1 (this will be a major benefit later on) added "selected" to one of the entries in each dropdown. This sets a default value - always a good idea when using selects in roll20, if you're planning to use sheet workers later. It ensure the attribute always has a value. Oh, shall try these! That last one's also a very good idea, I didn't see a default value for dropdowns in any of the ones I've seen examples of, so this sounds really like a good practice so thanks especially for that! I probably wouldn't have even noticed it otherwise. I'm very happy to discuss sheet worker issues, but you should make a new thread for that, and keep this one for figuring out CSS issues. It's always best to start a new thread for each distinct problem or thing you want to understand, and describe what you want help with in the title (like you did, kind of, in this thread) so you can attract people who like answering those kinds of questions. Good idea here as well, I tend to change direction and wander through multiple problems I run into in a row, so it's easy to lose track of when something needs a new distinct topic. I should hopefully be able to get this working on this next attempt, so going to test that now with another backup and a clean test environment. Thanks again for all the help from everyone in this thread, it's been very educational! (Even if I'm still breaking stuff =P )

1581421294

Whew, okay, so at long last, on a clean wipe this works, though it doesn't show up in the preview still, so that's a bit of a nuisance. Still, if I can confirm that this does work, it should be fine. Just need to restore the backup and integrate the updated version in and check over the differences, then confirm that works too. Which... it should. If it doesn't I shall apply head to desk a few times and go get some hot cocoa or something. Always good to have a plan, especially plans that involve chocolate somehow. Thanks again for your patience with this. Most likely I should be able to use the same methodology to get the specialization dropdowns working the same way.

1581422340

Edited 1581422970

Pro

Sheet Author

API Scripter

It sounds like you've discovered this, but nesting like this wont work on roll20 .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-logo { div.sheet-prestige-archer, div.sheet-prestige-beguiler { display:none; } input[value=archer].sheet-toggle-prestige ~ div.sheet-prestige-archer, input[value=beguiler].sheet-toggle-prestige ~ div.sheet-prestige-beguiler { display:inline-block;     } } There are situations in CSS - on other sites - where you can nest CSS inside CSS, but roll20 uses a limited model of whats available on the wider web. But also, nesting inside that specific set of classes would almost certainly not have worked. When you have classes seperated by spaces like this (and no other symbol between them, like ~) .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-logo { // some stuff here } it represents a hierarchy. It says do some stuff to any elements inside the  sheet-section-pc-header-logo , which must be inside the    .sheet-section-pc-header,  which itself must be inside the  .sheet-section-pc section, and that must be inside the  .sheet-darkerdungeons  section, all of which is inside the  .charsheet section. The left side is the top, everything to the right is inside that and at a progressively lower level in the hierarchy. So for your prestige classes to work they'd have to be inside the section-pc-header-logo section, at the bottom of that long chain of classes. Sometimes you have to use a chain of two or more classes like that to target the specific section you want on a sheet, but in practice, it's almost never necessary to get that specific. If that code is from a sheet on the repository, the writer probably went a bit overboard. Chances are this would have sufficed: .sheet-section-pc-header-logo { // some stuff here }

1581423326

Edited 1581423594

Forum Champion

Sheet Author

Translator

FYI, I just did a major updated on the Building Character Sheets -article.

1581423765

Pro

Sheet Author

API Scripter

Andreas J. said: FYI, I just did a major updated the Building Character Sheets -article. Nice work, from my perspective. Regarding checkbox and select default values, a preference of mine is to simply use selected  or checked  in place of  selected="selected" or  checked="true" . It would be nice to mention them both. 

1581423767

Forum Champion

Sheet Author

Translator

GiGs said: It sounds like you've discovered this, but nesting like this wont work on roll20 There are situations in CSS - on other sites - where you can nest CSS inside CSS, but roll20 uses a limited model of whats available on the wider web. You can start nesting your CSS classes if you start use SCSS as an intermediate, but then you'd need to compile your CSS from your SCSS-file each time.

1581424039

Forum Champion

Sheet Author

Translator

GiGs said: Nice work, from my perspective. Regarding checkbox and select default values, a preference of mine is to simply use selected  or checked  in place of  selected="selected" or  checked="true" . It would be nice to mention them both.  Wiki is all yours :D If those work, then the shorter notation is obviously preferred. Guess I've been so used to the longer notation that I haven't noticed that the shorter for also works.

1581424829

GiGs said: It sounds like you've discovered this, but nesting like this wont work on roll20 So for your prestige classes to work they'd have to be inside the section-pc-header-logo section, at the bottom of that long chain of classes. Sometimes you have to use a chain of two or more classes like that to target the specific section you want on a sheet, but in practice, it's almost never necessary to get that specific. If that code is from a sheet on the repository, the writer probably went a bit overboard. Chances are this would have sufficed: Thaaaaanks, I think that just answered what my next question was going to be before I was able to ask it. Or at least gave me enough information to figure it out. But yeah, it's from a sheet on the repository, but if that's not normally needed, that saves me a lot of confusion about what was going on with the long chains of specified stuff. Andreas J. said: FYI, I just did a major updated on the Building Character Sheets -article. Yes, yes you did. I still had the previous version open in a tab and can look between the two, and it's a pretty major change at that. The bit on the preview panel in particular and what it doesn't do is particularly handy now! The common mistakes bit is also pretty handy, especially directing people to the forums here. Hopefully that saves a bunch of other people headaches in the future! I'm definitely going to have to dig through the new complete examples as well, that's undoubtedly going to be extremely handy to have more reference points to work off of. So yeah, thanks a ton for this update!

1581427459

Edited 1581427537

Nupe, I still broke it. At least I got it to moooostly work. It's like 98% functional in regards to what I want now for this section at least! So here's the odd formatting issue I came up with. The top picture is unselected, tons of room to use, no problems. The bottom picture is what happens when I select something, like say the class, it pops up the specialization and prestige! (And dragons/nogitsune pop up their racial options now, yay!) but this runs into a problem where, instead of keeping it on the same line, the new dropdowns appear under their label. Aside from the squishing things down, which I could fix by just adjusting the size of the window, I'd rather maintain consistency so that they're either all below the label, or all beside the label. Either or works, though side by side would be better due to less space taken up, but I can't for the life of me figure out why it's doing it half and half. I assume it has to be in the CSS since that's mostly controlling the formatting, and they're all under the same umbrella div class of div class="sheet-form-body" so it shouldn't be affecting them differently, and each row is within the same div class="sheet-form-group" to organize them, so as far as I can tell, it works in theory but not in practice. I'm not sure if this is an issue related to having them be displayed only upon selection and therefore it doesn't know what to do with them, or what. I did notice that the pixel width of the specialization/prestige options changes based on archer/beguiler title, so it's definitely resizing things as it sets them to display rather than using a fixed column size, so that shouldn't be the problem. At least it technically works? Would love to get this one last aspect figured out though, and then I can probably do half the sheet without further issues. Then I'll find something else to break. =P

1581427952

Edited 1581428015

Pro

Sheet Author

API Scripter

What I would do there layout wise is have Base Class, Specialisation, and Prestige on the same row as headers, and have the selects on the row below them. That should make them easy enough to line up, and leave space for the second prestige class gained later. That class select is really wide, and doesnt need to be the wide.  You'll have to post your current CSS for us to give layout pointers. It is posisble to fix the size and position of various elements, but in CSS there are so many ways to do things, and they interact with other things, it's better if we can see what we're working with. I like the look of the sheet by the way, nice boundaries and colour scheme.

1581428328

Forum Champion

Sheet Author

Translator

Catreece M. said: Yes, yes you did. I still had the previous version open in a tab and can look between the two, and it's a pretty major change at that. The bit on the preview panel in particular and what it doesn't do is particularly handy now! The common mistakes bit is also pretty handy, especially directing people to the forums here. Hopefully that saves a bunch of other people headaches in the future! Both the "Preview Panel" and "Common Mistakes" sections already existed on the page. They where just near the bottom where people just don't find them, so this way of organizing the article should be much more helpful. Hopefully this will lead fewer cases of me post "this info is in the Building Character Sheets " and repeating myself... I'm definitely going to have to dig through the new complete examples as well, that's undoubtedly going to be extremely handy to have more reference points to work off of. Well, I only added one new example(Feast of Legends), that section already existed, as did the section on Character sheet Templates.

1581429103

GiGs said: What I would do there layout wise is have Base Class, Specialisation, and Prestige on the same row as headers, and have the selects on the row below them. That should make them easy enough to line up, and leave space for the second prestige class gained later. That class select is really wide, and doesnt need to be the wide.  You'll have to post your current CSS for us to give layout pointers. It is posisble to fix the size and position of various elements, but in CSS there are so many ways to do things, and they interact with other things, it's better if we can see what we're working with. I like the look of the sheet by the way, nice boundaries and colour scheme. Yeah, wanted to see what I should be listing for information before dumping a pile of code in was all. CSS it is, then! .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header { background: url("<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/5e%20Darker%20Dungeons/img/sheet-header-bg.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/5e%20Darker%20Dungeons/img/sheet-header-bg.png</a>"); background-size: 0% ; display: grid; grid-template-areas: auto; grid-template-columns: auto; grid-template-rows: auto; height: 141px; margin-bottom: 5px; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-name { display: flex; grid-area: name; padding: 5px; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-name input { flex-grow: 1; border: 0; color: #212121; font-size: 20px; font-weight: bold; margin: 0; padding: 0; text-align: center; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details { grid-area: details; overflow: hidden; padding: auto; position: relative; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-form { height: 110px; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-toggle-unchecked { height: 100%; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-form-body { display: flex; flex-direction: column; justify-content: space-around; padding: 2.5px; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-checkbox-cog { right: 35px; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-section-pc-header-details-panel { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 10px; height: 100%; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-section-pc-header-details-panel div { display: flex; flex-direction: column-reverse; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-section-pc-header-details-panel div input { border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid black; border-radius: 0; height: 19px; padding: 0; width: 100%; border-color: #cccccc; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-section-pc-header-details-panel div label { font-size: 9px; text-transform: uppercase; font-weight: bold; line-height: 1.5; color: #cccccc; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-logo { grid-area: logo; padding: 15px; text-align: center; } .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-logo div { background: url("<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/5e%20Darker%20Dungeons/img/sheet-logo-gdd.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/5e%20Darker%20Dungeons/img/sheet-logo-gdd.png</a>"); width: 219.84px; height: 52px; display: block; background-size: 0%; margin: 0 auto; } div.sheet-specialization-archer, div.sheet-specialization-beguiler { display:none; } input[value="archer"].sheet-toggle-specializationprestige ~ div.sheet-specialization-archer, input[value="beguiler"].sheet-toggle-specializationprestige ~ div.sheet-specialization-beguiler { display:inline-block; } div.sheet-prestige-archer, div.sheet-prestige-beguiler { display:none; } input[value="archer"].sheet-toggle-specializationprestige ~ div.sheet-prestige-archer, input[value="beguiler"].sheet-toggle-specializationprestige ~ div.sheet-prestige-beguiler { display:inline-block; } div.sheet-dragonraces, div.sheet-nogitsuneraces { display:none; } input[value="dragon"].sheet-toggle-speciesrace ~ div.sheet-dragonraces, input[value="nogitsune"].sheet-toggle-speciesrace ~ div.sheet-nogitsuneraces { display:inline-block; } Those are right after each other, the break's just for ease of identifying which parts are where and affecting what. Now, as stated this is basically cannibalizing a pre-made sheet that already existed and reworking specific details, so there's a lot of stuff in here that I'm not 100% sure how it works. I've tweaked and changed a fair bit, but what's governing those doesn't make a ton of sense currently. What I would do there layout wise is have Base Class, Specialisation, and Prestige on the same row as headers, and have the selects on the row below them. That makes reasonable sense, though I'm not entirely sure how to split those up. I have a guess at least, so will test that out in a moment and see if everything breaks horribly or not =P That class select is really wide, and doesnt need to be the wide. Yeah, it's obviously just set to fill all available space on the row. It wasn't nearly that wide when all of the parts were displaying at all times, but that's also why I kind of wanted them all on the same row, since there's plenty of room for all three labels and all three dropdown menus, which would keep it tidy and organized. It should probably be possible as well to set it to explicitly only have a fixed width for that particular selection menu, but since the CSS rules seem to be covering everything in really broad strokes, as in like everything within a specific class, I'm not sure entirely how to do that. I think it'd involve setting a rule for just that specific class="toggle-specializationprestige" (I updated it to specializationprestige to make it clear which things its controlling, works fine otherwise.)

1581431081

Andreas J. said: Both the "Preview Panel" and "Common Mistakes" sections already existed on the page. They where just near the bottom where people just don't find them, so this way of organizing the article should be much more helpful. Hopefully this will lead fewer cases of me post "this info is in the Building Character Sheets " and repeating myself... Well, I only added one new example(Feast of Legends), that section already existed, as did the section on Character sheet Templates. Whelp, if nothing else, organizing it that way definitely helps. I had been going through it from top to bottom in order, and getting hung up along the way. Having them in a place that's easier to find is helpful!

1581433214

Edited 1581434439

So... I've been tweaking things and accidentally did something unexpected. <div class="sheet-form-group"> <label>Base Class:</label> <div class="sheet-form-group-widthfix"> paired with... .charsheet .sheet-darkerdungeons .sheet-section-pc .sheet-section-pc-header .sheet-section-pc-header-details .sheet-form-body .sheet-form-group-widthfix { display: flex; flex-direction: column; justify-content: space-around; padding: 2.5px; width: 20%; } With these I was able to cut the width of the overly wide selections down. Yay! Then I moved the order of where that tag was since it looked like it was in the wrong spot. <div class="sheet-form-group"> <div class="sheet-form-group-widthfix">      <label>Base Class:</label> <input type="hidden" name="attr_baseclass" class="toggle-specializationprestige"> <select class="long-text-input" type="text" name="attr_baseclass"> It was not. In fact, that caused it to split off so the label is over top of the dropdown instead of beside it again. Okay... weird. Well, just revert that, do the same with the other two and it should... work? It does not. In fact, it broke more stuff, but commenting it out shows that's not the problem. Then I remove the new code, and everything breaks, the whole sheet borks. I replace it, it fixes what was wrong, but it's not letting the specialization/prestige dropdowns work any longer. I assume because it's listed under a new div class? I don't get why removing the extra bits would cause a break though since it was only one line of HTML and one piece of CSS, and commenting them out should revert it to exactly where it was before they were added. In fact, I can apparently no longer remove the widthfix line at all without it breaking everything, even when removing the... oh. Derp. It's a div, meaning there's a /div in there. Well that explains that. Anyway, ignore that bit I guess. At least you got to see me break and fix something, but it doesn't explain why it would break the dropdowns being shown. input[value="archer"].sheet-toggle-specializationprestige ~ div.sheet-specialization-archer, input[value="beguiler"].sheet-toggle-specializationprestige ~ div.sheet-specialization-beguiler { display:inline-block; } That part hasn't changed, it should still work. Which makes me wonder... <div class="sheet-form-group"> <label>Base Class:</label> <div class="sheet-form-group-widthfix"> <input type="hidden" name="attr_baseclass" class="toggle-specializationprestige"> <select class="long-text-input" type="text" name="attr_baseclass"> <option value="none" selected>Choose</option> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option> <option value="druid">Druid</option> <option value="guardian">Guardian</option> <option value="maestra">Maestra (Not Ready)</option> <option value="mage">Mage</option> <option value="rectora">Rectora</option> <option value="pugilist">Pugilist (Not Ready)</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker (Not Ready)</option> <option value="summoner">Summoner</option> <option value="warrior">Warrior (Not Ready)</option> </select> </div> Since this section is now located within a separate div /div tag set, does that somehow make it become invisible and need to be targeted separately in some way? EDIT: Also, an alternative possibility I thought of is it may be "displaying" them, but it's limiting that row to 20% of the width and just can't show them? I'm not really sure, but it still makes the specialization and prestige dropdowns and their labels get hidden, but can't show them again for some reason. Not sure why. EDIT2: Yep, with further testing, it's definitely the widthfix HTML line that's breaking things, but I have no idea why. It shouldn't be causing any issues? Commenting it and its /div tag out fixes stuff, but removes the nice formatting I had going on. I don't know why it prevents the spec/prestige dropdowns from being set back to display as inline-block instead of none. This shouldn't prevent those from being targeted, but somehow it seems to be. Somehow, this: input[value="archer"].sheet-toggle-specializationprestige ~ div.sheet-specialization-archer, input[value="beguiler"].sheet-toggle-specializationprestige ~ div.sheet-specialization-beguiler { display:inline-block; } is incompatible with encasing the HTML in a separate set of div tags. <div class="sheet-form-group"> <label>Base Class:</label>  <input type="hidden" name="attr_baseclass" class="toggle-specializationprestige"> <select class="long-text-input" type="text" name="attr_baseclass"> <option value="none" selected>Choose</option> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option> <option value="druid">Druid</option> <option value="guardian">Guardian</option> <option value="maestra">Maestra (Not Ready)</option> <option value="mage">Mage</option> <option value="rectora">Rectora</option> <option value="pugilist">Pugilist (Not Ready)</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker (Not Ready)</option> <option value="summoner">Summoner</option> <option value="warrior">Warrior (Not Ready)</option> </select>  The commented out widthfix tags are at fault, but it doesn't make sense why they're at fault so I'm not sure how to fix it. As in if I remove the comment tags so it's active, it stops working, but ceases to allow for fixing the width of the dropdown and label. If I comment it out, it adjusts the dropdown and label width to be almost ideal, I'd just have to tweak it a bit for exactly the right size, but it kills the functionality so it's kind of a moot point.

1581434445

Pro

Sheet Author

API Scripter

I dont have time for a detailed response, as I'm going to bed, but yes, you'be broken the link that makes the toggling of visibility work. This ~ is the sibling operator - it requires the two sections to be at the same hierarchical level, withing the same container (div).  The reason the order changed is likely because of these CSS commands         display: flex;   flex-direction: column; I dont have time to explain that, but flex and grid are two pretty advanced layout techniques, that are very powerful once you know what you are doing with them. If you want to rearrange the layout, the simplest way (without using grid or flex) is changing the layout of your headings and selects in the html, so you'd have something like Class Heading Specialty heading prestige Heading Class select Specialty select Prestige select Instead of what you have now, which i guess is something like Class Heading Class select Specialty heading Specialty select Prestige Heading Prestige select With this scheme, a simple line break after the lest heading (<br/>) will put the selects on the line below. Then you can use various CSS commands to position them, setting their width, etc. You have some latitude where you can put the hidden input (it should be at the same 'level' in the hierarch, but since its hidden it will be ignored by layout commands) - keeping them next to their selects is good for design organisation.

1581437518

Ah, sleep well GiGs! Thanks for posting that before you went to bed though! Lessee... The reason the order changed is likely because of these CSS commands         display: flex;   flex-direction: column; I dont have time to explain that, but flex and grid are two pretty advanced layout techniques, that are very powerful once you know what you are doing with them. Alright, so in that case flex lets it change position of stuff to force stuff to fit, and I assume the direction tells it to move it up and down the column in this case instead of horizontally. If I changed that to row, it'd probably fix the issue since I don't think it's needed otherwise for that particular section after I gutted the parts it used to adjust for the columns. I'll test that in a bit to see how it goes. If you want to rearrange the layout, the simplest way (without using grid or flex) is changing the layout of your headings and selects in the html... Ah, yeah, probably easier to do it that way though. It's probably better to know how the flex works, and I'll read up on it later, but I don't think it's really necessary for how it's currently set up, or at least I don't need to tamper with what's already there if I can just rearrange where stuff is. Guess I'll find out if this is like C++ and if it throws a fit if you put a variable in before you define what it is. If so, at least I know how to fix that already. This ~ is the sibling operator - it requires the two sections to be at the same hierarchical level, withing the same container (div). Hrm. The more I look at that though, the more I think I could probably adjust that, not sure if they really need to be siblings? I suppose I'll break it and discover why I'm not supposed to do that in a moment. At least I'll know what I'm breaking as I break it =P In any case, sleep well and thanks for your explanation again! Hopefully I'll have made an entire mess of everything and have de-tangled it by the time you're awake! XD

1581450586

Whelp... there has been progress. Sort of. So apparently because of how the CSS is written, trying to adjust the position and order of where the elements are via the HTML isn't working. Researching information on how to mess with the flex code to fix it didn't really work out, buuuut learning how to use the grid layout kind of almost did work! Except some of the elements are counted as one cell, some are two, for no apparent reason, and some get grouped under each other while others don't, despite identical hierarchies because they were literally copy/pasted. I'm going to assume this also has something to do with the mess of CSS that I don't understand fully yet which the base code I'm building it off of is using, but I can't seem to pinpoint where the actual problem is just yet. Still, I have learned a few neat tricks to dramatically reduce the total lines of code and to do certain tasks in a fraction of the time and effort, so yay! Still haven't fixed what I was trying to, but there's progress at least. Unfortunately, I need to make dinner and then work on some of the game mechanics themselves directly so probably won't be working on this again for at least a few hours. It's interesting at least, but I keep hitting walls of "I don't know enough to understand what's causing this or what to even search for" which is a minor nuisance. Shall tackle it more later, if I can come up with anything that looks like a coherent question, I'll let you know =P

1581479051

Edited 1581479268

Pro

Sheet Author

API Scripter

Note that to hide those prestige classes, each element you want to hide needs the  specialization-archer/etc  class on it. They dont have to be next to each other, as long as they are on the same "level" as the input with the  toggle-specializationprestige  class. Grid and flex both work on html objects - input, div, span, etc. Objects can contain other objects (divs for example are specifically meant to be containers, but arent the only containers). When you assign an object as a grid or flex, the rules for that grid/flex apply to the objects one level beneath them - whether inputs, spans, or divs containing other objects, for example. Imagine you have this layout: <div this is your base grid>     <label>     <input>     <div another container>         <label>         <input>     </div> </div> the grid rules will apply to the label, input, and the second div, and will ignore the label and input inside the second div  (which will be governed by any rules in that  div). I dont know if that helps you figure out why some things were jumping around, but this hierarchy is key to understanding CSS. PS: As an aside, when you look at a lot of sheets on the repository, you'll find a lot of people dont fully understand this. You'll see things like     <div>         <input>     </div> A single object (input, span, whaetevr) inside a div, and in the css they apply styling info to the div.  When they should have just done     <input> Anytime you have a single object inside a div, you should almost certainly remove that div and apply whatever style you applied to the div to the object directly.

1581501433

Oooh... yeah, that suddenly clears up a lot. I was having real issues trying to figure out how to target the HTML I wanted when I couldn't use div tags. There are a lot of div tags for the base one I'm using and even the site I was using to look up how to understand the CSS only ever gave div examples. It probably mentions somewhere in it that it doesn't have to be a div but I obviously didn't see that part, probably because there's just so much information right now that I'm having to skim over things looking for the parts I need. It might be more effective to try to sit down and go through a total 100% read through of all the HTML/CSS stuff before even trying to go further... but that would be common sense, which I am allergic to. Lessons learned by screwing up repeatedly tend to stick better anyway. That's my excuse and I'm sticking to it. =P But yeah, if you can just target the input directly... all of those choice menus can suddenly be pointed at! I think half my problem is converting a sheet that already has some CSS in it, buuuut I'm getting better at reading what it means now and that particular tidbit of information on targeting and hierarchies may be exactly what I needed to crack this particular problem! Thanks a bazillion for such! =3

1581516189

Edited 1581516283