IMG for Custom Sheets?

How do I get images to work when using the Custom character sheet builder? I have my own github repository, do I need some clearance from Roll20? 

You don't need clearance from Roll20. If your images are saved on the github, you have to use the url for the raw image. Replace the all caps words here with the relevant names: https: //raw.githubusercontent.com/GITHUB USERNAME/REPO NAME/master/FOLDER/FILENAME I cover this over here, but that is geared specifically for people using the roll20 repo: <a href="https://cybersphere.me/publishing-sheet-images/" rel="nofollow">https://cybersphere.me/publishing-sheet-images/</a>

Tank's GiGs :)

What is REPO NAME???

You said you have your own github repository. Its that name. You can also get the file path by going to the image file in your repository, click on it, and there'll be a download button to the top right. Click that button, and the new URL will be the one you need.

Ok, for a moment it seemed to work (in 'Preview'), but not in the 'game view'. !? I use this Roll20 code, the HTML- and CSS-files. Just copied the code, pasted it in, and then changed the background-image to my own, on my GitHub directory? This is the directory I copied from: roll20-character-sheets/Feast_of_Legends at master · Roll20/roll20-character-sheets (github.com)

Can you post the code you are actually using? Also, never rely on preview mode. You should be building your characetr sheets in the Custom Sheet Sandbox, it is much quicker and simpler than using the normal window.

GiGs said: Also, never rely on preview mode. You should be building your characetr sheets in the Custom Sheet Sandbox, it is much quicker and simpler than using the normal window. What GiGs' said, it's a common mistake: <a href="https://wiki.roll20.net/Character_Sheet_Development/Common_Mistakes#2" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/Common_Mistakes#2</a> Using the Sheet Sandbox is much easier, and get even easier with the Autouploader .

I guess the .json file is essential for any custom sheet to work in R20? So, I got it to work, so far, in this sandbox mode. But I can't play a game in this mode from what I read? When/if I get my own design to work in the sandbox how do I transfer that to work in a game?

The .json file can be left empty, but it is needed if you upload your sheet to the Roll20 Github for sharing with others. But you can forget about it till that time comes. You can't play a game in the sandbox, but that html and css file you are working on - you can copy their contents into the custom sheet page your were using before. But you only have to do that once, just before playing. While working on the sheet, use the sandbox - you'll find it much, much quicker to try out and make changes. You don't have to refresh the campaign to see changes. Then when you are happy and want to play a session with other people, copy the file contents into a custom campaign and go.

Ok, thanks. I'm working in the sandbox now, much better workflow. :) But how do I get the .json-file to work in game-mode, there is no place to put it in custom???

Joakim (Kim) said: But how do I get the .json-file to work in game-mode, there is no place to put it in custom??? That's it, the .json can't be used in custom game. The Sheet sandbox use for sheet.json it is to test it for sheets that are published in the sheet menu, and simply is not available for use in normal games with a custom sheet. <a href="https://wiki.roll20.net/Sheet_Sandbox#Sheet.json_Editor" rel="nofollow">https://wiki.roll20.net/Sheet_Sandbox#Sheet.json_Editor</a>

So, how exactly do I make and have my own character sheet available for play with my friends - without a .json-file?

You know when you were working on a campaign before being directed to use the custom sheet sandbox? Just create a new campaign like that, just paste your HTMl and CSS into the place you were writing it before, save it and load the campaign. Voila, you have a campaign ready to play with your friends.

But if the code need that .json-file to work, what do I need to do then GiGs? Do you have some code to recommend, from GitHub, that I can use?

Thanks for trying to help me out, but I'm just to thick to mange all this coding, where to put what and so forth. :(

You don't need the .json file at all when using a custom sheet option in a game.&nbsp; You just enter the html file, css file, and (if there is one) translation file.&nbsp; That is all.&nbsp; The .json file is only needed when you are submitting a sheet to the Roll20 repository for everyone to use.

As Kraynic says - the json file is not usable in your own custom games.

Krynic: sadly that does not work. I still can´t get images to load when using the custom sheet, and the coding is to hard for me to grasp sadly. A step by step for dummies would have been great; when I try to find help in the R20 wiki or help center it is all to technical for me. You need to be a coder from start I think, I'm not.

can you post the code you are using on pastebin?

Yeah, you don't need the sheet.json in your normal game like the others said, I just wasn't clear about it, emphasising instead on the "can't use" part, which for me implied that if it can't be used, then it's not needed either.

What is 'pastebin'?

&lt;!--- &lt;div class="main"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="name section"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="section-small flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_character_name" type="text"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;div class="concept section"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="section-small flex-center2"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_character_concept" type="text"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stats section"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button name="roll_init" type="roll" value="&amp;{template:default} {{name=Initiative}} {{Result=[[d6]]}} &amp;{tracker}"&gt;&lt;span&gt;Initiative&lt;/span&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat-block flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Athletics&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_strength" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_strength_bonus"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button name="roll_strength" type="roll" value="&amp;{template:default} {{name=Strength}} {{Result=[[d20+(@{strength_bonus})]]}}"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat-block flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;INTELLIGENCE&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_intelligence" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_intelligence_bonus"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button name="roll_intelligence" type="roll" value="&amp;{template:default} {{name=Intelligence}} {{Result=[[d20+(@{intelligence_bonus})]]}}"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat-block flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;CHARM&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_charm" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_charm_bonus"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button name="roll_charm" type="roll" value="&amp;{template:default} {{name=Charm}} {{Result=[[d20+(@{charm_bonus})]]}}"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat-block flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;ARCANA&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_arcana" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_arcana_bonus"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button name="roll_arcana" type="roll" value="&amp;{template:default} {{name=Arcana}} {{Result=[[d20+(@{arcana_bonus})]]}}"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat-block flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;GRACE&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_grace" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_grace_bonus"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button name="roll_grace" type="roll" value="&amp;{template:default} {{name=Grace}} {{Result=[[d20+(@{grace_bonus})]]}}"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat-block flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;DEFENSE&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_defense" &nbsp; &nbsp; &nbsp; type="number" value="10"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_defense_bonus" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat-block flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;HIT POINTS&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_hit_points" &nbsp; &nbsp; type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_hit_points_max" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="resistance section flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Resistance/&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Weakness&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;hr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Advantage/&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Disadvantage&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_resistance1" type="text"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_resistance2" type="text"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_resistance3" type="text"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_resistance4" type="text"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_resistance5" type="text"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="bio section flex-center flex-middle flex-down"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Bio&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea name="attr_bio" placeholder="Bio"&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="gold section flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Gold:&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_gold" type="number" value="10"&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="load section flex-center flex-middle flex-down"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Load&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_attack_name" type="text" placeholder="Attack/Weapon Name"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_attack_bonus" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_attack_damage" type="text" value="1d6" class="small"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button name="roll_attack" type="roll" value="&amp;{template:default} {{name=@{attack_name}}} {{Attack=[[d20+(@{attack_bonus})]]}} {{Damage=[[@{attack_damage}]]}}" class ="small"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_attack2_name" type="text" placeholder="Attack/Weapon Name"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_attack2_bonus" type="number" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_attack2_damage" type="text" value="1d6" class="small"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button name="roll_attack2" type="roll" value="&amp;{template:default} {{name=@{attack2_name}}} {{Attack=[[d20+(@{attack2_bonus})]]}} {{Damage=[[@{attack2_damage}]]}}" class ="small"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea name="attr_load" placeholder="Load"&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="skilled section flex-center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Skilled with: &lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_skilled_with" type="text"&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="order-skills section flex-center flex-down"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;Order Skills&lt;/label&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea name="attr_order_skills" placeholder="Order Skills"&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &lt;div class="logo section"&gt; &lt;span&gt; Sheet Version:0.5 &lt;/span&gt; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_strength_bonus" type="hidden" value="0"&gt; &nbsp; &nbsp; &lt;input name="attr_intelligence_bonus" type="hidden" value="0"&gt; &nbsp; &nbsp; &lt;input name="attr_charm_bonus" type="hidden" value="0"&gt; &nbsp; &nbsp; &lt;input name="attr_arcana_bonus" type="hidden" value="0"&gt; &nbsp; &nbsp; &lt;input name="attr_grace_bonus" type="hidden" value="0"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="text/worker"&gt; &nbsp; &nbsp; &nbsp; &nbsp; const int = score =&gt; parseInt(score, 10) || 0; &nbsp; &nbsp; &nbsp; &nbsp; // Auto-calculates &amp; updates 'Stat Bonus' based on changes to corresponding 'Base Stat', &nbsp; &nbsp; // according to the table on page 5 of the Rulebook. &nbsp; &nbsp; // If the Base stat is less than 1, the sheet sets the bonus to "-2" &nbsp; &nbsp; &nbsp; &nbsp; const stats = ["strength", "intelligence", "charm", "arcana", "grace"]; &nbsp; &nbsp; stats.forEach(stat =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; on(`change:${stat}`, () =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; getAttrs([stat], values =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const stat_base = int(values[stat]); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(stat_base); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let stat_bonus = 0; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (stat_base &gt;= 17) stat_bonus = "+4"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (stat_base &gt;= 16) stat_bonus = "+3"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (stat_base &gt;= 13) stat_bonus = "+2"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (stat_base &gt;= 9) stat_bonus = "+1"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (stat_base &gt;= 7) stat_bonus = "0"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (stat_base &gt;= 5) stat_bonus = "-1"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (stat_base &gt;= 1) stat_bonus = "-2"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else stat_bonus = "-2"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [`${stat}_bonus`]: stat_bonus &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt; &nbsp; --&gt;

I think Andreas J. coded this, I found it on the wiki or help center, it had some functions I liked so I thought I could back-engineer it some how. It´s the HTML part.

/*----------------------- span.sheet-bold{ &nbsp; &nbsp; font-weight: 800px; &nbsp; &nbsp; font-size: medium; &nbsp; } &nbsp; &nbsp; label { &nbsp; &nbsp; margin: 5px 0px 5px 0px; &nbsp; &nbsp; font-size: 1.1em; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; input[type="text"] { &nbsp; &nbsp; font-family: 'Courier New', Courier, monospace; &nbsp; &nbsp; font-size: 16px; &nbsp; &nbsp; font-weight: bolder; &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; border-style: none none none none; &nbsp; &nbsp; border-color: none; &nbsp; } &nbsp; &nbsp; input[type="number"] { &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; border-color: none; &nbsp; } &nbsp; &nbsp; textarea { &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; width: 89%; &nbsp; &nbsp; height: 70%; &nbsp; &nbsp; margin-right: 15px; &nbsp; } &nbsp; &nbsp; input[type="checkbox"].sheet-checkbox { &nbsp; &nbsp; border-style: solid black; &nbsp; &nbsp; border-radius: 0px; &nbsp; } &nbsp; &nbsp; textarea:focus, &nbsp; input[type="text"]:focus, &nbsp; input[type="number"]:focus{ &nbsp; &nbsp; background-color: #f9f9f900; &nbsp; } &nbsp; &nbsp; &nbsp; input[type=number].sheet-ref::-webkit-inner-spin-button, &nbsp; input[type=number].sheet-ref::-webkit-outer-spin-button, &nbsp; input[type=number].sheet-txtfield::-webkit-inner-spin-button, &nbsp; input[type=number].sheet-txtfield::-webkit-outer-spin-button { &nbsp; &nbsp; -webkit-appearance: none; &nbsp; &nbsp; margin: 0; &nbsp; } &nbsp; input[type=number].sheet-ref, &nbsp; input[type=number].sheet-txtfield { &nbsp; &nbsp; -moz-appearance: textfield; &nbsp; } &nbsp; &nbsp; &nbsp; button[type="roll"]:not(.sheet-small){ &nbsp; &nbsp; color: rgb(120, 32, 32); &nbsp; &nbsp; height: 12px; &nbsp; &nbsp; width: 12px; &nbsp; &nbsp; margin-left: 8px; &nbsp; } &nbsp; &nbsp; button[type="roll"]:not(.sheet-small)::before{ &nbsp; &nbsp; font-size: 14px; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .sheet-flex-center { &nbsp; &nbsp; display: flex; &nbsp; &nbsp; align-items: center; &nbsp; } &nbsp; &nbsp; .sheet-flex-middle { &nbsp; &nbsp; display: flex; &nbsp; &nbsp; justify-content: center; &nbsp; } &nbsp; &nbsp; .sheet-flex-down { &nbsp; &nbsp; flex-flow: column nowrap; &nbsp; } &nbsp; &nbsp; .sheet-section { &nbsp; &nbsp; &nbsp; padding: 5px; &nbsp; &nbsp; &nbsp; min-height: 90%; &nbsp; } &nbsp; &nbsp; &nbsp; div.sheet-main { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: 450px 375px; &nbsp; &nbsp; grid-template-rows: ; &nbsp; &nbsp; grid-template-areas:"name &nbsp; &nbsp; &nbsp; bio" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "concept &nbsp; &nbsp;bio" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "stats &nbsp; &nbsp; &nbsp;bio" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "stats &nbsp; &nbsp; &nbsp;gold" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "stats &nbsp; &nbsp; &nbsp;load" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "stats &nbsp; &nbsp; &nbsp;skilled" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "resistance order-skills" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "resistance order-skills"; &nbsp; &nbsp; grid-gap: 6px; &nbsp; &nbsp; width: &nbsp; &nbsp;756px; &nbsp; &nbsp; height: &nbsp; 1639px; &nbsp; &nbsp; background-image: url(<a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/char_sh_bkg.jpg" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/char_sh_bkg.jpg</a>); &nbsp; &nbsp; background-size: 756px 1639px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; } &nbsp; &nbsp; &nbsp; div.sheet-logo{ &nbsp; &nbsp;grid-area: logo; &nbsp; &nbsp; background-image: url(); &nbsp; &nbsp; background-size: 295px 180px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; margin-left: 0px; &nbsp; &nbsp; margin-top: opx; &nbsp; &nbsp; display: flex; &nbsp; &nbsp; justify-content:flex-end; &nbsp; &nbsp; align-items:flex-end; &nbsp; &nbsp; flex-flow: column; &nbsp; &nbsp; &nbsp; } &nbsp; div.sheet-logo span{ &nbsp; &nbsp; font-size: 11px; &nbsp; &nbsp; color: dimgray; &nbsp; &nbsp; background-color: white; &nbsp; &nbsp; border:none; &nbsp; &nbsp; margin-right: 95px; &nbsp; } &nbsp; &nbsp; &nbsp; div.sheet-stats{ &nbsp; &nbsp; grid-area: stats; &nbsp; &nbsp; margin-left: 15px; &nbsp; } &nbsp; &nbsp; div.sheet-stats div:first-child{ &nbsp; &nbsp; display: flex; &nbsp; &nbsp; align-items: start; &nbsp; &nbsp; height: 25px; &nbsp; } &nbsp; &nbsp; div.sheet-stats div:first-child button{ &nbsp; &nbsp; width: 70px; &nbsp; &nbsp; margin-left: 10px; &nbsp; } &nbsp; &nbsp; div.sheet-stats div:first-child span{ &nbsp; &nbsp; padding: 0px 0px 5px 5px; &nbsp; } &nbsp; &nbsp; &nbsp; div.sheet-stats div.sheet-stat-block{ &nbsp; &nbsp; background-image: url(<a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLstatblock.jpg?raw=true" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLstatblock.jpg?raw=true</a>); &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; background-size: contain; &nbsp; &nbsp; height: 65px; &nbsp; &nbsp; width: 300px; &nbsp; } &nbsp; &nbsp; div.sheet-stats div.sheet-stat-block label{ &nbsp; &nbsp; width: 100px; &nbsp; &nbsp; padding-left: 10px; &nbsp; } &nbsp; &nbsp; div.sheet-stats input, &nbsp; div.sheet-stats span{ &nbsp; &nbsp; height: 45px; &nbsp; &nbsp; width: 60px; &nbsp; &nbsp; font-size: 20px; &nbsp; &nbsp; font-weight: 600; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; padding-right: 7px; &nbsp; } &nbsp; &nbsp; div.sheet-stats span{ &nbsp; &nbsp; padding-top: 15px; &nbsp; &nbsp; padding-left: 10px; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.sheet-resistance{ &nbsp; &nbsp; grid-area: resistance; &nbsp; &nbsp; background-image: url(<a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true</a>); &nbsp; &nbsp; background-size: 290px 190px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; margin-left: 20px; &nbsp; &nbsp; margin-bottom: 20px; &nbsp; } &nbsp; &nbsp; div.sheet-resistance label{ &nbsp; &nbsp; width: 110px; &nbsp; &nbsp; text-align: center; &nbsp; } &nbsp; &nbsp; div.sheet-resistance div{ &nbsp; &nbsp; padding-bottom: 25px; &nbsp; } &nbsp; &nbsp; div.sheet-resistance input{ &nbsp; &nbsp; width: 150px; &nbsp; &nbsp; margin: 3px 0px 3px 0px; &nbsp; } &nbsp; &nbsp; div.sheet-resistance hr { &nbsp; &nbsp; display: block; &nbsp; &nbsp; margin-top: 0.5em; &nbsp; &nbsp; margin-bottom: 0.5em; &nbsp; &nbsp; margin-left: auto; &nbsp; &nbsp; margin-right: auto; &nbsp; &nbsp; border-style: solid; &nbsp; &nbsp; border-width: 2px; &nbsp; &nbsp; border-color: rgb(255, 255, 255); &nbsp; &nbsp; width: 110px; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.sheet-name{ &nbsp; &nbsp; grid-area: name; &nbsp; &nbsp; padding-top: 35px; &nbsp; } &nbsp; &nbsp; div.sheet-name div.sheet-section-small{ &nbsp; &nbsp; background-image: url(); &nbsp; &nbsp; background-size: contain; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; height: 23px; &nbsp; &nbsp; width: 290px; &nbsp; &nbsp; margin-left: 123px; &nbsp; &nbsp; margin-top: 12px; &nbsp; } &nbsp; div.sheet-concept div.sheet-section-small{ &nbsp; &nbsp; background-size: contain; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; height: 23px; &nbsp; &nbsp; width: 290px; &nbsp; &nbsp; margin-left: 123px; &nbsp; &nbsp; margin-top: 24px; } &nbsp; &nbsp; div.sheet-name label{ &nbsp; &nbsp; width: 50px; &nbsp; &nbsp; padding-left: 15px; &nbsp; } &nbsp; &nbsp; div.sheet-name input{ &nbsp; &nbsp; width: 180px; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.sheet-bio{ &nbsp; &nbsp; grid-area: bio; &nbsp; &nbsp; background-image: url(<a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true</a>); &nbsp; &nbsp; background-size: 290px 210px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; padding-right: 25px; &nbsp; } &nbsp; &nbsp; div.sheet-bio label{ &nbsp; &nbsp; width:60px; &nbsp; &nbsp; margin-top: 3px; &nbsp; } &nbsp; &nbsp; div.sheet-bio textarea{ &nbsp; &nbsp; height: 82px &nbsp; } &nbsp; &nbsp; &nbsp; div.sheet-gold{ &nbsp; &nbsp; grid-area: gold; &nbsp; &nbsp; background-image: url(<a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true</a>); &nbsp; &nbsp; background-size: 290px 50px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; padding-bottom: 20px; &nbsp; } &nbsp; &nbsp; div.sheet-gold label{ &nbsp; &nbsp; width: 50px; &nbsp; &nbsp; margin-left: 15px; &nbsp; } &nbsp; &nbsp; div.sheet-gold input[type=number]{ &nbsp; &nbsp; width: 120px; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.sheet-load{ &nbsp; &nbsp; grid-area: load; &nbsp; &nbsp; background-image: url(<a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true</a>); &nbsp; &nbsp; background-size: 290px 210px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; padding-right: 25px; &nbsp; } &nbsp; &nbsp; div.sheet-load label{ &nbsp; &nbsp; width:60px; &nbsp; &nbsp; margin-top: 3px; &nbsp; } &nbsp; &nbsp; div.sheet-load input[type="text"]:first-child{ &nbsp; &nbsp; width: 150px; &nbsp; } &nbsp; &nbsp; div.sheet-load input[type="text"].sheet-small{ &nbsp; &nbsp; width: 50px; &nbsp; } &nbsp; &nbsp; div.sheet-load textarea{ &nbsp; &nbsp; margin:3px 15px 0px 0px; &nbsp; &nbsp; height: 55%; &nbsp; } &nbsp; &nbsp; div.sheet-load button.sheet-small{ &nbsp; &nbsp; color: black; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; div.sheet-skilled{ &nbsp; &nbsp; grid-area: skilled; &nbsp; &nbsp; align-items: start; &nbsp; &nbsp; background-image: url(<a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true</a>); &nbsp; &nbsp; background-size: 290px 50px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; padding-bottom: 25px; &nbsp; } &nbsp; &nbsp; div.sheet-skilled label{ &nbsp; &nbsp; width: 90px; &nbsp; &nbsp; padding-left: 10px; &nbsp; &nbsp; margin-top: 10px; &nbsp; } &nbsp; &nbsp; div.sheet-skilled input{ &nbsp; &nbsp; width: 160px; &nbsp; &nbsp; margin-top: 5px; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.sheet-order-skills{ &nbsp; &nbsp; grid-area: order-skills; &nbsp; &nbsp; background-image: url(<a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true</a>); &nbsp; &nbsp; background-size: 290px 190px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; padding-right: 25px; &nbsp; } &nbsp; &nbsp; div.sheet-order-skills label{ &nbsp; &nbsp; width:120px; &nbsp; &nbsp; margin: 3px 0px 2px; &nbsp; } &nbsp; -------------------------*\

And this is the CSS part. I copied and pasted these two into the custom, but that did not work. Then I did as you said and use the sandbox instead, looked ok there, but that was because I could ad the .json-file there. Also, the back-engineering part did not work so well, I struggle with this part, in the CSS (to begin with): &nbsp; div.sheet-main { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: 450px 375px; &nbsp; &nbsp; grid-template-rows: ; &nbsp; &nbsp; grid-template-areas:"name &nbsp; &nbsp; &nbsp; bio" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "concept &nbsp; &nbsp;bio" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "stats &nbsp; &nbsp; &nbsp;bio" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "stats &nbsp; &nbsp; &nbsp;gold" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "stats &nbsp; &nbsp; &nbsp;load" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "stats &nbsp; &nbsp; &nbsp;skilled" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "resistance order-skills" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "resistance order-skills"; &nbsp; &nbsp; grid-gap: 6px; &nbsp; &nbsp; width: &nbsp; &nbsp;756px; &nbsp; &nbsp; height: &nbsp; 1639px; &nbsp; &nbsp; background-image: url( <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/char_sh_bkg.jpg" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/char_sh_bkg.jpg</a> ); &nbsp; &nbsp; background-size: 756px 1639px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; }

I fought I could just switch 'name, concept, bio' etc to rearrange the different parts, and it worked (sort of) with the 'name' part but not in any logical way (for my logic that is)!? Then the background-image part did not connect at all, can't find what's wrong: background-image: url( <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/char_sh_bkg.jpg" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/char_sh_bkg.jpg</a> );

Well, something is wrong with that link.&nbsp; It gives me a "404: Not Found" error.

Ok, Kraynic. How do you see that? Have I stored the image wrong at my private GitHub?

I see a few issues... The github account image you posted directly above shows that your image file names do not actually match the ones you entered in your code above background-image: url( <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/char_sh_bkg.jpg" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/char_sh_bkg.jpg</a> ); Your github image shows <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20</a> Char_sheet.jpg but there can be an issue with that as well because your file name has a space in it. "ToC_R20 Char_sheet.jpg"&nbsp; This can cause issues when linking (also, windows users would see this as an illegal file name)&nbsp; IMO, it's best to not have spaces your file names and folders.&nbsp; Just avoid the linking and cross-OS issues. If you do not rename your file(please do), you need to add "%20" ( more info ) in place of the space when you link to the file. <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20%20Char_sheet.jpg" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20%20Char_sheet.jpg</a> Hope that helps. Cheers

Thank you vince, I try that out and take your advice. :) So far I got it to work in the sandbox (without the .json-file), I even got some control over the main grid settings.

I don't know if you have changed the file address, but this is your corrent pic url: <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20_Char_sheet.png" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20_Char_sheet.png</a>

Your html and css posted above are both commented out. Why is that? I loaded them into a new campaign, removed the commenting, ticking the Lagacy checkbox at the top of the custom code window, and got this: So it appears to be working as intended. What remaining issues do you have?

Well, I don't have any issues right now, but will be back I'm sure. Thank you for now. :)