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 .
Advertisement Create a free account

Help coding Character Sheets that use stats placed over pictures (Eg a Body Image with Head/Arm/Torso/Leg armor & stats boxes)


Edited 1626832019
I'd like to try and add some images to my character sheets (Peoples outlines, vehicle images like Car/Bike/etc), with statistics next to various locations - Like the Head has Helmet & Googles/Visor items locations & Head HP box. I was wondering if there any advice or example code on how other people have attempted this? I am guessing I have try to upload specific images & use div lines, percentages/pixels to move boxes about those images to make it work for each one. It would be cool if I could specify something to appear at X pixels height & Y pixels across the image. Or maybe someone has a better method? Also, can anyone offer advice on the code to set an image beneath/behind these text & input boxes? Or vice versa, the code to put a text or inpt box over an image? I'm still pretty new to Roll20 sheets... ^^' I'll find it in the wiki eventually I'm sure - but I've set myself one hell of a sheet to try and create so I'll eat my humble pie and ask for help before I get too lost and distracted with all the other cool coding you can try to build in... I'm aiming for something like this D&D sheet:

Edited 1626842693
I'm no pro with HTML & CSS, but I would imagine using a combination of grid layout and position: absolute would be a place to start (grid is optional but I'd recommend it). If you don't need anything except the image on the back layer, you can just use the background-image CSS property on your outer <div>, and build a sheet as per usual. So for the above D&D image, I'd probably approach it something like this (I've simplified it into 3 columns, which isn't quite accurate to the above and would need some tweaking): The rough HTML: < div   class = "outer-container" >      < div   class = "grid-column left" >          < div   class = "floating-attribute head" >              < span > Head Slot:  </ span >              < input   type = "text"   name = "attr_inventory_head"/ >          </ div >          < div   class = "floating-attribute shoulder" >              < span > Shoulder Slot:  </ span >              < input   type = "text"   name = "attr_inventory_shoulder"/ >          </ div >          <!-- Left column attributes continue....... -->      </ div >      < div   class = "grid-column center" >          <!-- Center column attributes -->      </ div >      < div   class = "grid-column right" >          <!-- Right column attributes -->      </ div > </ div > and bare-bones CSS: .outer-container  {      background-image :  url ( 'silhouetteGuy.jpg' );      display :  grid ;  /* Split the attributes into 3 even columns */      grid-template-columns :  auto   auto   auto ; } .grid-column  {      position :  relative ;  /* This is needed for the 'position: absolute' child to anchor to */ } .floating-attribute  {      position :  absolute ;  /* This allows you to easily position the elements with the top & left properties */ } .floating-attribute.head  {  /* Each attribute will need at least the 'top' property set to position it correctly over the image */      top :  15% ; } .floating-attribute.face ,  /* If you have two attributes in different columns sharing the same vertical offset, you can combine them */ .floating-attribute.elbow  {      top :  25% ; } One of the proper sheet gurus may have a much better way of doing it though! If you do use position: absolute, don't forget to put a position: relative on the element you want to position it off, otherwise it'll keep traveling up the DOM until it finds a relative ancestor, and your "left: 0%" could give you some wild behaviour.
So its taken me 5 days to understand this, but I now successfully have silhouettes with stat overlays. I really spent most of that time learning the ins & outs of Roll20, Sheetworkers & Javascript. Once I got around that, I could really wrap my head around this and get it from A to Character Sheet :) But thank you so much - your code example led me through all the right thought processes to get it working. Now all I need to do is arrange the layout for half a dozen different images... And yes, I'm being a good soul & making my own silhouettes so I don't get into trouble with copyright. Honestly, now I get it coding it is *WAY* easier than figuring out how to make the layout work without spilling over areas... ^_^