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

My rolltemplate css problem

Hello, I used my custom template &amp; roll&nbsp; I used two sheet in one html like this &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}} {{#sstitle}}&lt;div class="sheet-sstitle"&gt;{{sstitle}}&lt;/div&gt;{{/sstitle}} {{#subtitle}}&lt;div class="sheet-subtitle"&gt;{{subtitle}}&lt;/div&gt;{{/subtitle}} &lt;/div&gt; &lt;div class="sheet-content"&gt; {{#allprops() title sstitle 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 sstitle subtitle desc color}} {{#desc}}&lt;div class="sheet-desc"&gt;{{desc}}&lt;/div&gt;{{/desc}} &lt;/div&gt; &lt;/div&gt; &lt;/rolltemplate&gt; &lt;rolltemplate class="sheet-rolltemplate-rc"&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 sstitle 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 sstitle subtitle desc color}} &lt;/div&gt; &lt;/div&gt; &lt;/rolltemplate&gt; and my css is this&nbsp; @font-face { font-family: 'NanumSquareRound'; src: url('<a href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff" rel="nofollow">https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff</a>') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SunBatang-Bold'; src: url('<a href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/SunBatang-Bold.woff" rel="nofollow">https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/SunBatang-Bold.woff</a>') format('woff'); font-weight: normal; font-style: normal; } /* Smaller margins - remove these if you want the huge default left margin */ .sheet-rolltemplate-custom { margin-left: 0px; } .withoutavatars .sheet-rolltemplate-custom { margin-left: 0px; } .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 { background-color: white; /* change text-align to center to center the header text */ text-align: center; color: black; } .sheet-rolltemplate-custom .sheet-title { width: 100%; font-size:1.5em; } .sheet-rolltemplate-custom .sheet-sstitle { width: 100%; font-size:.9em; text-align: center; background-color: red; background-size: cover; letter-spacing: 5px; padding-top: 1px; padding-bottom: 1px; color: white; border: none; font-family: 'NanumSquareRound', sans-serif; } .sheet-rolltemplate-custom .sheet-subtitle { width: 100%; padding-top: 12px; padding-bottom: 12px; background-color: red; background-image:url(<a href="https://media.discordapp.net/attachments/705388250461634694/812440692063469588/6.png" rel="nofollow">https://media.discordapp.net/attachments/705388250461634694/812440692063469588/6.png</a>); background-size: cover; background-repeat: no-repeat; font-weight: bold; overflow: hidden; color: white; font-size:1.3em; text-align: center; line-height: 110%; font-family: 'SunBatang-Bold', serif; } /* example colors */ .sheet-rolltemplate-custom .sheet-container { /* this is the default color */ --header-bg-color: rgba(112,32,130,1); --header-text-color: #FFF; } .sheet-rolltemplate-custom .sheet-container.sheet-color-red { --header-bg-color: #F00; } .sheet-rolltemplate-custom .sheet-container.sheet-color-green { --header-bg-color: #0F0; --header-text-color: #000; } /* Allprops part */ .sheet-rolltemplate-custom .sheet-content { display: grid; background: #FFF; /* Header formatting - modify the column layout below */ grid-template-columns: auto auto; /* Line height to match default roll template */ line-height:1.4em; } .sheet-rolltemplate-custom .sheet-content &gt; div { padding: 7px; padding-left: 10px; font-family: 'NanumSquareRound', sans-serif; font-size:1.0em; } /* Left column */ .sheet-rolltemplate-custom .sheet-content .sheet-key { font-weight: bold; padding-right: 10px; text-align: right; font-family: 'NanumSquareRound', sans-serif; font-size:1.0em; } /* 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:#EEE; } /* Description field */ .sheet-rolltemplate-custom .sheet-desc { grid-column: span 2; padding: 5px; text-align: center; } .sheet-rolltemplate-custom .inlinerollresult { background:none !important; padding:0 !important; border:none !important; color:rgb(218, 15, 0) !important; } /* Smaller margins - remove these if you want the huge default left margin */ .sheet-rolltemplate-rc { margin-left: 0px; } .withoutavatars .sheet-rolltemplate-rc { margin-left: 0px; } .sheet-rolltemplate-rc .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-rc .sheet-header { background-color: white; /* change text-align to center to center the header text */ text-align: center; color: black; } .sheet-rolltemplate-rc .sheet-title { width: 100%; padding: 5px; font-size:1.1em; text-align: center; letter-spacing: 5px; font-family: 'NanumSquareRound', sans-serif; } .sheet-rolltemplate-rc .sheet-subtitle { width: 100%; height: 40px; padding-top: 38px; padding-bottom: 30px; background-color: none; background-image:url(<a href="https://media.discordapp.net/attachments/705388250461634694/812436391274610708/6.png" rel="nofollow">https://media.discordapp.net/attachments/705388250461634694/812436391274610708/6.png</a>); background-size: cover; background-repeat: no-repeat; font-weight: bold; overflow: hidden; color: white; font-family: 'SunBatang-Bold', serif; font-size:1.5em; text-align: center; line-height: 110%; } /* example colors */ .sheet-rolltemplate-rc .sheet-container { /* this is the default color */ --header-bg-color: rgba(112,32,130,1); --header-text-color: #FFF; } .sheet-rolltemplate-rc .sheet-container.sheet-color-red { --header-bg-color: #F00; } .sheet-rolltemplate-rc .sheet-container.sheet-color-green { --header-bg-color: #0F0; --header-text-color: #000; } /* Allprops part */ .sheet-rolltemplate-rc .sheet-content { display: grid; background: #FFF; /* Header formatting - modify the column layout below */ grid-template-columns: auto auto; /* Line height to match default roll template */ line-height:1.4em; } .sheet-rolltemplate-rc .sheet-content &gt; div { padding: 7px; padding-left: 10px; } /* Left column */ .sheet-rolltemplate-rc .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-rc .sheet-value { } */ /* Make even-numbered rows grey */ .sheet-rolltemplate-rc .sheet-content :nth-child(4n+3), .sheet-rolltemplate-rc .sheet-content :nth-child(4n) { background:#EEE; } /* Description field */ .sheet-rolltemplate-rc .sheet-desc { grid-column: span 2; padding: 5px; text-align: center; } .sheet-rolltemplate-rc .inlinerollresult, { background-color: transparent !important; border: none !important; padding: 0px 0px ; font-weight: bold ; cursor: help; font-size: 1.25em ; font-family: 'SunBatang-Bold', serif; padding: 2px; } .sheet-rolltemplate-rc .inlinerollresult.fullcrit, { border: none !important; color: #FF0011 !important; } .sheet-rolltemplate-rc .inlinerollresult.importantroll, { border: none !important; color: #4A57ED !important; } .sheet-rolltemplate-rc .inlinerollresult.fullfail, { border: none !important; color: #3FDF00 !important; } And after update, sheet-rolltemplate-custom .inlinerollresult's custom has no problem, but rc-template roll result custom does not apply.&nbsp; how to fix this problem?&nbsp;
1615582638
Kraynic
Pro
Sheet Author
I haven't tested this, so may not be an issue.&nbsp; I think you have some commas that shouldn't be there.&nbsp; I would remove those and see if that makes things behave. .sheet-rolltemplate-rc .inlinerollresult.fullcrit, { border: none !important; color: #FF0011 !important; } .sheet-rolltemplate-rc .inlinerollresult.importantroll, { border: none !important; color: #4A57ED !important; } .sheet-rolltemplate-rc .inlinerollresult.fullfail, { border: none !important; color: #3FDF00 !important; } Probably should be: .sheet-rolltemplate-rc .inlinerollresult.fullcrit { border: none !important; color: #FF0011 !important; } .sheet-rolltemplate-rc .inlinerollresult.importantroll { border: none !important; color: #4A57ED !important; } .sheet-rolltemplate-rc .inlinerollresult.fullfail { border: none !important; color: #3FDF00 !important; }
1615677733
David
Sheet Author
.sheet-rolltemplate-rc .inlinerollresult.importantroll, As I have&nbsp; found to my cost errant commas definitely break the CSS in the new sanitisation.&nbsp;
thank you! TT&nbsp; I solve this problem! Thank you for yours advice!! TT
1616021951
GiGs
Pro
Sheet Author
API Scripter
Those commas would likely have broken the CSS before the new sanitation too. At least, I've experienced that happening.