Q: formatting a single .inlinerollresult.importantroll

Pardon my css/html ignorance... I've created a "general" template using allprops() as a "catch-all" template for the sheet. In my css sheet, I've created .sheet-rolltemplate-general .inlinerollresult.importantroll { border: 2px solid blue; } Formatting works as expected for .inlinerollresult.importantroll when using &{template:general} Question; Is it possible to change the color of a single inline roll from the html for .inlinerollresult.importantroll? Normally I would either use inline styling or create a new class with the proper formatting, however it seems that the formatting for the .inlinerollresult.importantroll is only done thru the roll template. I really don't want to create a new roll template with the color change for this single inline roll. Hope this makes sense. Thanks

I don't know, but when you say, "...change the color of a single inline roll from the html..." do you mean for a single button roll? If so, I'd be willing to mess around with it and see what I can do. I would imagine it should be possible, since we were able to do it for roll templates.

Thanks G.V. Here's a little background and some code; First, I created a general roll template as mentioned which works very well for just about any sheet button rolls(html) I want to create. Here's the issue, I have used the general roll template on the saving throws for the Ad&d 1e sheet. Here's one of the rolls; <td><button type="roll" value="/me must make a saving throw!
&{template:general} {{name=@{selected|token_name}<br>Rods, Staves, Wands}} {{Check = [[1d20cs>@{selected|SaveRodsStavesWands}cf<@{selected|SaveRodsStavesWands}]] }}" name="roll_SaveRodsStavesWands"> Roll</button><input type="number" name="attr_SaveRodsStavesWands" title="@{SaveRodsStavesWands}" /></td> As you can see I've implemented < > as well as cs and cf. Works good. When the inline roll is less than the target number it's a cf(RED), when it's greater than the target number cs(GREEN). When it's equal to the target number it's important(BLUE), which is still a success. This color combo is fine for all other uses of my general roll template, but I would like importantroll to be (GREEN) when used for Saving Throws. Do I need to make an entirely new template or can this be done some other way? Thanks

Ok, here's what I've been able to figure out...you can modify a single instance of an inline roll. Here's an example: Encumbrance needs to use an inline roll to calculate. The border around the cell was so I could trouble shoot things. I was able to get the text to be gray, but I had to be extremely explicit in the css. The cell that contains the Encumbrance stuff is part of a roll template (.sheet-rolltemplate-spadestrait2), which contains a table (.sheet-rtcard), which has a cell (.sheet-encroll). I had to assign the table cell a class in order to get this to work... So, my CSS looks like this: .sheet-rolltemplate-spadestrait2 .sheet-rtcard .sheet-encroll .inlinerollresult{ /*padding-right: 0px;*/ text-align: right; color: gray; } Some of the formatting has to be done on the cell itself, so you may need to play around with that. Now, for your question about Saving Throws and wanting special formatting for the roll...I don't think you'll need to create a separate template, just add an additional element, something like {{savingthrow}}. You could encapsulate it with the # and / so that you only call it when necessary. Then you could give that portion of the table a specific class that you could call in the manner above to modify the inlinerollresult elements. I hope that helps (and I especially hope it makes sense).

Thanks G.V. I think understand your solution but my lack of css know-how is limiting my implementation. :-) I think I'm getting stumped with the "...I had to be extremely explicit in the css." example of what I'm doing Here's a single saving throw button roll <table> <tr><td><button type="roll" value="/me must make a saving throw!
&{template:general} {{name=@{selected|token_name} }} {{subtag=Rods, Staves, Wands}} {{save=Check = [[1d20cs>@{selected|SaveRodsStavesWands}cf<@{selected|SaveRodsStavesWands}]] }}" name="roll_SaveRodsStavesWands" title="%{selected|SaveRodsStavesWands}"> Roll</button><input type="number" name="attr_SaveRodsStavesWands" title="@{SaveRodsStavesWands}" /></td></tr> </table> and I added the new selector {{save}} to my general template <rolltemplate class="sheet-rolltemplate-general"> <table class="sheet-rolltemplate-general"> {{#name}}<tr><th>{{name}}</th></tr>{{/name}} {{#subtag}}<tr><td class="sheet-subheader">{{subtag}}</td></tr>{{/subtag}} {{#save}}<tr><td>{{save}}</td></tr>{{/save}} {{#allprops() name subtag save}} <tr><td><span class="sheet-tcat">{{key}} = </span>{{value}}</td></tr> {{/allprops() name subtag save}} </table> </rolltemplate> At this point, I think I need to assign a class to the <td>{{save}}</td> but I'm not sure what the class should be called...? Pardon my ignorance. The current importantroll formatting on my css sheet for the general template is; .sheet-rolltemplate-general .inlinerollresult.importantroll { border: 2px solid #4A57ED; } Appreciate your help and patience G.V. Thanks

Vince, no worries. You're correct, you would just need to assign a class to the <td> tag, and that class can be anything you want. So, here's an example: <rolltemplate class="sheet-rolltemplate-general"> <table class="sheet-rolltemplate-general"> {{#name}}<tr><th>{{name}}</th></tr>{{/name}} {{#subtag}}<tr><td class="sheet-subheader">{{subtag}}</td></tr>{{/subtag}} {{#save}}<tr><td class="sheet-savethrow" >{{save}}</td></tr>{{/save}} {{#allprops() name subtag save}} <tr><td><span class="sheet-tcat">{{key}} = </span>{{value}}</td></tr> {{/allprops() name subtag save}} </table> </rolltemplate> And here's how I would do the CSS: .sheet-rolltemplate-general .sheet-savethrow .inlinerollresult.importantroll { color: #3FB315; border: none; } All I meant by "...be as explicit as possible..." was that you need to list out every class in the chain. In my example, the class .inlinerollresult is contained within the class .sheet-encroll (which is the <td> class) which is contained within a <div> with the class .sheet-rtcard which is contained within the roll template with the class .sheet-rolltemplate-spadestrait2. So, the entire CSS string needed to be: .sheet-rolltemplate-spadestrait2 .sheet-rtcard .sheet-fakeroll .inlinerollresult So, you start with the top most contain and work your way in until you get to the .inlinerollresult. I don't know if the table having the same class as your roll template will cause a problem or not. You may want to modify the table class so that it slightly different. If you need to do that,then you would need to add that class to your CSS string. For example, if you changed the table class to "sheet-template-table", then your CSS would look something like this: .sheet-rolltemplate-general .sheet-template-table .sheet-savethrow .inlinerollresult.importantroll { color: #3FB315; border: none; } I hope this helps.

Thanks a ton G.V. I really appreciate your succinct explanation. I have a "partial" understanding of how the html/css work together. It's nice when a connection is made. With your help importantroll now shows as a success with a green border. Perfect. Thanks for the help.

No problem. Glad I could help. :)