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 .
×

CSS not apply on roll templates

Hi, I'm working on my character sheet since febuary and I had a break for most of june. I returned few days ago and I discovered that roll templates are broken. The CSS styling doesn't apply to them. I have checked names and difference sandbox and it's still doesn't work. Does Roll20 has recently updated roll templates? I used styling from <a href="https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates#Styling_Roll_Templates" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates#Styling_Roll_Templates</a>.
1688139260
GiGs
Pro
Sheet Author
API Scripter
You need to post a link to your sheet - HTML and CSS. There are so many ways this can happen, it would be folly to try to guess them without seeing your code.
OK, so below are two screenshots with one of the templates. There is a commentary in Polish, but it isn't something valuable. I also add the link to the GitHub repository, where I put my code.&nbsp; repo
1688274079
GiGs
Pro
Sheet Author
API Scripter
I dont even look at screenshots of code. Post the actual code. That way if we see an error we can fix it and show the fix.
I posted the link to GitHub above, but I can also put code here. HTML &lt;rolltemplate class= "sheet-rolltemplate-basicDiceRoll" &gt; &nbsp; &nbsp; &lt;div class= "sheet-template-container" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class= "sheet-template-header" &gt; {{name}} &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class= "sheet-results" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class= "sheet-template-row" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt; Kość główna = {{wynik}} &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class= "sheet-template-row" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt; Kość figury = {{pomoc}} &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ #rollGreater () computed :: wynik 3}} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class= "sheet-template-row-won" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt; Test zdany &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ /rollGreater () computed::wynik 3 }} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ #rollLess () computed :: wynik 4}} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class= "sheet-template-row-lost" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt; Test niezdany &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ /rollLess () computed::wynik 4 }} &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt; &lt;/rolltemplate&gt; CSS .sheet-rolltemplate-basicDiceRoll { &nbsp; &nbsp; display : none ; } .sheet-rolltemplate-basicDiceRoll div .sheet-template-container { &nbsp; &nbsp; border : 2px solid #000 ; &nbsp; &nbsp; border-radius : 3px 3px 3px 3px ; } .sheet-rolltemplate-basicDiceRoll .sheet-template-header { &nbsp; &nbsp; background-color : rgba ( 112 , 32 , 130 , 1 ); &nbsp; &nbsp; color : #000 ; &nbsp; &nbsp; padding : 2px ; &nbsp; &nbsp; border-bottom : 1px solid black ; &nbsp; &nbsp; text-align : center ; &nbsp; &nbsp; line-height : 1.6em ; &nbsp; &nbsp; font-size : 1.2em ; } .sheet-rolltemplate-basicDiceRoll div { &nbsp; &nbsp; padding : 5px ; &nbsp; &nbsp; border-bottom : 1px solid black ; } .sheet-rolltemplate-basicDiceRoll div :nth-child ( odd ) { &nbsp; &nbsp; background-color : rgba ( 217 , 217 , 214 , 1 ); } .sheet-rolltemplate-basicDiceRoll div :nth-child ( even ) { &nbsp; &nbsp; background-color : rgba ( 233 , 233 , 233 , 1 ); } .sheet-rolltemplate-basicDiceRoll .inlinerollresult &nbsp;{ &nbsp; &nbsp; display : inline-block ; &nbsp; &nbsp; min-width : 1.5em ; &nbsp; &nbsp; text-align : center ; &nbsp; &nbsp; border : 2px solid rgba ( 167 , 168 , 170 , 1 ); } .sheet-rolltemplate-basicDiceRoll div .sheet-template-row-lost { &nbsp; &nbsp; color : rgb ( 202 , 11 , 11 ); } .sheet-rolltemplate-basicDiceRoll div .sheet-template-row-won { &nbsp; &nbsp; color : rgb ( 22 , 149 , 11 ); }
1688304008
GiGs
Pro
Sheet Author
API Scripter
Szymon R. said: I posted the link to GitHub above, but I can also put code here. So you did, oops! Can you post what a sample roll would look like?
This is the way it has looked like some time ago And this is the current state.
1688315758
GiGs
Pro
Sheet Author
API Scripter
Oops, I meant the text&nbsp; of the roll macro. Not what the result actually looked like in chat.
1688357784
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Hi Szymon, The problem is actually with some of your polish characters (specifically&nbsp; ó ). This character is included in the high byte order character range that the css security scan checks for. In my opinion this should be considered a bug since this is obviously not a malicious character. I'd recommend submitting a bug ticket to Roll20 on this. I'll also see if I can ping one of the sheet devs about it.
1688365838
GiGs
Pro
Sheet Author
API Scripter
I'd never have spotted that. Good to know.
Scott C. said: Hi Szymon, The problem is actually with some of your polish characters (specifically&nbsp; ó )... I removed polish characters, but it still doesn't work. GiGs said: Oops, I meant the text of the roll macro. Not what the result actually looked like in chat. It's a little tricky, because I generate macro with JS, but I can post an example. &amp;{template:basicDiceRoll} {{name=@{name} wykonuje test hazardu}} {{wynik=[[@{gamble}! +@{gamble_mod} +?{Modyfikator|0}]]}} {{pomoc=[[d6! +@{gamble_mod} +?{Modyfikator|0}]]}}
1688403081
GiGs
Pro
Sheet Author
API Scripter
Before I try to test the code and figure out what's wrong, a question: Have you tried this with multiple characters and are you seeing the problem with all of them?
GiGs said: Before I try to test the code and figure out what's wrong, a question: Have you tried this with multiple characters and are you seeing the problem with all of them? Yes, and I also try creating new games, but it didn't change anything.
1688501566

Edited 1688501670
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Hmm, your code works for me with two changes: Remove all&nbsp; ó Remove the display:none &nbsp;from the .sheet-rolltemplate-basicDiceRoll Note this would mean changing several of your background image urls to be used in the actual sheet.
Scott C. said: Hmm, your code works for me with two changes: Remove all&nbsp; ó Remove the display:none &nbsp;from the .sheet-rolltemplate-basicDiceRoll Note this would mean changing several of your background image urls to be used in the actual sheet. O wow! Previously I remove " ó" only from HTML file. So error happened when I add link with image contains " ó ". I know that I shouldn't, but somehow I did. Thank you very much.
1688565183
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Ah, yeah, you can leave them in the html, it's only the css that has an issue with them.