I've almost got it. I just need somebody to point out the obvious error my eyes won't see.
I've styled, using the label substitution method, a clickable image to function as a checkbox.
The remaining problem I have is that it doesn't play nice with multiple grid areas.
Here's how it looks as written:
While this works, It’s not how I’d prefer the layout. The shield image(checkbox) to be on the left. So the grid template areas of afattributes should be:
grid-template-areas:
"afheader afheader afheader"
"imgshieldcol aftype aftypeinput"
"imgshieldcol afname afinput"
"shieldhidden shieldhidden shieldhidden";
}
Only when I do this, aftype/aftypeinput appear beside the imgshieldcol normally, but the afname/afinput shunt down to just below the imgshieldcol. It's sort of in the right place, but not exactly:
I've experimented with changing the size (heigh/width) attributes of the shield image to be more responsive to the size of the grid container/s it is in, but anything other than a rigidly defined size results in a tiny, or non-existent image. In this screenshot example I've used auto for width/height (see the tiny grey dot?):
Here's the current code snips I think are relevant:
.character
grid-template-columns: 29% 34% 36%;
align-items: stretch;
justify-items: stretch;
justify-content: stretch;
align-content: stretch;
grid-template-areas:
"common common common"
"primaryattributes afattributes finalcombatattributes"
"atkdefattributes hpattributes finalcombatattributes"
"evaattribute hpattributes finalcombatattributes"
"mamdattributes mpattributes classcombatabilities"
"steperattributes mpattributes classcombatabilities"
"gapfillimg mpattributes classcombatabilities";
}
/* Grid layout for attack/defense attributes with image shields */
.afattributes {
grid-area: afattributes;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
display: grid;
border-style: double;
border-width: 6px;
grid-template-areas:
"afheader afheader afheader"
"aftype aftypeinput aftypeinput"
"afname afinput imgshieldcol"
"shieldhidden shieldhidden shieldhidden";
}
/* Grid layout for attack/defense attributes with image shields */
.afattributes {
grid-area: afattributes;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
display: grid;
border-style: double;
border-width: 6px;
grid-template-areas:
"afheader afheader afheader"
"aftype aftypeinput aftypeinput"
"afname afinput imgshieldcol"
"shieldhidden shieldhidden shieldhidden";
}
/* Grid areas for attack/defense attributes */
.afheader {
grid-area: afheader;
}
.aftype {
grid-area: aftype;
}
.aftypeinput {
grid-area: aftypeinput;
}
.afname {
grid-area: afname;
}
.afinput {
grid-area: afinput;
}
.shieldhidden {
display: none;
text-align: center;
grid-area: shieldhidden;
grid-template-areas:
"shielddie shieldbutton";
}
/* Grid areas for shield attributes */
.shielddie {
grid-area: shielddie;
}
.shieldbutton {
grid-area: shieldbutton;
}
/* Toggle display of shield-related elements based on shield-toggle input */
input.shield-toggle[value="1"] ~ div.shieldhidden {
display: grid;
}
/* Ensure the image container fits within its grid area */
.imgshieldcol {
display: grid; /* Use grid to center content */
align-items: center;
justify-content: space-evenly;
}
/* Style for the checkbox container */
.checkbox-container {
position: relative;
display: grid;
}
/* Hide the default checkbox */
.checkbox-input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
cursor: pointer; /* Ensure the checkbox still responds to clicks */
}
/* Style the image */
.checkbox-image {
display: grid;
width: 51px; /* Set the image width explicitly */
height: 118px; /* Set the image height explicitly */
background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon%20Warriors/DW_Shieldnobg.png') no-repeat center center;
background-size: contain; /* Ensure the image scales correctly */
}
/* Style the text overlay */
.checkbox-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
display: none; /* Hide text by default */
}
/* Show text when checkbox is checked */
.checkbox-input:checked ~ .checkbox-image ~ .checkbox-text {
display: block;
}
/* Grid area for martial attributes */
.mpattributes {
grid-area: mpattributes;
border-style: double;
border-width: 6px;}
<div class="afattributes">
<input type="hidden" class="shield-toggle" name="attr_shield" value="0" />
<div class="afheader">
<label class="boxheading">
Armour
</label>
</div>
<div class="aftype">
<label>
Type
</label>
</div>
<div class="aftypeinput">
<input type="text" class="flexitextinput" name="attr_Armour" value="None" readonly />
</div>
<div class="imgshieldcol">
<label class="checkbox-container">
<input type="checkbox" class="checkbox-input" name="attr_shield" value="1">
<span class="checkbox-image"></span>
<span class="checkbox-text"></span>
</label>
</div>
<div class="afname">
<label>
Armour Factor
</label>
</div>
<div class="afinput">
<label>
<input title="Includes Magic and Miscellaneous Bonuses" type="text" class="fourshorttextinput" name="attr_totalaf" value="0" readonly />
<br>
<br>
Click shield to equip:
</label>
</div>
<div class="shieldhidden">
<div class="shielddie">
Roll
<input title="Modified by Guard/Abilities" type="text" class="fourshorttextinput" name="attr_shieldsuccessvalue" value="1" readonly />
on
<input class="fourshorttextinput" type="text" name="attr_shielddievalue" value="1d6" readonly />
</div>
<div class="shieldbutton">
<button class="d20" type="roll" value="&{template:default} {{name=@{character_name} attempts to block with a Shield}} {{Shield roll= [[@{shielddievalue}]]}} {{Target Result= [[@{shieldsuccessvalue}]] }}" name="roll_shieldcheck" >
</button>
</div>
</div>
</div>