Could anyone help me by chance with getting a character sheet rolltable up? I've been trying to make it, but this is my first time and I'm not coding-intelligent. I want to have a rolltable that has a template that contains: The player's character sheet image on the left side. The title of the character at the top. The roll section that I can input a series of d6s in based on one of 4 stats that they have. The game it's meant for is called Cottages & Cerberus I'm effectively trying to make it look like this little layout. <div class="skills2x2">
<!-- CHARM -->
<div class="skill-cell" style="border-right:1px solid #000;border-bottom:1px solid #000;">
<button type="roll" class="skill-title-roll" value="@{roll_charm}">
<span class="text-center upcase" style="display:block;border-bottom:1px solid #000;" data-i18n="Charm">Charm</span>
</button>
<div class="pips">
<input type="checkbox" name="attr_pc_charm_1" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_charm_2" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_charm_3" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_charm_4" value="1" class="shape-diamond-med checked-red">
</div>
</div>
<!-- ALCHEMY -->
<div class="skill-cell" style="border-bottom:1px solid #000;">
<button type="roll" class="skill-title-roll" value="@{roll_alchemy}">
<span class="text-center upcase" style="display:block;border-bottom:1px solid #000;" data-i18n="Alchemy">Alchemy</span>
</button>
<div class="pips">
<input type="checkbox" name="attr_pc_alchemy_1" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_alchemy_2" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_alchemy_3" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_alchemy_4" value="1" class="shape-diamond-med checked-red">
</div>
</div>
<!-- LORE -->
<div class="skill-cell" style="border-right:1px solid #000;">
<button type="roll" class="skill-title-roll" value="@{roll_lore}">
<span class="text-center upcase" style="display:block;border-bottom:1px solid #000;" data-i18n="Lore">Lore</span>
</button>
<div class="pips">
<input type="checkbox" name="attr_pc_lore_1" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_lore_2" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_lore_3" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_lore_4" value="1" class="shape-diamond-med checked-red">
</div>
</div>
<!-- MUSCLE -->
<div class="skill-cell">
<button type="roll" class="skill-title-roll" value="@{roll_muscle}">
<span class="text-center upcase" style="display:block;border-bottom:1px solid #000;" data-i18n="Muscle">Muscle</span>
</button>
<div class="pips">
<input type="checkbox" name="attr_pc_muscle_1" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_muscle_2" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_muscle_3" value="1" class="shape-diamond-med checked-red">
<input type="checkbox" name="attr_pc_muscle_4" value="1" class="shape-diamond-med checked-red">
</div>
</div>
</div>
</div>
<!-- Hidden macros for the four CALM skills -->
<input type="hidden" name="attr_roll_charm" value="&{template:pipstat} {{rollname=@{pcname} - Charm}} {{img=@{avatar}}} {{pool=[[ (0+@{pc_charm_1}) + (0+@{pc_charm_2}) + (0+@{pc_charm_3}) + (0+@{pc_charm_4}) ]]}} {{roll=[[ [[ (0+@{pc_charm_1}) + (0+@{pc_charm_2}) + (0+@{pc_charm_3}) + (0+@{pc_charm_4}) ]]d6kh1 ]]}} {{zerodice=[[ 2d6kl1 ]]}}">
<input type="hidden" name="attr_roll_alchemy"
value="&{template:pipstat} {{rollname=@{pcname} - Alchemy}}
{{pool=[[ (0+@{pc_alchemy_1}) + (0+@{pc_alchemy_2}) + (0+@{pc_alchemy_3}) + (0+@{pc_alchemy_4}) ]]}}
{{roll=[[ [[ (0+@{pc_alchemy_1}) + (0+@{pc_alchemy_2}) + (0+@{pc_alchemy_3}) + (0+@{pc_alchemy_4}) ]]d6kh1 ]]}}
{{zerodice=[[ 2d6kl1 ]]}}">
<input type="hidden" name="attr_roll_lore"
value="&{template:pips} {{rollname=@{pcname} - Lore}}
{{pool=[[ (0+@{pc_lore_1}) + (0+@{pc_lore_2}) + (0+@{pc_lore_3}) + (0+@{pc_lore_4}) ]]}}
{{roll=[[ [[ (0+@{pc_lore_1}) + (0+@{pc_lore_2}) + (0+@{pc_lore_3}) + (0+@{pc_lore_4}) ]]d6kh1 ]]}}
{{zerodice=[[ 2d6kl1 ]]}}">
<input type="hidden" name="attr_roll_muscle"
value="&{template:pipstat} {{rollname=@{pcname} - Muscle}}
{{pool=[[ (0+@{pc_muscle_1}) + (0+@{pc_muscle_2}) + (0+@{pc_muscle_3}) + (0+@{pc_muscle_4}) ]]}}
{{roll=[[ [[ (0+@{pc_muscle_1}) + (0+@{pc_muscle_2}) + (0+@{pc_muscle_3}) + (0+@{pc_muscle_4}) ]]d6kh1 ]]}}
{{zerodice=[[ 2d6kl1 ]]}}"> This is the code for the setup I'm trying to do for the stats. And below is the rolltable. <rolltemplate class="sheet-rolltemplate-pips">
<div class="rt-card">
<!-- LEFT: portrait (optional) -->
<div class="rt-left">
{{#img}}<img src="{{img}}" alt="{{rollname}}">{{/img}}
{{^img}}<div class="rt-left--placeholder"></div>{{/img}}
</div>
<!-- TOP-RIGHT: title -->
<div class="rt-header">{{rollname}}</div>
<!-- BOTTOM-RIGHT: body -->
<div class="rt-body">
<div class="rt-row"><span class="rt-label">Dice</span> {{pool}}</div>
{{#rollTotal() pool 0}}
<div class="rt-row"><span class="rt-label">Result</span> {{zerodice}}</div>
{{/rollTotal() pool 0}}
{{#^rollTotal() pool 0}}
<div class="rt-row"><span class="rt-label">Result</span> {{roll}}</div>
{{/^rollTotal() pool 0}}
</div>
</div>
</rolltemplate>
And here is the CSS I tried to make. .skills2x2 {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns */
align-items: center;
}
.skill-cell {
display: flex;
flex-direction: column;
align-items: center; /* center label + checkbox in each cell */
justify-content: center;
min-height: 3.25rem; /* optional: keep cells even */
}
/* title looks like a header but is clickable */
.skill-title-roll{
background:transparent;border:0;width:100%;padding:.15rem 0;margin:0;
text-transform:uppercase;font-weight:700;text-align:center;cursor:pointer;
}
.pips{display:flex;gap:.4rem;align-items:center;justify-content:center;}
.sheet-rolltemplate-pipstat .rt-card{
background-image: url("<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Court%20Of%20Blades/Images/bg-web.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Court%20Of%20Blades/Images/bg-web.png</a>");
height: max-content;
font-family: "EB Garamond", serif;
color: black;
display: block;
border: double black 5px;
}
.sheet-rolltemplate-pipstat .rt-left{grid-row:1 / span 2; min-height:96px; background:#eef1ff; display:flex; align-items:center; justify-content:center;}
.sheet-rolltemplate-pipstat .rt-left img{width:100%; height:100%; object-fit:cover; display:block;}
.sheet-rolltemplate-pipstat .rt-header{grid-column:2; padding:6px 8px; border-bottom:2px solid #000; text-transform:uppercase; font-weight:700;}
.sheet-rolltemplate-pipstat .rt-body{grid-column:2; padding:8px;}
It's just giving errors when I try to gen it into a chat. Is there a coding guru out there that could help me out here? I'm very lost at this point. T.T
