Community Forums: Roll template styles no more applied on Ironsworn sheet

1661631265

So I made a PR for this sheet that has just been merged, and the style of the roll templates are no more applied, whether on a old game or a new game. I marginally edited the templates styles. They are compiled with stylus so a syntax error is unlikely. Here is an excerpt of the CSS where we can see that the selectors are properly prefixed by the template name. I just forgot to prefix one class that is used in the template. .sheet-rolltemplate-ironsworn_moves .sheet-roll-name { padding: 0.2em 1em 0.2em 1em; text-align: right; font-size: 13px; font-style: italic; } .sheet-rolltemplate-ironsworn_progress .sheet-progress-name { padding: 0.2em 1em 0.2em 1em; text-align: left; font-size: 13px; font-style: italic; } .sheet-rolltemplate-ironsworn_moves .sheet-roll-container, .sheet-rolltemplate-ironsworn_progress .sheet-roll-container { background: #33323c; color: #fff; font-size: 1em; font-family: 'Roboto', Arial, sans-serif; border: 1px solid #000; } .sheet-rolltemplate-ironsworn_moves .sheet-result-row, .sheet-rolltemplate-ironsworn_progress .sheet-result-row { display: flex; justify-content: space-between; } And using the inspector in-game I can see that no selector matches. Needless to say that the rolls don't look good at all now and a fix for this is quite urgent.

1661631617

IDispatch

Permalink Quote

Here is the html as copied from the inspector: <div class="message general you" data-messageid="-NAVmZlr2lAtK7jMdhoU"> <div class="sheet-rolltemplate-ironsworn_moves"> <div class="sheet-roll-container"> <div class="sheet-subheader">Monter le Camp</div> <div class="sheet-roll-name">Aosaskur Groch</div> <div class="sheet-result-body sheet-result-row"> <div class="sheet-action-score-title" data-i18n="roll-action-score">Action Score</div> <div class="sheet-action-score"> <span class="inlinerollresult showtip tipsy-n-right" title="<img src=&quot;/images/quantumrollwhite.png&quot; class=&quot;inlineqroll&quot;> Rolling {d6+1+0,{10}}kl1 = {(<span class=&quot;basicdiceroll&quot;>3</span>)+1+0+{10}}">4</span> </div> </div> <div class="sheet-result-body sheet-result-row"> <div class="sheet-challenge-dice-title" data-i18n="roll-challenge-dice">Challenge Dice</div> <div> <span class="inlinerollresult showtip tipsy-n-right" original-title="<img src=&quot;/images/quantumrollwhite.png&quot; class=&quot;inlineqroll&quot;> Rolling d10 = (<span class=&quot;basicdiceroll&quot;>7</span>)">7</span> <span class="inlinerollresult showtip tipsy-n-right" original-title="<img src=&quot;/images/quantumrollwhite.png&quot; class=&quot;inlineqroll&quot;> Rolling d10 = (<span class=&quot;basicdiceroll&quot;>7</span>)">7</span> </div> </div> <div class="sheet-result-row sheet-roll-outcome"> <div class="sheet-complication"/> <div class="sheet-subfooter" data-i18n="outcome-complication">COMPLICATION</div> </div> <div class="sheet-result-body sheet-result-row"> <div class="sheet-momentum-title" data-i18n="resource-momentum">Momentum</div> <div> <span class="inlinerollresult showtip tipsy-n-right" title="Rolling 9 = 9">9</span> </div> </div> <div class="sheet-result-row sheet-roll-outcome"> <div class="sheet-subfooter sheet-subfooter-momentum" data-i18n="outcome-burn-strong-hit">Burn Momentum: Strong Hit</div> <div class="sheet-strong-hit"/> </div> </div> </div> </div>

1661634499

IDispatch

Permalink Quote

After inspecting more in details I notice that the <head> of the chat frame contains <style type="text/css" title="charsheet"></style> which is empty in Ironsworn sheet, but contains the sheet's CSS on another sheet.

1661682890

Edited 1661683011

Oosh

Sheet Author

API Scripter

Permalink Quote

Did you test the CSS in the sheet sandbox first? Stylus is not an accurate preview of an actual submitted sheet, since it bypasses the sanitizer. Is there any CSS at all working for the sheet? Is it only the roll templates not working?

1661683223

IDispatch

Permalink Quote

No I didn't, I do not have a Pro account. Hopefully it's just the missing template selector, I submitted a PR to fix that. Otherwise I'm at a loss and I will have to revert the changes to the roll templates.

1661684671

Edited 1661684702

Oosh

Sheet Author

API Scripter

Permalink Quote

There are a whole heap of CSS roll template rules at the bottom that are missing the sheet- prefix. I'm not sure why that would cause the problem, but it might be worth commenting them out anyway since they're not doing anything. It is odd that it's passed the sanitizer to be inserted into the i-frame, but not into the main page.

1661685025

Edited 1661687316

IDispatch

Permalink Quote

This sheet is a v2 and those CSS belong to v1 templates that are still there for retro-compatibility I guess. Also perhaps the sanitizer inspects only the classes actually used by the roll templates: the whole CSS is included in the chat frame, and most of it is related to the sheet, with no template selector at all. I've asked for help to the sheet's original author.

1661689607

IDispatch

Permalink Quote

Turns out this had nothing to do with the roll templates CSS but with the charsheet CSS: I used an escaping sequence to add a space around a word and the main page sanitizer did not like that. The sheet itself allowed it though. .charsheet .move-roll-shortcut-title:: before, .charsheet .move-roll-shortcut-title:: after { content: "\a0"; }

1661731957

Oosh

Sheet Author

API Scripter

Permalink Quote

Wow, that's an unnecessary and annoying quirk.

1661777031

IDispatch

Permalink Quote

The PR for the fix is ready since Sunday but not deployed yet. So I'll indicate a workaround for those who would like to play with nicer rolls in the meantime (tested in Chrome only, but it should be possible on Opera and Edge too): basically you just have to copy/paste the CSS inside the HTML where it is missing. Right-click the chat window and select Inspect. This will open the HTML inspector window Scroll to the top of the HTML and expand the <head> tag Scroll down the head tag content until you see <style type="text/css" title="charsheet"></style> near the end. Copy the content of this file (Ctrl+A, Ctrl+C)  <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/7d3e7894fad67c6c634a4b6a476f8c1477e88c47/Ironsworn/Ironsworn.css" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/7d3e7894fad67c6c634a4b6a476f8c1477e88c47/Ironsworn/Ironsworn.css</a> Right-click on <style type="text/css" title="charsheet"></style> and select Edit as HTML Paste the content of the file between "charsheet"> and </style> and click anywhere else on the HTML inspector window to validate your modification: the rolls should now have the proper styling Here is what it should look like: <style type="text/css" title="charsheet"> @import url('<a href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900|Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700|Roboto&display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900|Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700|Roboto&display=swap</a>'); .charsheet { width: 842px !important; margin: 0 auto !important; padding: 15px; font-family: 'Montserrat', Arial, sans-serif; font-weight: normal; /* Fake radio/checkbox */ /* Remove dot from all radios _after_ selected one */ } .charsheet input[type=text] { font-weight: 600; } .charsheet input[type=text]:focus { outline: 3px solid #fd0; outline-offset: 0; box-shadow: inset 0 0 0 3px; } ... ... You will have to do that again is you refresh the page. PS: Unfortunately the forum fails to post if I include images.

Cookie Preferences

Roll template styles no more applied on Ironsworn sheet