Is it possible for me to code a sheet I've been working on?

I'm in the process of learning but I wanted to see if I could code the following on Roll 20. Still working on elements but the idea is that the circle would have my players character image, and then stats in the diamonds, with looking into the part below being the inspiration toggle. I can only find really basic character sheet stuff so far and was wondering if something like this would actually be possible in roll20. If so any advice or pointers? (image below if JPG for example purposes, also unfinished at the moment)

Hi JamJuice, Definitely possible.  You should be able to set your rendering as a background image on the outermost container and use a css-grid "overly" for the layout/positioning of your fields. I believe absolutely positioned inputs could also work. I'll try and work up an example.

Something like this should work. html: &lt;div class="wrapper"&gt; &lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/254230923/fO47omtXczff5f9VSyLqGw/original.jpg" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/254230923/fO47omtXczff5f9VSyLqGw/original.jpg</a>" alt=""&gt; &lt;div class="layout"&gt; &lt;span class="portrait"&gt; &lt;span class="image-avatar"&gt; &lt;img alt="Character Avatar" name="attr_character_avatar"&gt; &lt;/span&gt; &lt;/span&gt; &lt;span class="stat-1"&gt;&lt;input type="text" name="attr_stat_1" value="10" /&gt;&lt;/span&gt; &lt;span class="stat-2"&gt;&lt;input type="text" name="attr_stat_2" value="10" /&gt;&lt;/span&gt; &lt;span class="stat-3"&gt;&lt;input type="text" name="attr_stat_3" value="10" /&gt;&lt;/span&gt; &lt;span class="stat-4"&gt;&lt;input type="text" name="attr_stat_4" value="10" /&gt;&lt;/span&gt; &lt;span class="stat-5"&gt;&lt;input type="text" name="attr_stat_5" value="10" /&gt;&lt;/span&gt; &lt;span class="stat-6"&gt;&lt;input type="text" name="attr_stat_6" value="10" /&gt;&lt;/span&gt; &lt;span class="stat-7"&gt;&lt;input type="text" name="attr_stat_7" value="10" /&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; css: .wrapper { height: auto; width: auto; } .wrapper &gt; img { height: 800px; left: 0; margin: auto; min-width: 680px; position: absolute; right: 0; top: 50px; width: 680px; } .layout { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(16, 1fr); height: 800px; left: 0; margin: auto; min-width: 680px; position: absolute; right: 0; top: 50px; width: 680px; } .portrait { grid-column: 4/10; grid-row: 3/9; left: 2em; position: absolute; top: -3em; } .stat-1 { grid-column-start: 2; grid-row-start: 7; left: 1.75em; position: absolute; top: -0.5em; } .stat-2 { grid-column-start: 3; grid-row-start: 8; left: 1.65em; position: absolute; top: 2.35em; } .stat-3 { grid-column-start: 5; grid-row-start: 10; left: -0.15em; position: absolute; top: 0; } .stat-4 { grid-column-start: 6; grid-row-start: 10; left: 3em; position: absolute; top: 1em; } .stat-5 { grid-column-start: 8; grid-row-start: 10; left: 1.8em; position: absolute; top: -0.05em; } .stat-6 { grid-column-start: 10; grid-row-start: 8; left: 0; position: absolute; top: 2.35em; } .stat-7 { grid-column-start: 11; grid-row-start: 7; left: -0.12em; position: absolute; top: -0.1em; } .layout span input { border-radius: 50%; border: 2px solid #333; color: darkred; font-size: 1.2em; font-weight: bold; line-height: 1.75em; padding: 2px; text-align: center; width: 2.25em; } .image-avatar { background-color: transparent; background-repeat: no-repeat, repeat; background-size: cover; border-radius: 50%; border: 4px solid black; display: inline-flex; height: 275px; overflow: hidden; position: relative; width: 275px; }

Thank you!!! This helps massively plus I should be able to learn a lot more from this as well! Don't know if you do but let me know if you want anything drawn and I'm more than happy to do so. You have helped hugely.