Rolltemplate Styling? (ECS)

I emailed the debugging team but was asked to post in the forums instead. This css works fine in isolation within a custom sheet sandbox. But it fails when I merge with the rest of my css. **** .sheet-rolltemplate-spell .sheet-template-container-spell { &nbsp; box-shadow:&nbsp; inset 5px 5px 70px black; &nbsp; border-image-slice: 30%;*/ &nbsp; /*border-image-width: 10px; &nbsp; border-image-outset: 8px;*/ &nbsp; border-width: 10px; &nbsp; border-style: ridge; &nbsp; border-color: #0F6EC0; &nbsp; border-radius: 10%; &nbsp; color: whitesmoke; &nbsp; overflow: hidden; } /*&lt;span class='sheet-template-span-spell'&gt;*/ .sheet-rolltemplate-spell .inlinerollresult { /*&nbsp; background-color: transparent;*/ &nbsp; color: DarkOrange; } .sheet-rolltemplate-spell.sheet-rolltemplate-darkmode { &nbsp; --primary-dark: transparent; } /*.sheet-rolltemplate-spell .sheet-template-header-spell + span.inlinerollresult { &nbsp; background-color: transparent !important; &nbsp; border: none !important; } */ .sheet-rolltemplate-spell .sheet-template-header-spell { &nbsp; padding: 10%; &nbsp; background-size: 100% 100%; &nbsp; background-repeat: no-repeat; &nbsp; text-align: center; &nbsp; border-style: groove; &nbsp; border-color: #0F6EC0; &nbsp; border-top: 10px; &nbsp; border-left: 0px; &nbsp; border-right: 0px; } .sheet-rolltemplate-spell .sheet-template-chart-spell { &nbsp; background-size: 100% 100%; &nbsp; background-repeat: no-repeat; /*&nbsp; border-width: 10px;*/ &nbsp; border-style: ridge; &nbsp; border-color: #0F6EC0; &nbsp; border-top: 10px; &nbsp; border-left: 0px; &nbsp; border-right: 0px; &nbsp; padding: 5%; &nbsp; display: flex; &nbsp; font-size: 11px; &nbsp; text-align: center; } /* .sheet-rolltemplate-spell .sheet-template-row-spell { }*/ .sheet-rolltemplate-spell .sheet-template-row-spellinfo { &nbsp; background-size: 100% 100%; &nbsp; background-repeat: no-repeat; &nbsp; text-align: center; &nbsp; padding: 10%; &nbsp; font-size: 13px; } .sheet-rolltemplate-spell .sheet-template-row-spellflavor { &nbsp; background-size: 100% 100%; &nbsp; padding: 10%; &nbsp; font-size: 13px; &nbsp; text-align: center; &nbsp; background-repeat: no-repeat; &nbsp; color: whitesmoke; } Does this have something to do with the Enhanced character style sheet and the ".sheet" prefix? What is the correct syntax? I am using the official resource here: <a href="https://help.roll20.net/hc/en-us/articles/360037257334-How-to-Make-Roll-Templates#HowtoMakeRollTemplates-StylingRollTemplates" rel="nofollow">https://help.roll20.net/hc/en-us/articles/360037257334-How-to-Make-Roll-Templates#HowtoMakeRollTemplates-StylingRollTemplates</a>

Hi Josho, not sure if it's related to your roll template css failing, but the first class you posted seems to have a closing comment without an opening comment. see border-image line .sheet-rolltemplate-spell .sheet-template-container-spell { &nbsp; box-shadow:&nbsp; inset 5px 5px 70px black; &nbsp; border-image-slice: 30%;*/ &nbsp; /*border-image-width: 10px; &nbsp; border-image-outset: 8px;*/ You've kept ".sheet" which is what you need to do for roll templates for legacy and non-legacy, so that shouldn't be the issue AFAICT. Darkmode class name changes need to be placed at the beginning of the class name; .sheet-rolltemplate-spell.sheet-rolltemplate-darkmode should be .sheet-rolltemplate-darkmode.sheet-rolltemplate-spell Again, not sure if these are causing the issue at hand.

Thats for the quick reply as always Vince, The comment tag didn't change anything. As for the darkmode thing, I'm using this dude's insight you mentioned in other posts here: <a href="https://cybersphere.me/special-styles-for-rolltemplates/" rel="nofollow">https://cybersphere.me/special-styles-for-rolltemplates/</a> He seems to mention using both at the same time. I've tried with both and one at a time and one seems to get the desired effect. It all just fails to work when I combine the isolated css with the rest of the of the app I'm using latest firefox with no plugins. Here is the HTML if it helps. The roll is being generated with an "action" btn and not a "roll" btn if that matters. &lt;rolltemplate class="sheet-rolltemplate-spell"&gt; &nbsp;&nbsp;&nbsp; &lt;div class="template-container-spell"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="template-header-spell"&gt;{{computed::Spell}}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="template-chart-spell"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="template-row-spell"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class='template-span-spell'&gt;Cost: {{computed::Cost}}&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class='template-span-spell'&gt;TTT: {{computed::TTT}}&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="template-row-spell"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class='template-span-spell'&gt;Base: {{computed::Base}}&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class='template-span-spell'&gt;Scaling: {{computed::Scaling}}&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="template-row-spellflavor"&gt;&lt;span class='template-span-spell'&gt;{{computed::Flavor}}&lt;/span&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="template-row-spellinfo"&gt;&lt;span class='template-span-spell'&gt;I{{computed::Info}}&lt;/span&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;/rolltemplate&gt;

I would stick with adding the darkmode class ('.sheet-rolltemplate-darkmode') to the beginning of the sheet's normal classes. ie creating new classes for darkmode of course.&nbsp; Even the roll templates.&nbsp; A quick search for '.sheet-rolltemplate-darkmode' on the repo confirms this as well. Have you tried adding "sheet-" to your class names in the roll template html? Curious how you post the roll to chat with an action button?&nbsp; I assume CRP?&nbsp; Can you post that worker?&nbsp; Perhaps there is an issue there.

I have tried with and without adding the additional prefix "sheet-" to all the roll template classes without luck. Here is the roll logic ************************** &nbsp;&nbsp;&nbsp; const spellConcat = "repeating_spells"+tab; &nbsp;&nbsp;&nbsp; const newRowId = generateRowID(); &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; on("clicked:"+spellConcat+":applyspell", function(eventInfo) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const rowid = eventInfo.sourceAttribute.split('_')[2]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const spells = [`${spellConcat}_${rowid}_spells-name`, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `${spellConcat}_${rowid}_spells-cost`, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // `${spellConcat}_${rowid}_spells-cast-time`, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `${spellConcat}_${rowid}_spells-ttt`, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `${spellConcat}_${rowid}_spells-flavor`, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // `${spellConcat}_${rowid}_spells-text`, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Char_Manna","adTTT",'action-limit'] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(spells) &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getAttrs(spells, function(value) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Object.values(value).forEach(V =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(V ==="" || typeof V ==="undefined") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs({["repeating_errorStack_" + newRowId + "_error"]: "Character or Spell is incomplete."}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(parseInt(value['action-limit'])&lt;1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs({["repeating_errorStack_" + newRowId + "_error"]: value[`${spellConcat}_${rowid}_spells-name`] + ": No Main Actions."}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(parseInt(value[`${spellConcat}_${rowid}_spells-cost`]) &gt; parseInt(value.Char_Manna)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs({["repeating_errorStack_" + newRowId + "_error"]: value[`${spellConcat}_${rowid}_spells-name`] + ": Insufficient Manna supply."}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let apply = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Char_Manna: parseInt(value.Char_Manna) - parseInt(value[`${spellConcat}_${rowid}_spells-cost`]), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //economy: value.economy, //Economy turned off &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; adTTT: parseInt(value.adTTT) + parseInt(value[`${spellConcat}_${rowid}_spells-ttt`]), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [`${spellConcat}_${rowid}_spells-warning`]: "", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ['action-limit']:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value['action-limit'] - 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(value[`${spellConcat}_${rowid}_spells-name`]) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; startRoll( "&amp;{template:spell} {{Spell=[[0]]}} {{Cost=[[0]]}} {{TTT=[[0]]}} {{Base=[[0]]}} {{Scaling=[[0]]}} {{Flavor=[[0]]}} {{Info=[[0]]}}", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (results) =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; finishRoll( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; results.rollId, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Spell:&nbsp;&nbsp; value[`${spellConcat}_${rowid}_spells-name`] , &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Cost:&nbsp; value[`${spellConcat}_${rowid}_spells-cost`] , &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TTT:&nbsp; value[`${spellConcat}_${rowid}_spells-ttt`] , &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Info:&nbsp; value[`${spellConcat}_${rowid}_spells-flavor`] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs(apply); &nbsp;&nbsp;&nbsp; }) &nbsp;&nbsp;&nbsp; }); ************************* The roll does function without error by my estimation unless there is something that changes with legacy sheet css with CRP? (The flavor, Base, &amp; Scaling text is intentionally left as 0)

Okay, so get this. My Css is over 4000 lines. So I use segments of comments to give a visual representation of section breaks between swathes of style for different parts of the sheet that look like this: /******************************************************* END Section **********************************************************/ So I systematically removed sections to see what was causing the problem and here it is: This line below has an oddly placed " * " in between the comment delimiters /* Configure the button styling. This example makes it look like a checkbox. * CURRENTLY UNUSED April -2023 */ So I simply changed it to this /* Configure the button styling. This example makes it look like a checkbox. CURRENTLY UNUSED April -2023 */ &nbsp;And suddenly almost everything worked fine. The last thing is the border along the top rolltemplates was still missing &nbsp;This is because the css for container DIRECTLY below a sectional comment (see above) that had too many &nbsp; " * " Changing the " * " to " - " solved the issue completely. Literally none of the other CSS for any of the rest of the sheet had been affected for the past 2 years by these stars. Only the rolltemplates. go figure, I guess

I recall another sheet author having a similar issue with their comments that included multiple "*" inside their sheetworkers.&nbsp; I'll see if can dig it up.&nbsp; I know this was inside your css, but maybe there's a bug in roll20's parser.&nbsp; (Lol, more than one I'm sure)

Actually it was a bug with the css comments; <a href="https://app.roll20.net/forum/post/10006227/did-the-new-sheet-sanitation-system-change-how-roll-templates-work/?pageforid=10007760#post-10007760" rel="nofollow">https://app.roll20.net/forum/post/10006227/did-the-new-sheet-sanitation-system-change-how-roll-templates-work/?pageforid=10007760#post-10007760</a>