Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

CSS is hurting my brain

1563136986

Edited 1563138496
CyborgPrime
Pro
Marketplace Creator
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.
1563137863

Edited 1563137950
GiGs
Pro
Sheet Author
API Scripter
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" />
1563138568
CyborgPrime
Pro
Marketplace Creator
thanks a lot - i guess i missed the sheet naming of the class - I'll try that
1563139636

Edited 1563139860
CyborgPrime
Pro
Marketplace Creator
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; }
1563163103

Edited 1563163350
CyborgPrime
Pro
Marketplace Creator
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.
1563223607

Edited 1563223682
Caden
Forum Champion
Sheet Author
API Scripter
Compendium Curator
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"/>
1563227301
GiGs
Pro
Sheet Author
API Scripter
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.  
1563231528
CyborgPrime
Pro
Marketplace Creator
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.
1563242065
CyborgPrime
Pro
Marketplace Creator
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?
1563247149
GiGs
Pro
Sheet Author
API Scripter
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. 
1563250027
CyborgPrime
Pro
Marketplace Creator
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.
1563251071

Edited 1563251098
GiGs
Pro
Sheet Author
API Scripter
That looks pretty good! Did you get the conditional formatting based on value=0 working?
1563283090
CyborgPrime
Pro
Marketplace Creator
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.
1563283842
CyborgPrime
Pro
Marketplace Creator
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?
1563285753
CyborgPrime
Pro
Marketplace Creator
once I create my Character sheet, how do I get it listed on the sheet list so other GM's can use it?
1563294126

Edited 1563294227
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
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.
1563297209
CyborgPrime
Pro
Marketplace Creator
hmmm thanks for that info - I'm familiar with Git.  Cool thanks
1563311351

Edited 1563311428
CyborgPrime
Pro
Marketplace Creator
making progress :)
1563311983
CyborgPrime
Pro
Marketplace Creator
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?
1563384320
CyborgPrime
Pro
Marketplace Creator
Well, the stat block is done and working 100% Now onto the inventory tab.
1563394651
Jakob
Sheet Author
API Scripter
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.
1563468620

Edited 1563470025
CyborgPrime
Pro
Marketplace Creator
Perfect!  Thank you Jakob!
1563567523
CyborgPrime
Pro
Marketplace Creator
Got the tabs working now. Any tips on repeating sections?
1563570035
GiGs
Pro
Sheet Author
API Scripter
You'll have to be more specific. What are you trying to do, with repeating sections?
1563577455
Finderski
Pro
Sheet Author
Compendium Curator
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.
1563581349
CyborgPrime
Pro
Marketplace Creator
yeah stuff like that bc something is terribly wrong It seems like it is making the new entries but i cant delete entries.
1563581732
CyborgPrime
Pro
Marketplace Creator
Hmm- I use underscores in tag names - what is the risk of using them in repeating sections?
1563585162
Finderski
Pro
Sheet Author
Compendium Curator
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.
1563586047
CyborgPrime
Pro
Marketplace Creator
I read that on the wiki but I have no idea what it means, as the entire example uses nothing but underscores.
1563590814
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
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.
1563591718
CyborgPrime
Pro
Marketplace Creator
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.
1563591807
CyborgPrime
Pro
Marketplace Creator
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>
1563592178

Edited 1563592256
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
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
1563593244
CyborgPrime
Pro
Marketplace Creator
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">
1563593817
GiGs
Pro
Sheet Author
API Scripter
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.
1563600308
CyborgPrime
Pro
Marketplace Creator
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.
1563600477
CyborgPrime
Pro
Marketplace Creator
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.
1563601957
GiGs
Pro
Sheet Author
API Scripter
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.
1563639807

Edited 1563640014
CyborgPrime
Pro
Marketplace Creator
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.
1563641929
CyborgPrime
Pro
Marketplace Creator
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.
1563665207
CyborgPrime
Pro
Marketplace Creator
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!  
1564170373
CyborgPrime
Pro
Marketplace Creator
Progress!
1564332687
CyborgPrime
Pro
Marketplace Creator
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?
1564336516
CyborgPrime
Pro
Marketplace Creator
Worked it out: overflow: hidden; on the container
1564350469
vÍnce
Pro
Sheet Author
Looking great CyborgPrime. Nice progress.
1564352625
CyborgPrime
Pro
Marketplace Creator
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.