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

Problem with styling roll Template and Inlineroll Tooltip

1667474015

Edited 1667474138
Yui V.
Pro
Sheet Author
Hello, I'm creating a Roll Template but I have an incomprehensible problem: The template has a header and a body, and the header css style works, but not the body's... In fact, everything works except the body styling (and the tooltip thing, at the end of this post) Here's he code, I use Legacy Sanitization: <rolltemplate class="sheet-rolltemplate-test"> <div class="sheet-template-header"> {{name}} rolls for </div> <div class="sheet-template-body"> {{skill}} ({{char}}) <div class="sheet-template-results"> <div class="sheet-template-total">{{computed::roll3}}</div> <h4>{{roll1}} {{roll2}}</h4> </div> <div class="sheet-template-gimikku"> <h5>gimikku</h5> {{gimikku}} </div> </div> </rolltemplate> .sheet-rolltemplate-test .sheet-template-body{ text-align:center; background-color: white; border: 1px solid gray; width:98%; } .sheet-rolltemplate-test .sheet-template-header { border: 1px solid black; background-color: gray; color: white; text-align:left; width:98%; padding:4px; } .sheet-rolltemplate-test .sheet-template-results { text-align:center; padding:5px; } .sheet-rolltemplate-test .sheet-template-total { margin:4px; } .sheet-rolltemplate-test .sheet-template-gimikku { text-align:center; padding:4px; background: rgb(245,245,245); } .sheet-rolltemplate-test .sheet-template-results .sheet-template-total .inlinerollresult { background-color: transparent; padding-left: 0px; margin-left: -3px; font-size: 3em; border: none; } .sheet-rolltemplate-test .sheet-template-results .inlinerollresult { background: rgb(245,245,245); border:none; border-radius: 4px; } .sheet-rolltemplate-test .sheet-template-results .inlinerollresult.fullfail, .sheet-rolltemplate-test .sheet-template-results .inlinerollresult.critfail { color:#7f8688; } As you can see, the body class does not work. (the attributes skillname, skill_char and custom_gimikku do not exist yet on the sheet on which I'm testing the template, so it's normal that they don't display) Am I doing something wrong? Then, there's the tooltip thing (the last line of the CSS) I'm trying to get the critfails in the tooltip   to display in gray rather than red (like it was dropped) , the tooltip appears when hovering over an inline roll result. But I can't seem to make it work... (the inline roll box itself works fine, displaying crit fails (4's to be precise) in gray just fine) I used Oosh' post ( Blue Dice on /r Rolls and Inline Tooltips ) as reference, but I does not change the color of the crits dispayed in the tooltip... Do you have any idea? Thank You
1667496856
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Going to answer the tooltip first as it's the simple answer; unfortunately we have no control over the styles of the tooltip itself. We can only control how the roll itself looks in the template. For the body issue. I haven't dealt with this exact problem in a while, but I seem to remember there being an issue if the mustache fields were on a new line from the containing html. Try this for your template's html: <rolltemplate class="sheet-rolltemplate-test"> <div class="sheet-template-header"> {{name}} rolls for </div> <div class="sheet-template-body">{{skill}} ({{char}}) <div class="sheet-template-results"> <div class="sheet-template-total">{{computed::roll3}}</div> <h4>{{roll1}} {{roll2}}</h4> </div> <div class="sheet-template-gimikku"> <h5>gimikku</h5> {{gimikku}} </div> </div> </rolltemplate> I'll note though that I can't replicate your issue when I copy your code into a test game, so your mileage may vary.
1667559498
Yui V.
Pro
Sheet Author
Scott C. said: I'll note though that I can't replicate your issue when I copy your code into a test game, so your mileage may vary. Hi, it lookks like it was some sort of hidden page setting problem.... When I copy-pasted the code onto other games, both pre-existing, and new, it worked just fine, the "body" class div was styled just right... I say hidden page setting because, the problem subsist on the original campaign page, even on Firefox (I use Chrome as my main) so, it's not a cache thing, is it? Similarly, I noticed that on one campaign and its copies, the default character and handout window height was smaller than on other campaign, each time you open  handout/character, again both on Chrome and Firefox. After testing stuff, it appears that the reduced default height problem diseappears when copying the game without checking the  Players and Player Settings (Including Macros) box... Update: I checked with another player, and, alghough he doesn't have the window height problem, (his screen is  1280 x 1024, mine is 1920*1080, but this seems definitely like a player and player setting problem ) He stills has the template "body" not displaying problem, even on his side..... And on my side, even when copying the game with only "journal and handouts checked + the character sheet set to "custom" to keep the sheet, the problem subsits, so it's not a player setting issue... So: problem 1 solved by just moving the code to another page.... The Inline tooltip problem subsist though. Scott C. said it's not possible, but Oosh seems to have at least done it for Importantroll's, although I couldn't replicate it.
1667564561
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Oosh's code to style the tooltip itself is for the stylus plugin, not for character sheets. It's something you can apply to your personal view of the game via the plugin, but not something we can do with chat sheet code 
1667578804
Yui V.
Pro
Sheet Author
Oh, I see, thank you for the explanation !