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

Change critical hit condition

I am using a system where all dice rolls you throw 2d10 and the critical or miss conditions are to have in both dice two 10 or two 1. I created my own character sheet and dice rolls template but I'm having trouble because when in the two d10 it hits a 1 or a 10 it shows up as a critical or miss hit (when it should be when both are these numbers). I didn't find any gide to change critical roll conditions so I was wondering if it is even posible. 
1657750116
GiGs
Pro
Sheet Author
API Scripter
If youre making your own character sheet, you probably should be looking at roll templates and/or custom roll parsing . Criticals by nature are per die, to check for multiple dice needs a bit more finesse.
GiGs said: If youre making your own character sheet, you probably should be looking at roll templates and/or custom roll parsing . Criticals by nature are per die, to check for multiple dice needs a bit more finesse. I used the "roll templates" page to make the custom dice roll template but I didn't find any information about changing critical roll conditions D:
1657757288
GiGs
Pro
Sheet Author
API Scripter
You dont want to be looking at that, because you are going beyond what roll20 supports. You probably need to look at the rollGreater function, and compare the dice against it - it's hard to say exactly without seeing your dice roll value, and your current rolltemplate. Post them and we can help.
GiGs said: You dont want to be looking at that, because you are going beyond what roll20 supports. You probably need to look at the rollGreater function, and compare the dice against it - it's hard to say exactly without seeing your dice roll value, and your current rolltemplate. Post them and we can help. Sure I can show you the code. Roll template HTML: &lt;rolltemplate class="sheet-rolltemplate-custom"&gt; &lt;div class="sheet-container sheet-color-{{color}}"&gt; &lt;div class="sheet-header"&gt; {{#title}}&lt;div class="sheet-title"&gt;{{title}}&lt;/div&gt;{{/title}} {{#subtitle}}&lt;div class="sheet-subtitle"&gt;{{subtitle}}&lt;/div&gt;{{/subtitle}} &lt;/div&gt; &lt;div class="sheet-content"&gt; {{#allprops() title subtitle desc color}} &lt;div class="sheet-key"&gt;{{key}}&lt;/div&gt; &lt;div class="sheet-value"&gt;{{value}}&lt;/div&gt; {{/allprops() title subtitle desc color}} {{#desc}}&lt;div class="sheet-desc"&gt;{{desc}}&lt;/div&gt;{{/desc}} &lt;/div&gt; &lt;/div&gt; &lt;/rolltemplate&gt; Roll template CSS: /* Smaller margins - remove these if you want the huge default left margin */ .sheet-rolltemplate-custom { margin-left: -37px; padding-top: 10px; } .withoutavatars .sheet-rolltemplate-custom { margin-left: -7px; } .sheet-rolltemplate-custom .sheet-container { border: 1px solid; /* by default, the border is the same color as the header. You can change this here, e.g. to black */ border-color: black; } /* Header formatting - title and subtitle */ .sheet-rolltemplate-custom .sheet-header { /* change text-align to center to center the header text */ text-align: left; color: var(--header-text-color); padding: 5px; background-image: url(<a href="https://i.imgur.com/q8JRqGT.jpg" rel="nofollow">https://i.imgur.com/q8JRqGT.jpg</a>); font-weight:bold; color: #FFF; } .sheet-rolltemplate-custom .sheet-title { font-size:1.5em; padding-bottom: 6px; } .sheet-rolltemplate-custom .sheet-subtitle { font-size: .8em; padding-left: 2px; } /* Allprops part */ .sheet-rolltemplate-custom .sheet-content { display: grid; /* Header formatting - modify the column layout below */ grid-template-columns: auto auto; /* Line height to match default roll template */ line-height:1.4em; background-image: url(<a href="https://i.imgur.com/0iaP5m4.jpg" rel="nofollow">https://i.imgur.com/0iaP5m4.jpg</a>); } .sheet-rolltemplate-custom .sheet-content &gt; div { padding: 10px; } /* Left column */ .sheet-rolltemplate-custom .sheet-content .sheet-key { font-weight: bold; padding-right: 10px; text-align: right; } /* Empty rule, use this if you want to change the right column .sheet-rolltemplate-custom .sheet-value { } */ /* Make even-numbered rows grey */ .sheet-rolltemplate-custom .sheet-content :nth-child(4n+3), .sheet-rolltemplate-custom .sheet-content :nth-child(4n) { background-color: transparent !important; border-top: 2px solid #503722; } /* Description field */ .sheet-rolltemplate-custom .sheet-desc { grid-column: span 2; padding: 5px; text-align: center; } .sheet-rolltemplate-custom .inlinerollresult { background-color: transparent !important; color: #000000 !important; border: none !important; background-image: url(<a href="https://i.imgur.com/LNpvmJH.png" rel="nofollow">https://i.imgur.com/LNpvmJH.png</a>) !important; background-size: 30px; background-repeat: no-repeat; background-position: center; padding: 10px !important; } .sheet-rolltemplate-custom .sheet-value { background-color: transparent !important; } .sheet-rolltemplate-custom .sheet-key { background-color: transparent !important; } .sheet-rolltemplate-custom .sheet-content { background-color: transparent !important; } .sheet-rolltemplate-custom-attack .inlinerollresult { background-color: transparent !important; color: #000000 !important; border: none !important; font-size: 1em !important; padding: 0px !important; } .sheet-rolltemplate-custom .inlinerollresult.fullcrit { color: #000000 !important; border: none !important; background-image: url(<a href="https://i.imgur.com/Z04cjoo.png" rel="nofollow">https://i.imgur.com/Z04cjoo.png</a>) !important; } .sheet-rolltemplate-custom .inlinerollresult.fullfail { color: #000000 !important; border: none !important; background-image: url(<a href="https://i.imgur.com/jDcJJoP.png" rel="nofollow">https://i.imgur.com/jDcJJoP.png</a>) !important; } .sheet-rolltemplate-custom .inlinerollresult.importantroll { color: #000000 !important; border: none !important; } .sheet-rolltemplate-custom .sheet-specialrollflag { color: #000000 !important; height: 30px !important; text-align: right !important; vertical-align: top !important; } Dice roll button: &lt;button class="sheet-noweapons_button" name="roll_NoWeapons" value="&amp;{template:custom} {{title=Sin Armas}} {{subtitle=@{noweapons_specialty}}} {{Localización = [[1d10]]}} {{Resultado=[[2d10 + @{noweapons_mhc}]]}}" type="roll"&gt;&lt;/button&gt; I know it is a mess, specialy the CSS, I hope you can understand everything.&nbsp; The HTML is a version of: "Jakob's Better Default Rolltemplate" of&nbsp; Building Character Sheets/Roll Templates &nbsp;and the CSS is a mix of "Jakob's Better Default Rolltemplate" and "Chronicles of Darkness". Thank you!
1657862822

Edited 1657863658
GiGs
Pro
Sheet Author
API Scripter
You'll need to use the Reusing Rolls trick, and add an extra rolltemplate key, like so: value="&amp;{template:custom} {{title=Sin Armas}} {{subtitle=@{noweapons_specialty}}} [[ [[2d10]] + @{noweapons_mhc}]] {{Localización = [[1d10]]}} {{critcheck=$[[0]]}} {{Resultado=$[[1]]}}" Note: this moves your resultado inline roll outside of the {{}} brackets, so it is ignored by the rolltemplate code. But it adds the two constructs $[[0]] and $[[1]]. The last one is your old Resultado, but I've added critcheck which includes the 2d10 roll alone. Then your rolltemplate is altered a little: &lt;rolltemplate class="sheet-rolltemplate-custom"&gt; &lt;div class="sheet-container sheet-color-{{color}}"&gt; &lt;div class="sheet-header"&gt; {{#title}}&lt;div class="sheet-title"&gt;{{title}}&lt;/div&gt;{{/title}} {{#subtitle}}&lt;div class="sheet-subtitle"&gt;{{subtitle}}&lt;/div&gt;{{/subtitle}} &lt;/div&gt; &lt;div class="sheet-content"&gt; &lt;div class="sheet-key"&gt;Resultado&lt;/div&gt; &lt;div class="sheet-value"&gt;{{Resultado}} {{#rollTotal() critcheck 20}}Critical!{{/rollTotal() critcheck 20}}{{#rollTotal() critcheck 2}}Fumble!{{/rollTotal() critcheck 2}}&lt;/div&gt; {{#allprops() title subtitle desc color critcheck Resultado}} &lt;div class="sheet-key"&gt;{{key}}&lt;/div&gt; &lt;div class="sheet-value"&gt;{{value}}&lt;/div&gt; {{/allprops() title subtitle desc color critcheck Resultado}} {{#desc}}&lt;div class="sheet-desc"&gt;{{desc}}&lt;/div&gt;{{/desc}} &lt;/div&gt; &lt;/div&gt; &lt;/rolltemplate&gt; I've added critcheck and Resultado to the allprops section, so they dont get printed out automatically. I've also added a separate section to show Resultado, and show a critical or fumble when you get one. You can play around with how you want this to display. You could, for instance, change the Critical! and Fumble! parts to classes, and have the Resultado show in a different style when its a critical or fumble. &lt;div class="sheet-value{{#rollTotal() critcheck 20}} sheet-critical{{/rollTotal() critcheck 20}}{{#rollTotal() critcheck 2}} sheet-fumble{{/rollTotal() critcheck 2}}"&gt;{{Resultado}}&lt;/div&gt; You'd need to add the sheet-critical and sheet-fumble classes to your CSS, but they will only be applied when both d10s add up to either 2 or 20.
I just tested it and it work very very well, thank you so much. I had one question, the last &lt;div&gt; where I should paste it? I pasted on the top of the HTML and I was thinking about adding a class to make through CSS a display:none &nbsp;propperty but I don't think that is good praxis.
1657916461
GiGs
Pro
Sheet Author
API Scripter
What div are you referring to? I added a div inside the rolltemplate, that's the only one you should need to add.
Sorry, I was refering to this: &lt;div class="sheet-value{{#rollTotal() critcheck 20}} sheet-critical{{/rollTotal() critcheck 20}}{{#rollTotal() critcheck 2}} sheet-fumble{{/rollTotal() critcheck 2}}"&gt;{{Resultado}}&lt;/div&gt;
1657923693
GiGs
Pro
Sheet Author
API Scripter
Oh, i see. I posted that as a possible replacement for one line in the rolltemplate I included. Swap it with this line: &lt;div class="sheet-value"&gt;{{Resultado}} {{#rollTotal() critcheck 20}}Critical!{{/rollTotal() critcheck 20}}{{#rollTotal() critcheck 2}}Fumble!{{/rollTotal() critcheck 2}}&lt;/div&gt; Or create a new line that uses elements of both. For that line, you'd need to create the two new CSS classes mentioned.
When you say create the CSS classes I think you are referring to make them in the roll template but I honestly don't know where I have to create them cause right now I don't have any class called&nbsp; sheet-critical &nbsp;and&nbsp; sheet-fumble in the HTML D:
1657931059
GiGs
Pro
Sheet Author
API Scripter
You have a CSS section that starts like this: /* Smaller margins - remove these if you want the huge default left margin */ .sheet-rolltemplate-custom { margin-left: -37px; padding-top: 10px; } .withoutavatars .sheet-rolltemplate-custom { margin-left: -7px; } I'm suggesting that if you want to use that version of the div, you'd need to add CSS classes there to support hme, sonething like .sheet-rolltemplate-custom .sheet-critical { color: green; } .sheet-rolltemplate-custom .sheet-fumble { color: red; } That would make the text colour green or red, you might want to add extra style information. A lot of your code has !important so you might need to add that (or increase specificity as described here: <a href="https://cybersphere.me/specificity-and-inheritance/" rel="nofollow">https://cybersphere.me/specificity-and-inheritance/</a> There's a whole series of posts there about CSS that might be worth reading through. I havent written specifically about rolltemplates there, but for this, the information there is all you need.
Alright, I think I know where is the problem. Im using this &lt;div&gt;. &lt;div class="sheet-value{{#rollTotal() critcheck 20}} sheet-critical{{/rollTotal() critcheck 20}}{{#rollTotal() critcheck 2}} sheet-fumble{{/rollTotal() critcheck 2}}"&gt;{{Resultado}}&lt;/div&gt; Cause you said this is the way to make crits and fumble different. GiGs said: You'll need to use the Reusing Rolls trick, and add an extra rolltemplate key, like so: value="&amp;{template:custom} {{title=Sin Armas}} {{subtitle=@{noweapons_specialty}}} [[ [[2d10]] + @{noweapons_mhc}]] {{Localización = [[1d10]]}} {{critcheck=$[[0]]}} {{Resultado=$[[1]]}}" Note: this moves your resultado inline roll outside of the {{}} brackets, so it is ignored by the rolltemplate code. But it adds the two constructs $[[0]] and $[[1]]. The last one is your old Resultado, but I've added critcheck which includes the 2d10 roll alone. Then your rolltemplate is altered a little: &lt;rolltemplate class="sheet-rolltemplate-custom"&gt; &lt;div class="sheet-container sheet-color-{{color}}"&gt; &lt;div class="sheet-header"&gt; {{#title}}&lt;div class="sheet-title"&gt;{{title}}&lt;/div&gt;{{/title}} {{#subtitle}}&lt;div class="sheet-subtitle"&gt;{{subtitle}}&lt;/div&gt;{{/subtitle}} &lt;/div&gt; &lt;div class="sheet-content"&gt; &lt;div class="sheet-key"&gt;Resultado&lt;/div&gt; &lt;div class="sheet-value"&gt;{{Resultado}} {{#rollTotal() critcheck 20}}Critical!{{/rollTotal() critcheck 20}}{{#rollTotal() critcheck 2}}Fumble!{{/rollTotal() critcheck 2}}&lt;/div&gt; {{#allprops() title subtitle desc color critcheck Resultado}} &lt;div class="sheet-key"&gt;{{key}}&lt;/div&gt; &lt;div class="sheet-value"&gt;{{value}}&lt;/div&gt; {{/allprops() title subtitle desc color critcheck Resultado}} {{#desc}}&lt;div class="sheet-desc"&gt;{{desc}}&lt;/div&gt;{{/desc}} &lt;/div&gt; &lt;/div&gt; &lt;/rolltemplate&gt; I've added critcheck and Resultado to the allprops section, so they dont get printed out automatically. I've also added a separate section to show Resultado, and show a critical or fumble when you get one. You can play around with how you want this to display. You could, for instance, change the Critical! and Fumble! parts to classes, and have the Resultado show in a different style when its a critical or fumble. &lt;div class="sheet-value{{#rollTotal() critcheck 20}} sheet-critical{{/rollTotal() critcheck 20}}{{#rollTotal() critcheck 2}} sheet-fumble{{/rollTotal() critcheck 2}}"&gt;{{Resultado}}&lt;/div&gt; You'd need to add the sheet-critical and sheet-fumble classes to your CSS, but they will only be applied when both d10s add up to either 2 or 20. The problem here, as you can see in this screenshot, is that in order to change the gear's color to green or red, deppending if it is a critical hit or a fumble I put a background-image according to the result, but I need to diferentiate them by classes in order to do so, and in the HTML right now there aren't any classes to diferentiate it.
1657935020
GiGs
Pro
Sheet Author
API Scripter
This is the CSS which you need to override: .sheet-rolltemplate-custom .inlinerollresult { background-color: transparent !important; color: #000000 !important; Notice your code has !important all over it. that's a problem - you should avoid using !important whenever possible. But I think you can do it by adding this code: .sheet-rolltemplate-custom .sheet-critical .inlinerollresult { color: green !important } .sheet-rolltemplate-custom .sheet-fumble .inlinerollresult { color: red !important } But personally I'd go through and start removing all the !Important entries and start increasing the specificity of your css declarations so that you don't need it. If the previous sentence sounds like gobbledigook to you, just try adding the CSS I've listed above.