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

CSE and Roll Templates

1619655582
Finderski
Pro
Sheet Author
Compendium Curator
So, I've read that if I'm using CSE I still need to use the legacy format for Roll Templates.  Is there a trick to getting them to work? I have roll template code in the character sheet, I have the roll template css in my css file; in both situations I precede all classes with sheet- My rolls still look like this: When I check the developer console, I see this: Which are the classes that should be there. But the associated CSS is nowhere to be found in the console...I mean it's not even getting overridden. So, I double checked my CSS file and the CSS is there. I tried prepending .charsheet to the css and that didn't work (didn't think it would, since it's part of the chat and not the character sheet as such). Anyway, is there a trick I'm missing? And I did search the wiki (including the CSE stuff), but I couldn't find anything in there that I should do differently than I already am...
1619669382

Edited 1619669916
vÍnce
Pro
Sheet Author
Not sure... I'm still working on converting the PF Community sheet... I think I'm very close.  Just waiting on the parsing issues to get ironed out. HTML; I made sure not to remove "sheet-" from any classes included within roll template sections. html rolltemplate example(just an incomplete snippet); <rolltemplate class="sheet-rolltemplate-pf_spell">     {{^accessible}}         <div class="sheet-roll-table sheet-rolltemplate-pf_spell {{#font}}font-{{font}}{{/font}} {{#color}}color-{{color}}{{/color}} {{#rounded}}rounded{{/rounded}}" role="presentation">         <div class="sheet-roll-header" style="width:100%;">         {{#header_image}}             <span class="sheet-header-image">{{header_image}}</span>         {{/header_image}} <span class="sheet-left"> CSS; removed ".sheet-" from everything but the roll template classes. While I have added .charsheet to all other classes to prevent the base.css from muscling in on the sheet's styling, I did not add it to any of the ".sheet-rolltemplate-..." classes.  Also, I made sure that all classes included with a roll template class ie ".sheet-rolltemplate-..." also included ".sheet-..." ie   except for  auto-generated classes by roll20, like .inlinerollresult.fullcrit, .inlinerollresult.fullfail, .inlinerollresult.importantresult, etc. css roll template example; .sheet-rolltemplate-pf_spell :not(.sheet-roll-description)>.sheet-roll-cell:first-child .inlinerollresult {...}
1619685406
Finderski
Pro
Sheet Author
Compendium Curator
And you're able to get your templates to work? Because I'm doing the same thing as you (only converting to PUG as well) and while the HTML shows properly, none of the associated classes are showing in the CSS in the browser for some reason. But they ARE in the css file I'm loading. :-/
1619691388
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Any chance the position of the CSS matters? Similar to how the import font was eating the next class? 
1619700066
Finderski
Pro
Sheet Author
Compendium Curator
Richard T. said: Any chance the position of the CSS matters? Similar to how the import font was eating the next class?  It didn't before, so if that's changed, we need to know where we should place this code in the CSS.  Right now, my templates are at the bottom of the html file and the CSS is at the bottom of the CSS file (which is where they have always been for this sheet).
1619702699
Andreas J.
Forum Champion
Sheet Author
Translator
I did encounter this problem at some point with my roll templates, but somehow fixed it, don't remember what was the issue. Looking at my sheets might give a clue at what works, I got simple rolltemplates. <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/Barbaric" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/tree/master/Barbaric</a> <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/MythicD6" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/tree/master/MythicD6</a>
1619703605
Finderski
Pro
Sheet Author
Compendium Curator
Thanks Andreas, I'll take a look.
1619729562
Finderski
Pro
Sheet Author
Compendium Curator
Andreas J. said: I did encounter this problem at some point with my roll templates, but somehow fixed it, don't remember what was the issue. Looking at my sheets might give a clue at what works, I got simple rolltemplates. <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/Barbaric" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/tree/master/Barbaric</a> <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/MythicD6" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/tree/master/MythicD6</a> Sadly, I'm not seeing anything you're doing differently than I am... :(
1619740075
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Have I missed it but did you post up your css somewhere, Finderski?&nbsp;
1619773283
Finderski
Pro
Sheet Author
Compendium Curator
I haven't posted it in this forum, but it's the same CSS as what's on GitHub for Legacy sanitization. Everything I've read on these forums says even when the character sheet moves away from the legacy sanitization the roll templates must still follow those rules. &nbsp;Here's a snippet of the CSS, though... CSS: . sheet-rolltemplate-roll div , . sheet-rolltemplate-roll span , . sheet-rolltemplate-roll h1 , . sheet-rolltemplate-roll h2 , . sheet-rolltemplate-damage div , . sheet-rolltemplate-damage span , . sheet-rolltemplate-damage h1 , . sheet-rolltemplate-damage h2 , . sheet-rolltemplate-gritty div { box-sizing : border-box ; } . sheet-rolltemplate-roll span . sheet-templateCondition { font-size : 0.5 em ; } . sheet-rolltemplate-roll , . sheet-rolltemplate-damage { background : url ( " <a href="https://raw.githubusercontent.com/finderski/SWT/master/BackgroundImages/graph_paper_web.jpg" rel="nofollow">https://raw.githubusercontent.com/finderski/SWT/master/BackgroundImages/graph_paper_web.jpg</a> " ); } . sheet-rolltemplate-roll . sheet-templateMain , . sheet-rolltemplate-damage . sheet-templateMain , . sheet-rolltemplate-info . sheet-templateMain { display : -webkit-box ; display : -ms-flexbox ; display : flex ; -ms-flex-pack : distribute ; justify-content : space-around ; -ms-flex-wrap : wrap ; flex-wrap : wrap ; width : 100 % ; padding : 0 px ; } . sheet-rolltemplate-roll . sheet-templateMain , . sheet-rolltemplate-damage . sheet-templateMain { background : url ( " <a href="https://raw.githubusercontent.com/finderski/SWT/master/BackgroundImages/templateHeader_web2.png" rel="nofollow">https://raw.githubusercontent.com/finderski/SWT/master/BackgroundImages/templateHeader_web2.png</a> " ) no-repeat ; } . sheet-rolltemplate-roll . sheet-templateHeader , . sheet-rolltemplate-damage . sheet-templateHeader { width : 100 % ; margin : 0 0 15 px 0 ; padding : 20 px 0 0 0 ; } . sheet-rolltemplate-roll . sheet-templateBody , . sheet-rolltemplate-damage . sheet-templateBody { width : 100 % ; margin : 0 ; padding : 0 ; display : flex ; } And the HTML: &lt; rolltemplate class =" sheet-rolltemplate-roll "&gt; &lt; div class =" sheet-templateMain "&gt; &lt; div class =" sheet-templateHeader "&gt; {{^PowerTemplate}} &lt;!-- before name: --&gt; {{#namelength}} &lt; h2 class =" sheet-templateBlack sheet-{{namelength}} "&gt;&lt;/ h2 &gt; {{/namelength}}{{^namelength}} &lt; h2 class =" sheet-templateBlack "&gt;&lt;/ h2 &gt; {{/namelength}}{{#rollTotal() wildcard 0}}{{#wcicon}}{{wcicon}}{{/wcicon}}{{/rollTotal() wildcard 0}}{{name}}{{#rollTotal() distracteds -2}} &lt; span class =" sheet-templateCondition " data-i18n-title =" distracted "&gt; ♦ &lt;/ span &gt; {{/rollTotal() distracteds -2}}{{#rollTotal() vulnerable -2}} &lt; span class =" sheet-templateCondition " data-i18n-title =" vulnerable "&gt; ♠ &lt;/ span &gt; {{/rollTotal() vulnerable -2}}{{#rollTotal() stunned -2}} &lt; span class =" sheet-templateCondition " data-i18n-title =" stunned "&gt; ♣ &lt;/ span &gt; {{/rollTotal() stunned -2}} &lt; h3 class =" sheet-templateBlack "&gt; ({{trait}}{{#source}}: {{source}}{{/source}}) &lt;/ h3 &gt; {{/PowerTemplate}}{{#PowerTemplate}} &lt; h2 class =" sheet-templateBlue "&gt; {{#rollTotal() wildcard 0}}{{#wcicon}}{{wcicon}}{{/wcicon}}{{/rollTotal() wildcard 0}}{{name}}{{#rollTotal() distracteds -2}} &lt; span class =" sheet-templateCondition " data-i18n-title =" distracted "&gt; ♦ &lt;/ span &gt; {{/rollTotal() distracteds -2}}{{#rollTotal() vulnerable -2}} &lt; span class =" sheet-templateCondition " data-i18n-title =" vulnerable "&gt; ♠ &lt;/ span &gt; {{/rollTotal() vulnerable -2}}{{#rollTotal() stunned -2}} &lt; span class =" sheet-templateCondition " data-i18n-title =" stunned "&gt; ♣ &lt;/ span &gt; {{/rollTotal() stunned -2}} &lt;/ h2 &gt; &lt; h3 class =" sheet-templateBlue "&gt; {{trait}}{{#source}}: {{source}}{{/source}} &lt;/ h3 &gt; {{/PowerTemplate}} &lt;/ div &gt; {{#trappings}} &lt; h4 class =" sheet-templateBlue "&gt; Trappings: {{trappings}} &lt;/ h4 &gt; {{/trappings}}{{#rollGreater() shaken 0}} &lt; div class =" sheet-unshakeRow "&gt; {{unshake}} &lt;/ div &gt; {{/rollGreater() shaken 0}} &lt; div class =" sheet-templateBody "&gt; &lt; div class =" sheet-templateRoll sheet-trollLeft "&gt;&lt; span class =" sheet-rollLabel "&gt; {{skill_rank}} &lt;/ span &gt;&lt; span class =" sheet-rollContainer "&gt; {{skill_roll}} &lt;/ span &gt; {{#rollGreater() numrolls 1}}{{#skill_roll2}} &lt; span class =" sheet-rollContainer "&gt; {{skill_roll2}} &lt;/ span &gt; {{/skill_roll2}}{{/rollGreater() numrolls 1}}{{#rollGreater() numrolls 2}}{{#skill_roll3}} &lt; span class =" sheet-rollContainer "&gt; {{skill_roll3}} &lt;/ span &gt; {{/skill_roll3}}{{/rollGreater() numrolls 2}}{{#rollGreater() numrolls 3}}{{#skill_roll4}} &lt; span class =" sheet-rollContainer "&gt; {{skill_roll4}} &lt;/ span &gt; {{/skill_roll4}}{{/rollGreater() numrolls 3}}{{#rollGreater() numrolls 4}}{{#skill_roll5}} &lt; span class =" sheet-rollContainer "&gt; {{skill_roll5}} &lt;/ span &gt; {{/skill_roll5}}{{/rollGreater() numrolls 4}}{{#rollGreater() numrolls 5}}{{#allprops() skill_rank mook showtt showwounds showfatigue showdistracted showenc skill_roll skill_roll2 skill_roll3 skill_roll4 skill_roll5 name trait source PowerTemplate wild_die wild_die2 wild_die3 wild_die4 wild_die5 mods ttmod wounds fatigue distracted encumbrance notes button DmgRoll numrolls wcicon distracteds vulnerable stunned unshake ReRoll vigorStunned unshakeTemplate ap getgritty GrittyRoll skill_rollall trappings bonus_die wci showspec showap wildcard shaken}} &lt; span class =" sheet-rollContainer "&gt; {{value}} &lt;/ span &gt; {{/allprops() skill_rank mook showtt showwounds showfatigue showdistracted showenc skill_roll skill_roll2 skill_roll3 skill_roll4 skill_roll5 name trait source PowerTemplate wild_die wild_die2 wild_die3 wild_die4 wild_die5 mods ttmod wounds fatigue distracted encumbrance notes button DmgRoll numrolls wcicon distracteds vulnerable stunned unshake ReRoll vigorStunned unshakeTemplate ap getgritty GrittyRoll skill_rollall trappings bonus_die wci showspec showap wildcard shaken}}{{/rollGreater() numrolls 5}} &lt;/ div &gt; &lt; div class =" sheet-templateRoll sheet-trollRight "&gt; {{#^rollTotal() mook 0}} &lt; span class =" sheet-rollLabel "&gt; Wild Die &lt;/ span &gt; {{/^rollTotal() mook 0}}{{#rollTotal() mook 0}} &lt; span class =" sheet-rollLabel "&gt; Group/Crit Check &lt;/ span &gt; {{/rollTotal() mook 0}} &lt; span class =" sheet-rollContainer "&gt; {{wild_die}} &lt;/ span &gt; {{#wild_die2}} &lt; span class =" sheet-rollContainer "&gt; {{wild_die2}} &lt;/ span &gt; {{/wild_die2}}{{#wild_die3}} &lt; span class =" sheet-rollContainer "&gt; {{wild_die3}} &lt;/ span &gt; {{/wild_die3}}{{#wild_die4}} &lt; span class =" sheet-rollContainer "&gt; {{wild_die4}} &lt;/ span &gt; {{/wild_die4}}{{#wild_die5}} &lt; span class =" sheet-rollContainer "&gt; {{wild_die5}} &lt;/ span &gt; {{/wild_die5}} &lt;/ div &gt; &lt;/ div &gt; {{#rollGreater() conviction 0}} &lt; div class =" sheet-convictionRoll "&gt;&lt; span class =" sheet-rollLabel " data-i18n =" conviction "&gt;&lt;/ span &gt;&lt; span class =" sheet-rollContainer "&gt; {{conviction}} &lt;/ span &gt;&lt;/ div &gt; {{/rollGreater() conviction 0}} &lt; div class =" sheet-buttonsnsuch "&gt; {{#^rollTotal() mods 0}} &lt; div class =" sheet-templateModifiers "&gt; {{#^rollTotal() showtt 0}}Misc. Modifers: {{ttmod}}{{/^rollTotal() showtt 0}}{{#^rollTotal() showwounds 0}} Wounds: {{wounds}}{{/^rollTotal() showwounds 0}}{{#^rollTotal() showfatigue 0}} Fatigue: {{fatigue}}{{/^rollTotal() showfatigue 0}}{{#^rollTotal() showdistracted 0}} Distracted: {{distracted}}{{/^rollTotal() showdistracted 0}}{{#^rollTotal() showenc 0}} Enc: {{encumbrance}}{{/^rollTotal() showenc 0}}{{#^rollTotal() actpenalty 0}} Activation Penalty: {{actpenalty}}{{/^rollTotal() actpenalty 0}} &lt;/ div &gt; {{/^rollTotal() mods 0}}{{#notes}} &lt; div class =" sheet-templateModifiers "&gt; {{notes}} &lt;/ div &gt; {{/notes}}{{#button}}{{^PowerTemplate}} &lt; div class =" sheet-templateButton sheet-blackButtons "&gt; {{ReRoll}}{{DmgRoll}} &lt;/ div &gt; {{/PowerTemplate}}{{#PowerTemplate}} &lt; div class =" sheet-templateButton sheet-blueButtons "&gt; {{ReRoll}}{{DmgRoll}} &lt;/ div &gt; {{/PowerTemplate}}{{/button}} &lt;/ div &gt; &lt;/ div &gt; {{#rollTotal() stunned -2}}{{#vigorStunned}} &lt; div class =" sheet-vigormessage "&gt;&lt; span data-i18n =" unstun-roll "&gt; If rolling to become unstunned, remember: A success removes the Stunned condition, but leaves the character Distracted and Vulnerable; a raise removes all conditions. &lt;/ span &gt;&lt;/ div &gt; {{/vigorStunned}}{{/rollTotal() stunned -2}} &lt;/ rolltemplate &gt; The HTML isn't as clean as I'd like it, but I'm migrating to using PUG, but the syntax for rolltemplates interacts with PUG in a weird way so I you have to get creative. &nbsp;But again, the HTML in the Dev Console is correct, but the CSS isn't appearing.
1619785998
Andreas J.
Forum Champion
Sheet Author
Translator
The HTML isn't as clean as I'd like it, but I'm migrating to using PUG, but the syntax for rolltemplates interacts with PUG in a weird way so I you have to get creative. &nbsp;But again, the HTML in the Dev Console is correct, but the CSS isn't appearing. I'm personally doing a partial migration to PUG, leaving roll templates as something I write in HTML to avoid those interaction problems.
1619787331
Finderski
Pro
Sheet Author
Compendium Curator
Andreas J. said: The HTML isn't as clean as I'd like it, but I'm migrating to using PUG, but the syntax for rolltemplates interacts with PUG in a weird way so I you have to get creative. &nbsp;But again, the HTML in the Dev Console is correct, but the CSS isn't appearing. I'm personally doing a partial migration to PUG, leaving roll templates as something I write in HTML to avoid those interaction problems. I've been considering that, actually...
1619914578

Edited 1619914709
vÍnce
Pro
Sheet Author
Used your code form above.&nbsp; custom game in legacy mode (chrome)...&nbsp; &nbsp;Just a quick mock-up macro to see if css was being applied.
1619921618
Finderski
Pro
Sheet Author
Compendium Curator
Yeah, it definitely works in Legacy mode. Nic B helped identify the problem when converting to using PUG/Sass for the character sheet...the preprocessor kept appending @charset &nbsp; "UTF-8" ; to the CSS...that was breaking. Once we removed that, it works. &nbsp;I'll try to add a note to the wiki about that...
1619922571
vÍnce
Pro
Sheet Author
Gotcha. Thanks for the update.
1619925532
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
As an aside. The * hits everything, so instead of .sheet-rolltemplate-roll div, .sheet-rolltemplate-roll span, .sheet-rolltemplate-roll h1, .sheet-rolltemplate-roll h2, .sheet-rolltemplate-damage div, .sheet-rolltemplate-damage span, .sheet-rolltemplate-damage h1, .sheet-rolltemplate-damage h2, .sheet-rolltemplate-gritty div { box-sizing: border-box; } you can do something like: .sheet-rolltemplate-roll *, .sheet-rolltemplate-damage *, .sheet-rolltemplate-gritty * { &nbsp;&nbsp;&nbsp;&nbsp;box-sizing: border-box;&nbsp; }
1619934284

Edited 1619934420
vÍnce
Pro
Sheet Author
Richard T. said: As an aside. The * hits everything, so instead of .sheet-rolltemplate-roll div, .sheet-rolltemplate-roll span, .sheet-rolltemplate-roll h1, .sheet-rolltemplate-roll h2, .sheet-rolltemplate-damage div, .sheet-rolltemplate-damage span, .sheet-rolltemplate-damage h1, .sheet-rolltemplate-damage h2, .sheet-rolltemplate-gritty div { box-sizing: border-box; } you can do something like: .sheet-rolltemplate-roll *, .sheet-rolltemplate-damage *, .sheet-rolltemplate-gritty * { &nbsp;&nbsp;&nbsp;&nbsp;box-sizing: border-box;&nbsp; } For some reason I've always avoided using the universal selector thinking it was a known performance hit. BUT, that was more than likely just my ignorance. ;-P &nbsp;“The CSS Universal Selector Is Slow And Should Be Avoided” — Yet Another Lie! &nbsp; Enlightening.
1619974121

Edited 1619974284
Andreas J.
Forum Champion
Sheet Author
Translator
Or use the is() pseudo-class , if you want to keep your selections precise, but still compact: .sheet-rolltemplate-roll :is(div, span, h1, h2), .sheet-rolltemplate-damage :is(div, span, h1, h2), .sheet-rolltemplate-gritty div { box-sizing: border-box; } Hell, even the following might work(according to this example ): :is(.sheet-rolltemplate-roll, .sheet-rolltemplate-damage) :is(div, span, h1, h2), .sheet-rolltemplate-gritty div { box-sizing: border-box; }