CSS is hurting my brain

Hi - I'm new to making character sheets but not new to css or html. I'm having a helluva time trying to figure out how to link css to the html fields For example: <input name="attr_str_base" type="number" class="str_base" /> How do I change the background color of the input box as an example? this doesn't work for me: input.sheet-str_base{     background-color: #3CBC8D; } It's very basic but im missing something. I cant seem to address the control at all.

You are not alone! CSS is a pain. You'll learn by trial and error, and googling. here's some pointers: The best way is to give it a class, like so <input class='sheet-red' name="attr_str_base" type="number" /> What you name it doesn't matter, except it must start with sheet- . (Experienced roll20 users, before you complicate things, I'm keeping this simple.) Then on your css tab, create a section named the same way .sheet-red { color: red; } This will set the color of that element to red. This means you can reuse the sheet-red class on as many elements as you like, and it will make them all red. There is a complication: sometimes a style is already applied to an element, and you have to override it. You do that by making your code more specific : add extra identifying information, like saying "apply this style to inputs of the number type"  You do that like this: input[type="number"].sheet-red { color: red; } You can include multiple styles in ab a class input[type="number"].sheet-red { color: red; background-color: blue; font-size: 12px; } and you can include multiple classes in an html element (separated by space) <input class='sheet-red sheet-another-class sheet-yet-more-styles' name="attr_str_base" type="number" />

thanks a lot - i guess i missed the sheet naming of the class - I'll try that

can i name the sheet- class the same as the name of the field?  Like this: <input name="attr_str_base" type="number" class="sheet-str_base"/> thanks to your help, I have the box working styled with this: input[type="number"].sheet-str_base_display{     border: 2px solid red;     border-radius: 4px;     background-color: #3CBC8D; } but let's say I want that style to only be applied when the value in the input is zero? I tried this but it didnt work: input[type="number"].sheet-str_base_display[value="0"]{     border: 2px solid red;     border-radius: 4px;     background-color: #3CBC8D; }

Well, I got some of the layout working now. Still can't figure out that css [value="0"] thing but at least I can access the elements now and move them around.

Try this: input[type="number"][value="0"].sheet-str_base_display  Edit: Also sheet- is HTML redundant and you really don't need. This is cleaner <input class="str_base" name="attr_str_base" type="number"/>

That's not working for me, Cassie. One odd thing I've noticed: it does work for the default value set in html, but does not work for the actual value set by the user. To illustrate I created both these sets of CSS, and tried them out separately. Both had the same result. input[type="number"].sheet-red{     background-color: red; } input[type="number"][value="0"].sheet-red{     background-color: black; } The second set input[type="number"].sheet-red{     background-color: red; } input[type="number"].sheet-red[value="0"]{     background-color: black; } And with these inputs <input class="sheet-red" type="number"  name="attr_testblank"/> <input class="sheet-red" type="number" value='1' name="attr_test1"/> <input class="sheet-red" type="number" value='0' name="attr_test0"/> What I found is that the black CSS rule [value="0"] was only applied when the default value was 0 (as in the last input above). If no default existed, or if it was any other value than 0, it was never applied. If its default value was 0, it was always applied, regardless of what you changed the value to. This doesnt match behaviour I've seen before, so I'm wondering if this is a current bug. Cassie said: Also sheet- is HTML redundant and you really don't need. This is cleaner <input class="str_base" name="attr_str_base" type="number"/> I avoided mentioning this earlier to avoid confusion. Cyborg, be aware, if you omit the sheet- from html, you still need to include it in the css.  

thanks, yes I've been leaving it out of the htmlbut including it in the css - that fixed my original problem and I was able to address the divs and style them except for the [value] detection.

I was leaving it out of the HTML for brevity but it seems like it may be easier to leave it in so the html matches the css - seems like that would make development go faster since I don thave to go add "sheet-" to the css after the fact every time I make an adjustment. I can always go back at the end and delete all the "sheet-" from the HTML if it really bothers me, right?

That's what I do, makes it easier to copy and paste. And yes, when a sheet is complete, you can always use Replace to delete all instances of "sheet-" from the sheet if you want to. 

Yay!  Look!  I made a thing! Thanks for your help - I'm putting out a module but the character sheet that's already made for it has bugs so I gotta make my own.

That looks pretty good! Did you get the conditional formatting based on value=0 working?

no- not yet - gonna save the hard stuff for last and rethink if if want to even do that. I wanted the style to change depending on a value in the field, but I wasted a whole day on it and delayed the whole project.

I still want a way to lock the MAX spinner so you cant change it by accident - maybe if you click the word max, the number field could enable/disable?

once I create my Character sheet, how do I get it listed on the sheet list so other GM's can use it?

You submit it to the GitHub repository. GitHub can be confusing to learn, and I am barely a neophyte at it, so I'll leave explaining the fork, branch, and pr process to someone who actually understands what their doing with it. As for the [value="0"] selector, the value= check really only works with type=hidden inputs as they are the only ones who's value parameter updates to reflect their actual value.

hmmm thanks for that info - I'm familiar with Git.  Cool thanks

making progress :)

but now I want the bonus to change collorto red if negative, white if 0, and green if positive... any ideas? how would I use a hidden control to update the field and change the css?

Well, the stat block is done and working 100% Now onto the inventory tab.

CyborgPrime said: but now I want the bonus to change collorto red if negative, white if 0, and green if positive... any ideas? how would I use a hidden control to update the field and change the css? Something like <input type="hidden" name="attr_foo_mod" class="color-mod" value="0"/> <input type="number" name="attr_foo_mod" value="0" class="some-color-input"/> and then .sheet-color-mod[value^="+"] + .sheet-some-color-input { color: green; } .sheet-color-mod[value="0"] + .sheet-some-color-input { color: white; } .sheet-color-mod[value^="-"] + .sheet-some-color-input { color: red; } The [value^="bar"] selector is a regexp selector which selects any attribute value starting with bar.

Perfect!  Thank you Jakob!

Got the tabs working now. Any tips on repeating sections?

You'll have to be more specific. What are you trying to do, with repeating sections?

As a general recommendation, I'd suggest using Flex Boxes or Flex Grids...but, yeah, a bit more specificity will help. :) Also, avoid underscores (_) in the repeating section name.

yeah stuff like that bc something is terribly wrong It seems like it is making the new entries but i cant delete entries.

Hmm- I use underscores in tag names - what is the risk of using them in repeating sections?

CyborgPrime said: Hmm- I use underscores in tag names - what is the risk of using them in repeating sections? Don't know why, only that it does bad stuff and the wiki advises against it. When you say you can't delete, do you not get the trashcan icon when you click the modify button?  If so, and just have trouble clicking it, you may just need to modify the styling for it, something like this: [data-groupname=repeating_skills] > .repitem > .itemcontrol {     z-index: 10000; } Which should put the item control above everything, but you may need to do that for repcontrol_del, or shift it to the left or right a little so it's not directly over another form element of some sort, etc.

I read that on the wiki but I have no idea what it means, as the entire example uses nothing but underscores.

Underscores in repeating section names are bad because you can't access the section via sheetworkers, the getsectionids function expects a specific pattern of repeating_text_id. If your section name has underscores the pattern no longer matches. Additionally, even if you could use underscores, it'd make it more difficult to iterate through repeating attributes in sheetworkers as there wouldn't be a defined pattern to look for.

I understand that I just dont know what they are referring to when they say not to use a thing then the examples uses nothing but that thing.

which part should I not use an underscore with: <fieldset class="repeating_contacts"> <table class="sheet-contacts_table"> <tr> <td><h5>Name</h5></td> <td><h5>Location</h5></td> <td><h5>Name</h5></td> <td><h5>Location</h5></td> </tr> <tr> <td><input class="sheet-input" type="text" value="" name="attr_name_contact" placeholder="Contact Name" /></td> <td><input class="sheet-input" type="text" value="" name="attr_reference_contact" placeholder="Planet/Subsector"/></td> <td><input class="sheet-input" type="text" value="" name="attr_name_contact2" placeholder="Contact Name" /></td> <td><input class="sheet-input" type="text" value="" name="attr_reference_contact2" placeholder="Planet/Subsector"/></td> </tr> <tr> <td colspan="2"><textarea wrap="soft" class="sheet-input" value="" name="attr_note-contact" style="width:100%" placeholder="Contact Notes" /></textarea></td> <td colspan="2"><textarea wrap="soft" class="sheet-input" value="" name="attr_note-contact2" style="width:100%" placeholder="Contact Notes" /></textarea></td> </tr> </table> </fieldset>

This part: <fieldset class="repeating_contacts"> What you don't want is this: <fieldset class="repeating_contacts_with_a_long_name"> Underscores in the actual attribute names are fine, and actually the preferred method as screen readers interact with attribute_name better than with attribute-name

ok got it - no underscores (aside from the initial one) on repeating fieldset classes bad: <fieldset class="repeating_friendly_contacts">     good: <fieldset class="repeating_friendly-contacts">

That's right. I'd also suggest as a general rule to avoid dashes in attribute names: only use underscores. They don't break, but complicate the syntax when using them in sheet workers. This works fine values.an_attribute_name the one below breaks values.an-attribute-name forcing you to use the alternative more complicated syntax below: values['an-attribute-name'] This is because javascript (which is what sheet workers are written in) only allows certain characters in variable names, and dashes are not one of them. But underscores are fine. A common convention is to use underscores in javascript/attribute names, and dashes in CSS class names. There's no requirement to do this, but you'll see it a lot.

I been programming in javascript a long time, thus the underscores habit.  I normally program in camelCase but that runs into snags sometimes too.  For this project I been using underscores but there's a lot of hidden snags you can get hung up on. Thanks for the hints regarding this stuff.

I was on schedule to release a new module on the marketplace last week but then I realized the opensource sheet that was available wasn't going to work for my application so I'm programming a custom one.  Hoping to get it done in the next few days and shoot for next Friday as a release date.

CyborgPrime said: I been programming in javascript a long time, thus the underscores habit.  I normally program in camelCase but that runs into snags sometimes too.  For this project I been using underscores but there's a lot of hidden snags you can get hung up on. Thanks for the hints regarding this stuff. I used to go the camelcase way too, but with roll20 preferring all lower case, i switched to underscores. CyborgPrime said: I was on schedule to release a new module on the marketplace last week but then I realized the opensource sheet that was available wasn't going to work for my application so I'm programming a custom one.  Hoping to get it done in the next few days and shoot for next Friday as a release date. Are you planning to add your character sheet to the roll20 repository? if so, you should be aware the they only allow one community sheet per game system now. If the opensource one is deficient, you could improve or replace it. If its still functional, you should be careful about replacing it in case it still has users who like it.

GiGs said: Are you planning to add your character sheet to the roll20 repository? if so, you should be aware the they only allow one community sheet per game system now. Well, this maybe isn't 100% definitive, as this isn't mentioned (any longer?) in either the Github Readme , Submission Guidelines (wiki), or Char Sheet FAQ thread . That being said, it's definitely better to improve on an existing sheet than making a new one, as it will make maintainability easier. Occasionally some sheets get discontinued in favour of a superior sheet, but then the new sheet should be a considerable improvement for it to be a good idea. If the opensource one is deficient, you could improve or replace it. If its still functional, you should be careful about replacing it in case it still has users who like it. Even if you revamp the design completely, it doesn't matter if you use same attribute names as the original sheet, which would make transitioning to a new sheet easier. Alternatively sheetworkers could be made to migrate attributes to new names if needed, with repeating sections ofc being a bit more tricky, if you change say a static list of attributes into a repeating section. That reminds me, I still have an attribute-name on the StarWarsD6 sheet which have a typo, along with it's repeating section. It's been there since before I started improving it, but making a sheetworker to migrate a repeating section have been pretty low priority, I might have a chance now that I've learned a bit more.

Well, it's for my own system loosely based on Traveller.  There was a "close enough" sheet that I've been using but it has issues that make it impractical for my use (they hard-coded the bonuses instead of doing them by calculation for instance so they only work within a range of numbers, and some other things). If I'm going to have to put in a bunch of programming and design work it may as well be for my custom system, it's something I needed to do anyhow eventually.  Might as well just do it now and release the whole bundle as a self-contained pack. How long does it take to get your sheet posted on git hub?  Is there a lengthy approval process?  Like if I finish it today or tomorrow, can I get it posted by next Wednesday? Thanks for the help and constructive criticism everybody!

CyborgPrime said: How long does it take to get your sheet posted on git hub?  Is there a lengthy approval process?  Like if I finish it today or tomorrow, can I get it posted by next Wednesday? From the Github Repo Readme : Full Character Sheet documentation can be found on the Roll20 Wiki: Building Character Sheets . Pull requests are processed weekly and should be submitted no later than 6am PST Mondays , roughly 13:00-14:00 UTC. Earlier submissions are encouraged to allow for peer review from other contributors. On Monday, a Roll20 staff member will review the content to ensure it meets the standards documented on the Roll20 Wiki . Comments, concerns, and changes as a result of review will need to be addressed before the pull request can be merged into the repository. The readme contains more info and links to more specifics, like the submission guidelines.

Hmm well my experience with roll20 is they take their time, that's why I was asking what the actual process and timeframe are rather than what the documentation says.

AJ said: Pull requests are processed weekly and should be submitted no later than 6am PST Mondays , roughly 13:00-14:00 UTC. This is accurate. Sheet submissions and changes are reviewed&merged weekly, on Tuesdays. Last week was an exception(and was mentioned here in a post), but otherwise it's like clockwork, barring obvious holidays.

Cool thanks for the info!

Just wanted to say, as I recently got started with editing a character sheet in roll20 and am not a web programmer, that this was a super helpful thread to read!  

Progress!

ok - I'm stuck I put the charactersheet inside a container so I could have that blue background but for some reason I cant get the page to automatically resize when I add these rpeating sections at the end for contacts how do I make the page grow to include these repeating subpanels?

Worked it out: overflow: hidden; on the container

Looking great CyborgPrime. Nice progress.

Thanks - finished off the first page, now working on the second - I'm just blocking out the layout at the momnet - will unify the design and clean up positioning at the end.