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

Can't get the Roll Template CSS to work

1460748944

Edited 1460749285
Steve D.
Sheet Author
API Scripter
Trying to get the Roll Template CSS to work and I really have no idea why its not working. It seems like the css is not loading...i've tested the css code and it works but when i bring it into roll20 nothing displays. Any help is greatly appreciated! I'm working towards an API free dice roller for FFGs Star Wars. &lt;span&gt;Number of Dice to roll:&lt;/span&gt; &lt;input type="number" name="attr_numdicetoroll" value=1 /&gt; &lt;input type="text" name="attr_rollformula" style="display: none;" value="{{Die one=[[1d6]]}}" /&gt; &lt;button class="sheet-templatebutton" type='roll' name='roll_genericroll' title="@{genericroll}" value='&{template:starwarsdice} {{name=@{character_name}}} @{rollformula}'&gt;&lt;/button&gt; &lt;rolltemplate class="sheet-rolltemplate-starwarsdice"&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;{{name}} &lt;br/&gt; Roll Results&lt;/th&gt; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; {{#allprops()}} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-{{key}}"&gt;{{value}}&lt;/span&gt;&lt;!--{{value}}--&gt; {{/allprops()}} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt;&nbsp; &lt;/table&gt; &lt;/rolltemplate&gt; &lt;script type="text/worker"&gt; on("sheet:opened change:numdicetoroll", function () { 'use strict'; getAttrs(["numdicetoroll"], function (value) { console.log("Number of Dice to Roll: " + value.numdicetoroll); var dice = parseInt(value.numdicetoroll); console.log("Number of Dice Type = " + typeof dice); var newFormula = " "; var newOrd; var i = 0; for (i = 1; i &lt;= dice; i += 1) { console.log("i = " + i); newFormula += "{{boost"+i+"=[[1d6cs&gt;100cf&lt;0]]}} "; console.log("Roll Formula = " + newFormula); } setAttrs({rollformula: newFormula}); }); }); &lt;/script&gt; /* CSS ---------------------------------------------------------- */ .sheet-rolltemplate-starwarsdice span.inlinerollresult { &nbsp; font-size:0px; } .sheet-rolltemplate-starwarsdice span[class*=Boost], .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult::before { &nbsp; &nbsp; display:inline-block; &nbsp; &nbsp; background-size:100%; &nbsp; &nbsp; background-position:center center; &nbsp; &nbsp; background-repeat:no-repeat; &nbsp; &nbsp; width:30px; &nbsp; &nbsp; height:30px; } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="&gt;1&lt;"]::before { &nbsp; content: ""; &nbsp; background-image: url(<a href="http://galacticcampaigns.com/images/EotE/Boost/boostBlank.png" rel="nofollow">http://galacticcampaigns.com/images/EotE/Boost/boostBlank.png</a>); } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="&gt;2&lt;"]::before { &nbsp; content: ""; &nbsp; background-image:url(<a href="http://galacticcampaigns.com/images/EotE/Boost/boostBlank.png" rel="nofollow">http://galacticcampaigns.com/images/EotE/Boost/boostBlank.png</a>); } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="&gt;3&lt;"]::before { &nbsp; content: "";&nbsp; &nbsp; background-image: url(<a href="http://galacticcampaigns.com/images/EotE/Boost/boostS.png" rel="nofollow">http://galacticcampaigns.com/images/EotE/Boost/boostS.png</a>); } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="&gt;4&lt;"]::before { &nbsp; content: ""; &nbsp; background-image: url(<a href="http://galacticcampaigns.com/images/EotE/Boost/boostSA.png" rel="nofollow">http://galacticcampaigns.com/images/EotE/Boost/boostSA.png</a>); } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="&gt;5&lt;"]::before { &nbsp; content: ""; &nbsp; background-image:url(<a href="http://galacticcampaigns.com/images/EotE/Boost/boostAA.png" rel="nofollow">http://galacticcampaigns.com/images/EotE/Boost/boostAA.png</a>); }
1460756320
Steve D.
Sheet Author
API Scripter
Ok Im doing better however still having problems. It turns out Roll20 is looking for css code that uses "&lt;" or "&gt;" and flags it as possible security risk so it was blocking my&nbsp; [original-title*="&gt;5&lt;"] selector. I was able to change it and make it work however the images only show up if you hover over the chat output where the icons should show up. So if you mouse over or around the "Roll Results" header in the chat window.&nbsp; Any thoughts?... New CSS .sheet-rolltemplate-starwarsdice span.inlinerollresult { &nbsp; &nbsp; background:none; &nbsp; &nbsp; border: none; &nbsp; &nbsp; padding: 0px; &nbsp; &nbsp; font-weight: normal; &nbsp; &nbsp; font-size:0px; &nbsp; &nbsp; cursor: help; &nbsp; &nbsp; width:30px; &nbsp; &nbsp; height:30px; &nbsp; &nbsp; display:inline-block; } .sheet-rolltemplate-starwarsdice span.inlinerollresult.fullcrit { &nbsp; &nbsp; border: none; } .sheet-rolltemplate-starwarsdice span.inlinerollresult.fullfail { &nbsp; &nbsp; border: none; } .sheet-rolltemplate-starwarsdice span[class*=Boost], .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult::before { &nbsp; &nbsp; display:inline-block; &nbsp; &nbsp; background-size:100%; &nbsp; &nbsp; background-position:center center; &nbsp; &nbsp; background-repeat:no-repeat; &nbsp; &nbsp; width:30px; &nbsp; &nbsp; height:30px; } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="critfail"]::before { &nbsp; content: ""; &nbsp; background-image: url(<a href="http://i.imgur.com/4QQ9UA2.png);/*" rel="nofollow">http://i.imgur.com/4QQ9UA2.png);/*</a> Blank */ } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="2"]::before { &nbsp; content: ""; &nbsp; background-image:url(<a href="http://i.imgur.com/4QQ9UA2.png" rel="nofollow">http://i.imgur.com/4QQ9UA2.png</a>); /* Blank */ } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="3"]::before { &nbsp; content: "";&nbsp; &nbsp; background-image: url(<a href="http://i.imgur.com/tVNixEf.png" rel="nofollow">http://i.imgur.com/tVNixEf.png</a>); /* S */ } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="4"]::before { &nbsp; content: ""; &nbsp; background-image: url(<a href="http://i.imgur.com/hrkuKZc.png" rel="nofollow">http://i.imgur.com/hrkuKZc.png</a>); /* SA */ } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="5"]::before { &nbsp; content: ""; &nbsp; background-image:url(<a href="http://i.imgur.com/LfCETWC.png" rel="nofollow">http://i.imgur.com/LfCETWC.png</a>); /* AA */ } .sheet-rolltemplate-starwarsdice span[class*=Boost] span.inlinerollresult[original-title*="critsuccess"]::before { &nbsp; content: ""; &nbsp; background-image:url(<a href="http://i.imgur.com/UMy6m2I.png" rel="nofollow">http://i.imgur.com/UMy6m2I.png</a>); /* A */ }
1460811990
Steve D.
Sheet Author
API Scripter
Got it working!!! Turns out I needed to select both "original-title" and "title" attributes because roll20 changes the attribute with javascript when the user rolls over the number.