CSS Wizardry

John, if you're not using a roll, you can use the autocalc field max implementation above. For max(Strength - 5, 0), you'd use: <input type="hidden" disabled="true" name="attr_melee-damage" value="(((@{strength} - 5) + abs(@{strength} - 5)) / 2)" /> If you were using something other than 0 (say, 10 for example), you'd need "- 5 + 10" and "- 5 - 10" (or, obviously, +5 and -15)

See, its because of folks like you, G.V., and other that I can pull off sounding smart and sha-nazy . That worked perfectly.

LOL. I think Brian sounds smarter than me... :)

This mostly to Brain because of his cycling buttons , but I'm not picky: is there a way to have a pair of buttons to control the cycling? I have four images (of numbers, 1 through 4) that are rotated through by clicking on them (or arrow buttons). This works great, but I would like to have a pair of "up and down" buttons hidden behind the images so clicking on the top of the image makes the number go up, and clicking on the bottom makes the number go down. Is there a way to do this?

You might be able to make that work by having a number input with the same attribute name as the radio button group. If the input box were too narrow to see the numbers (or if the radio buttons were overlaid on top of the input box with the spinner arrows to the side), you'd get an interface similar to what you're talking about. I'm not certain that it would update correctly, however.

That's annoying. I'll look into it, see what I can find. Thank you for your help. Oh, and if you didn't notice before, the Vampire Requiem, Werewolf the Forsaken, and the Iron Kingdom sheets (maybe others) all have cycling images built into them. Quite heavily, in some cases. All because you showed me how. Thank you for that, and all the other things you have here.

Hello wizards! I'm attempting to upgrade a sheet, blah blah blah... In short, I find myself needing to toggle the visibility of a table row based (ideally) on radio buttons. Is this possible with what we have available on R20?

Corin S. said: Hello wizards! I'm attempting to upgrade a sheet, blah blah blah... In short, I find myself needing to toggle the visibility of a table row based (ideally) on radio buttons. Is this possible with what we have available on R20? It should be, if the radio buttons are siblings to the table (or siblings to one of the table's ancestors). Try this fiddle: <a href="http://jsfiddle.net/cet0nd8q/" rel="nofollow">http://jsfiddle.net/cet0nd8q/</a>

Ahah! Thank you kindly. I usually just look these things up, but was having trouble finding anything that didn't rely on Javascript.

Brian said: It should be, if the radio buttons are siblings to the table (or siblings to one of the table's ancestors). Try this fiddle: <a href="http://jsfiddle.net/cet0nd8q/" rel="nofollow">http://jsfiddle.net/cet0nd8q/</a> Using that technique works great, but I was wondering how you could do that inside of a table? I have a load of skills, buttons, ratings and attributes all in a table, and would love to change the font, color, background color, etc of those skills selected, using a button on the same row. But I'm not sure its possible.

John W. said: Brian said: It should be, if the radio buttons are siblings to the table (or siblings to one of the table's ancestors). Try this fiddle: <a href="http://jsfiddle.net/cet0nd8q/" rel="nofollow">http://jsfiddle.net/cet0nd8q/</a> Using that technique works great, but I was wondering how you could do that inside of a table? I have a load of skills, buttons, ratings and attributes all in a table, and would love to change the font, color, background color, etc of those skills selected, using a button on the same row. But I'm not sure its possible. Not using an actual table, however you could potentially create a table-like layout using div elements where it's possible.

I was hoping not to have to rebuild the whole skill table. Thanks anyway.

Hello everyone. I apologize in advance for my bad english but I'm french and really not good at foreign languages (but lively google translation;)). I have a problem with "Circular Layout". This works very well but I wanted to include in the circle of options and input text but can not place it properly without the circle from undergoing strange transformations. An idea will give you eternal gratitude to my right;)

Seb said: Hello everyone. I apologize in advance for my bad english but I'm french and really not good at foreign languages (but lively google translation;)). I have a problem with "Circular Layout". This works very well but I wanted to include in the circle of options and input text but can not place it properly without the circle from undergoing strange transformations. An idea will give you eternal gratitude to my right;) Are you talking about the cycling button (that I posted here ), or something like the circle of checkboxes on the oWoD Mage sheet? What do you mean by including an input text box in the "Circular Layout"?

Bryan Hello and thank you for taking the time to answer me. I speak the checkboxes circle but as a picture is worth a thousand words, here is a montage of what I try to do <a href="http://i.imgur.com/tPHF4SG.jpg[/img]" rel="nofollow">http://i.imgur.com/tPHF4SG.jpg[/img]</a>

Okay, so what is it you're having trouble with?

First of all I must say I am beginner in CSS so the solution is very simple but I certainly do not see it. Starting with your code, I try several solutions to integrate what I wanted in the center but either the checkboxes check boxes are shifted and no longer form a perfect circle but separated by two half circles my input or the input is instead totally left top of the circle or in the circle. In short, I turn around which is almost the desired state :)

I am curious about the way people have been handling the difference between what is needed for a full character sheet vs a basic npc sheet. It seems like all the sheets I have seen with a section for a basic npc use different attribute names for the npc vs the full character and that causes some issues for macros or abilities that depend on the attribute names. It also seems like it needlessly adds to the number of attributes on the sheet. Is this something that is being done to make the formatting easier/prettier for the npc section? Wouldn't it be possible to just set the classes in the html/css for the attributes that will be shared between the 2 versions to be 1 thing and anything that wont be shared to something else, then use a checkbox with the css to hide the rest if you select the npc version? Sure you might also need to include some sort of switch in the css for disabled(autocalculated) fields on the player side, to let you directly input the number for the npc, but it would be possible wouldnt it? or would setting the disabled in the css instead of the html not allow the character sheet to recognize the autocalc field? I understand this might be hard to make look nice, but it would allow you to cut down the size of the sheet, and use 1 set of less complicated macros to target both players and npc's by a certain stat.

Roger, the reason I use different attributes on the Savage Worlds sheet is to avoid data loss. When I first created the sheet I used the same field names and had to change it because of reported problems with data becoming corrupted and lost. For some reason that was especially true for repeating sections (I believe it has to do with the way repeated sections are handled and the nature of drop down menus and radio buttons). I may be ale to work around it, but it's not worth it at this point. I, of course, am not speaking for anyone but myself. :)

@G V. was it an issue of using the same attribute twice in different ares? I can see how that might make the system go crazy since it only expects each attribute to appear once, but what I was proposing/asking about was to only use the attributes once, and just using css to hide the attributes you don't want/need for the npc section.

@Roger - ahhh, that. Yeah, I do that as much as I can. Doesn't make the code any shorter, but it does help with the clutter on the character sheet. :) @Seb - Sorry, I can't help you with your question so much...

Seb said: First of all I must say I am beginner in CSS so the solution is very simple but I certainly do not see it. Starting with your code, I try several solutions to integrate what I wanted in the center but either the checkboxes check boxes are shifted and no longer form a perfect circle but separated by two half circles my input or the input is instead totally left top of the circle or in the circle. In short, I turn around which is almost the desired state :) You'll have to share the code you've got if you're going to get any help from us. Even with perfect English your description wouldn't be much use. I do remember that when I created the circle of checkboxes for the oWoD Mage's Quintessence wheel I had to do a lot of fine-tuning to get it to look right, and then the sheet author had to tune it some more to integrate it into the rest of the sheet. It's not a trivial setup. Roger A. said: I am curious about the way people have been handling the difference between what is needed for a full character sheet vs a basic npc sheet. It seems like all the sheets I have seen with a section for a basic npc use different attribute names for the npc vs the full character and that causes some issues for macros or abilities that depend on the attribute names. It also seems like it needlessly adds to the number of attributes on the sheet. Is this something that is being done to make the formatting easier/prettier for the npc section? Wouldn't it be possible to just set the classes in the html/css for the attributes that will be shared between the 2 versions to be 1 thing and anything that wont be shared to something else, then use a checkbox with the css to hide the rest if you select the npc version? Sure you might also need to include some sort of switch in the css for disabled(autocalculated) fields on the player side, to let you directly input the number for the npc, but it would be possible wouldnt it? or would setting the disabled in the css instead of the html not allow the character sheet to recognize the autocalc field? I understand this might be hard to make look nice, but it would allow you to cut down the size of the sheet, and use 1 set of less complicated macros to target both players and npc's by a certain stat. On the DFRPG sheet, I don't do anything special for differentiating between city sheets and character sheets, although admittedly they don't really share very much information like a NPC and PC would.

One possibility is to use tabs for different views. This is a lot of work as you duplicate actualy sheets. I would love if we would be able to have multiple sheets in a campaign for different "types" (summons/nsc/characters/magic casters/mundane characters/etc...)

Is it possible to code something into a character sheet to make a macroroll on the character sheet appear as a token macro?

Do you mean to have the button appear as part of the Token Actions list of buttons? Or do you mean something else? Character Sheets can't add things directly to the Token Actions list of buttons, but they an be dragged to the Macro Bar and will have the character's name as part of the Macro button. As an alternative (and this is what I do), I just create new Abilities on the character sheet that call the relevent button (and/or fields), and then make that Ability a Toke Action.

G V. said: Do you mean to have the button appear as part of the Token Actions list of buttons? Or do you mean something else? Character Sheets can't add things directly to the Token Actions list of buttons, but they an be dragged to the Macro Bar and will have the character's name as part of the Macro button. As an alternative (and this is what I do), I just create new Abilities on the character sheet that call the relevent button (and/or fields), and then make that Ability a Toke Action. Actually, they can. If a roll button includes the class "token_action" (IIRC), that roll button's macro will be a token action. Unfortunately, doing things that way makes ordering your token actions funky, it's mandatory for all tokens which represent a character, the token action button name can't be changed, and it's going to be all lower-case. That's why few sheet authors actually use the feature.

Wow! You learn something every day. :)

Anyone know how to dynamically add a label to the character sheet based on an attribute input by the user? This works fine with numbers using a disabled input, but I have been having trouble getting text to work, plus you can't put a disabled value on a tab or other button you still want people to be able to click on.

Allen said: Anyone know how to dynamically add a label to the character sheet based on an attribute input by the user? This works fine with numbers using a disabled input, but I have been having trouble getting text to work, plus you can't put a disabled value on a tab or other button you still want people to be able to click on. You can show or hide a label based on the state of a checkbox or radio button, but that's it.

Not sure what you're trying to accomplish, but going along with what Brian said, you can do some tricky stuff by having multiple fields with the same name. For example: &lt;input type="text" name="attr_test" /&gt; &lt;input type="checkbox" name="attr_test" value="test" /&gt; &lt;input type="checkbox" name="attr_test" value="test1" /&gt; &lt;input type="checkbox" name="attr_test" value="test2" /&gt; Using the above, if you type test into the text input field, then the checkbox whose value="test" will also become checked. Changing the text input to "test1" will uncheck the first checkbox, and check the second checkbox, etc. A warning, you do need to be care when doing stuff like that, because there can be some interesting and unintended consequences but that's a creative way to show/hide things based on a certain values using checkboxes. Now, the other thing, not sure what you're trying to accomplish with the label, if it's having the label match what the person input or something different. If it's a static set of labels, then the above example may allow you to do what you want. If you want the label to be what is typed, why not just have the input field be the label? You could style it so it looks like a label, but is still just an input box?

Sorry for the delay in responding, the problem was one of my CSS classes and that is be paid by overloading the properties. Thank you for answers.

Can an input checkbox(or radio on/off) be toggled based off another attribute or does it have to be manually set? Sadly I'm guessing no. For example; I would like to create an attribute that is calculated as a boolean value and then use that attribute to toggle a checkbox(or radio on/off) on the sheet. Thanks

Vince, would the trick two posts above work? That is one way to toggle a checkbox based on what is typed in the text field. I would assume something similar could be done for what you describe, but haven't tried it with a calculated field.

G V. said: Vince, would the trick two posts above work? That is one way to toggle a checkbox based on what is typed in the text field. I would assume something similar could be done for what you describe, but haven't tried it with a calculated field. I'll have a go at the tip above GV. What I'm trying to accomplish is to have a box checked if an attribute = 1. We have added Conditions to the PF sheet that toggle sheet-wide changes if applied. To help prevent accidentally leaving Conditions beyond their duration I wanted to add a Conditions checkbox or "flag" that's seen in the sheet's header as a reminder that conditions are being applied. I thought of calculating(boolean) that uses the combined condition attribute values and returns either 0 or 1, that could be used to somehow toggle the checkbox or flag. Javascript would make this easy, but alas...

Thanks Brian and GV. I opted to put the user input as a subheader to the tab which is working well. Right now my inventory has locations that the user defines so that the user can sort equipment between caried, or in a backpackwhich contribute to encumbrance and those stashed or on a mount for isntance. Since the encumbrance autotallys only the locations the user says to, I can then have dynamic movement rates and encumbrance. Drop your backpack with a 1 button toggle and be able to move faster for example.

Counting items in repeating fields This isn't really amazing but it's useful for e.g. if you have X number of Feats and you don't want to count them all. Example: How to: Basically what I did was put the repeating field inside of another div which had this class on it: .sheet-repeating-fields { counter-reset: sheet-rep-items; } And then for the open/close thingies they are just checkboxes with the .sheet_counted class followed by empty &lt;span&gt;&lt;/span&gt; tags. Then the css goes like this: input[type="checkbox"].sheet-counted + span:not(.sheet-not-sheet-show)::before { counter-increment: sheet-rep-items; content: counter(sheet-rep-items) ". [+]" !important; } input[type="checkbox"].sheet-counted:checked + span:not(.sheet-not-sheet-show)::before { counter-increment: sheet-rep-items; content: counter(sheet-rep-items) ". [-]" !important; } with some formatting on them. Anyway, from that you can see how simple and clean it is. The outside container gets the counter-reset property, then a unique item in each repeating field can increment the counter and display it.

That's slick! and clean. Mind if we borrow that for the community PF sheet Eloelle? Can it start at 0? :-)

Oh, of course! It's a feature of css, not copyrighted or anything. You can set the counter to a lower number with like counter-reset: sheet-rep-items -1; If you don't provide a number it defaults to 0. or you could try putting the increment after the content setting. That might be simpler: content: counter(sheet-rep-items) ". [-]" !important; counter-increment: sheet-rep-items; but I'm not sure if it'll work that way. CSS is not my native language :P The other thing that I'm pretty proud of is the multiattack macro but it's kind of a monster of repeating code - not elegant at all - and it makes heavy use of the rolltemplate conditional stuff. Maybe I'll post about it in a different thread. Edit: Done! Posted about it in the pathfinder community sheet thread.

Also, for sign(x), if you're dealing with integers or at least a known level of granularity you can use round() and 'jiggle' it a bit: sign([[@{x}]]) = [[round(@{x}/abs(@{x}+0.001))]] If you're dealing with fractional values but you don't mind losing bits that are less than 0.00001: sign([[@{x}]]) = [[round(@{x}*10000/abs(@{x}*10000+0.001))]] That way you get 0 on the dot when x=0, and it will actually get more precise the farther from 0 that X gets, so you don't have to worry about edge cases. Obviously if you can't afford to pick a granularity then this won't work but it's a small price to pay! This provides us with a way to convert between Size bonus (+8, +4, +2, +1, +0, -1, -2, -4, -8) and Fly bonus (+8, +6, +4, +2, 0, -2, -4, -6, -8): (round((@{size}+8)/abs((@{size}+8)+0.001)) + round((@{size}+4)/abs((@{size}+4)+0.001)) + round((@{size}+2)/abs((@{size}+2)+0.001)) + round((@{size}+1)/abs((@{size}+1)+0.001)) + round((@{size}+0)/abs((@{size}+0)+0.001)) + round((@{size}-1)/abs((@{size}-1)+0.001)) + round((@{size}-2)/abs((@{size}-2)+0.001)) + round((@{size}-4)/abs((@{size}-4)+0.001)) + round((@{size}-8)/abs((@{size}-8)+0.001)) )

You can use the same pattern as styling radio buttons to create tabs, by adding a span element after the input and styling that, while giving the radio button opacity: 0. A quick example: <a href="http://jsfiddle.net/z866duoa/" rel="nofollow">http://jsfiddle.net/z866duoa/</a> Thank you very much for the update. I initially did not even recognize that none of my players sees the character sheet as I do :)

Is there a way to specify that a number input for an attribute should always be 2 digits? specifically if the number is 1-9, I want it to show up as 01-09. I am dealing with time on the sheet and sending a time of 13:5 instead of 13:05 to the chat makes it kinda confusing....

No

ok. thanks for the info. it looks like it would have broken the sheet anyway. i tried manually setting attributes to 01, etc and the auto calc stoppedworking for anything that called that attribute.

So, those awesome tabs...anyway to get them to show up in Firefox?

Yes see the quote in my last post and look that up by i think Brian upwards.

I have to find out where I stole the tabs code I am using, and post that here. &nbsp;Its awesome. &nbsp;

I just discovered this. This is great, I'll have to fiddle with some of these ideas.

&nbsp;utilized the tab stuuf at t the biegnning of this thread.. and it doesnt hide the sheet when switching tabs, as well its kidna messy.. i realay wana use some tabs.. anyone have a quick clean and simple tab code..thanks

Hi, Is there a way to change the css according a value (with no API) ? For instance, when the HP of a character pass a certain threshold, the color of the field is changed.