roll template output formatting based on an attribute

Generally, I have no problem formatting roll templates with css, but I want to change the formatting on a div used within a roll template based on an input/checkbox that's located on the sheet. I tried including a hidden input within the roll template to be used as a trigger, but I think the way roll templates are designed, inputs get sanitized.  Is this possible? Anyone done this on their sheet?  TIA

What's the inputs possible values?

Vince said: Generally, I have no problem formatting roll templates with css, but I want to change the formatting on a div used within a roll template based on an input/checkbox that's located on the sheet. I tried including a hidden input within the roll template to be used as a trigger, but I think the way roll templates are designed, inputs get sanitized.  Is this possible? Anyone done this on their sheet?  TIA You'll want to include a flag like {{show_foo=1}} or {{show_bar=1}} and set that as the value of an attribute that you include on the roll template. Then you can use the helper functions to change the formatting. You can even use (simple) helper functions in the value of the class attribute: <div class="bar{{#show_foo}} foo{{/show_foo}}">

Jakob said: ...You can even use (simple) helper functions in the value of the class attribute: <div class="bar{{#show_foo}} foo{{/show_foo}}"> What's the benefit of doing this Jakob?

You can conditionally add a class to the roll template to influence formatting (like setting a different background, changing fonts, etc). I have a {{korean=1}} flag for the Blades sheet that modifies the roll template fonts to work better for Korean. I also have a {{short=1}} flag that modifies the height of the template. Both are implemented in the above way.

So, the class changes to be whatever the result of the template field test is?

I'll have to try this out.  Use case; I added vertical scrolling on the div used around {{description=}} so that long text gets a scroll bar after a fixed height instead of taking up three pages of chat.  Some people prefer to have all the text displayed without having to scroll within the description.  So, I'm trying to add an option in the sheet's settings that would toggle scrolling within the description key.

I was able to get this to work in my tests with your suggestions/examples.  I wasn't sure exactly how to implement this using a flag ie {{scroll_desc=1}} so I simply added {{scroll_desc=@{scroll-desc}}} in the sheet's macros.  @{scroll-desc} is an input selector from the sheet's settings page with options; 1."scroll-desc" ("sheet-" is automatically added by roll20) or 2."& nbsp;"   I added css to match "sheet-scroll-desc" for the intended scroll-ability when using option 1. from above. I included a simple helper for {{scroll_desc}} within the roll template's div as per Jakob's tip above.  <div class="{{#scroll_desc}}{{scroll_desc}}{{/scroll_desc}}"... Seems to work as intended.  Thanks for the help.

That's cool.

Glad it works!

If your attribute has a fixed number of values (let's say A or B), you don't even need the helper function. In the roll template: <div class="sheet-myclass{{mychoice}}"> (some stuff) </div> In your CSS: .sheet-rolltemplate-mytemplate .sheet-myclassA {     (some stuff) } .sheet-rolltemplate-mytemplate .sheet-myclassB {     (other stuff) }

Duh, that's much easier and works just as well, Natha!

Glad to help :) That trick made my life simpler from time to time ;)

Natha said: If your attribute has a fixed number of values (let's say A or B), you don't even need the helper function. In the roll template: <div class="sheet-myclass{{mychoice}}"> (some stuff) </div> In your CSS: .sheet-rolltemplate-mytemplate .sheet-myclassA {     (some stuff) } .sheet-rolltemplate-mytemplate .sheet-myclassB {     (other stuff) } I suppose wrapping with helpers {{#foo}}{{foo}}{{/foo}} are only needed for displaying IF something is present? That's slick.  Thanks

Vince said: I suppose wrapping with helpers {{#foo}}{{foo}}{{/foo}} are only needed for displaying IF something is present? Never tried but if {{foo}} is present in the roll, but empty, it should also work, either if foo contains a full CSS class name, like <div class="baseclass {{foo}}"> CSS: .sheet-rolltemplate-mytemplate .sheet-baseclass {     (some stuff) } .sheet-rolltemplate-mytemplate .sheet-baseclass.sheet-WithFooValue {     (other stuff) } Or part of a class name: <div class="baseclass{{foo}}"> CSS: .sheet-rolltemplate-mytemplate .sheet-baseclass {     (some stuff) } .sheet-rolltemplate-mytemplate .sheet-baseclassWithFooValue {     (other stuff) }

EDIT : sorry had to edit 3 times to set it right, above ...

I'm going to update my code.  Thanks

Sorry, had an extra space in the full class name example above. Fixed.