Charactersheet selbst machen

Kann mir jemand helfen? Ich hab 0 plan vom programmieren also nutze ich chatgpt was an sich klappt aber es gibt Probleme beim Bild hinzufügen. Ich will ein Bild als Hintergrund (Quasi der eigentlich Char bogen) auf den man dann die Wortfelder bearbeiten kann. Ich habe ein Bild auf Pinterest hochgeladen und nutze die URL, was teilweise funktioniert. Will ich das Problem korrigieren lassen geht es gar nicht mehr. Hier der code: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp; &nbsp; &lt;title&gt;Roll20 Charakterbogen&lt;/title&gt; &nbsp; &nbsp; &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; .char-sheet { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #e0e0e0; /* Helle Schrift für bessere Sichtbarkeit */ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Arial', sans-serif; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; .stats-container { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: rgba(20, 20, 20, 0.8); /* Dunkler Hintergrund für Kontrast */ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 15px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50%; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: auto; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 15%; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 25%; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: flex-start; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; .stat { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 10px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 16px; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; .stat input, .stat select { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #222; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #555; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 5px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 5px; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; .page { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: cover; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position: center; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 20px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min-height: 100vh; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &nbsp; &nbsp; &lt;div class="char-sheet"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="nav-buttons"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button onclick="showPage('page1')"&gt;Charakterbogen&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button onclick="showPage('page2')"&gt;Inventar&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Hintergrundbild für Seite 1 --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="page" id="page1" style="background-image: url('<a href="https://i.pinimg.com/736x/81/eb/c8/81ebc8dfc0b7c0c7a1186369da5cee0e.jpg" rel="nofollow">https://i.pinimg.com/736x/81/eb/c8/81ebc8dfc0b7c0c7a1186369da5cee0e.jpg</a>');"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1 class="title" style="text-align: center; font-size: 24px;"&gt;Charakterbogen&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stats-container"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat"&gt;Blut (%): &lt;input type="number" name="attr_blood" value="100" min="0" max="100"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat"&gt;Blutungsgrad: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select name="attr_bleeding"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Nichts"&gt;Nichts&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Leicht"&gt;Leicht&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Mittel"&gt;Mittel&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Schwer"&gt;Schwer&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat"&gt;Rüstungsgrad: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select name="attr_armor"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Nichts"&gt;Nichts&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Leicht"&gt;Leicht&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Mittel"&gt;Mittel&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Schwer"&gt;Schwer&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat"&gt;Ausweichchance (%): &lt;input type="number" name="attr_dodge_chance" value="0"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat"&gt;Ausdauer (%): &lt;input type="number" name="attr_stamina" value="100" min="0" max="100"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="stat"&gt;Geistige Gesundheit (%): &lt;input type="number" name="attr_sanity" value="100" min="0" max="100"&gt;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; Oder wie fügt ihr Bilder in den Bogen hinzu?

Hello Soul, chatgpt or other AI will not be able to create a sheet "whole cloth" for roll20 at this time because roll20 has many system-specific requirements and restrictions.&nbsp; This will probably change someday as AI models are trained on more data and edge cases but for now AI will more than likely hinder more than help with roll20's character sheets.&nbsp; Roll20 sheets are embedded into other HTML provided by the VTT, so you cannot use HTML or BODY elements (they will just be ignored). You also cannot link a style sheet. CSS is handled by either having a separate CSS sheet that will be linked by Roll20 or using inline CSS in your HTML.&nbsp; For the most part, you cannot interact with the DOM (except for some limited jqery access to add/remove CSS classes on a sheet)&nbsp; These are just some of the most common system-specific constraints.&nbsp; There are many others as well... I would highly suggest GiG's site: <a href="https://cybersphere.me/roll20-sheet-author-master-list/" rel="nofollow">https://cybersphere.me/roll20-sheet-author-master-list/</a> that covers all aspects of building roll20 character sheets. Looking at your linked image; One option; create a "wrapper" div element (ie the sheet's background) that uses that image as the background (fixed height and width). Then use a CSS-grid to get a general layout (ie quadrants). Then use "sub-grids" for your various input fields. It could be a little tricky aligning things but should be doable. I would probably use an image editor on the background image and remove some of the text and tables and such. Use CSS to style the borders as needed. This could also help with aligning your fields in various sections and you wouldn't have to worry about some of the background image "muddying" your inputs fields.&nbsp;Using a background color or image on your sub-grid/layout might nullify the need to remove parts of the background image. YMMV. One drawback with designing on top of a static image is that you could have issues with things that might overflow your background image. ie repeating rows. Not sure if that matters with this particular sheet? You could also use another page, or 6... (ie tabs) to hold additional info. If repeating fields and flexibility matter, you might consider using a generic parchment background that repeats and/or stretches and then use other images as background images for your various sections.&nbsp; Again, this would require some creative image editing to extrapolate various images from the original image that could be used as individual "sub-backgrounds".&nbsp;The sheet would probably not look exactly like the original, but it would be a much more flexible sheet for a VTT environment.

Here's something that might get you started.&nbsp;It's just using absolutely positioned sections to float over the background image. Add more sections and fine tune as needed. (you can use the top, left, right, bottom values to adjust their placement) I also updated your button nav (action buttons and sheetworker) and added an Inventory section. To keep it simple I used a solid background color on the Inventory section but you could add an image or whatever... html &lt;div class="char-sheet"&gt; &lt;input type="hidden" class="tabstoggle" name="attr_sheet_tab" value="character" /&gt; &lt;div class="nav-buttons"&gt; &lt;button type="action" name="act_character" class="nav-button tab-0"&gt;&lt;span&gt;Charakterbogen&lt;/span&gt;&lt;/button&gt; &lt;button type="action" name="act_inventory" class="nav-button tab-1"&gt;&lt;span&gt;Inventar&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class="character"&gt; &lt;h1 class="tab-label"&gt;Charakterbogen&lt;/h1&gt; &lt;div class="stats-container"&gt; &lt;div class="stat"&gt; &lt;span&gt;Blut (%):&lt;/span&gt; &lt;input type="number" name="attr_blood" value="100" min="0" max="100"&gt; &lt;/div&gt; &lt;div class="stat"&gt; &lt;span&gt;Blutungsgrad:&lt;/span&gt; &lt;select name="attr_bleeding"&gt; &lt;option value="Nichts"&gt;Nichts&lt;/option&gt; &lt;option value="Leicht"&gt;Leicht&lt;/option&gt; &lt;option value="Mittel"&gt;Mittel&lt;/option&gt; &lt;option value="Schwer"&gt;Schwer&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="stat"&gt; &lt;span&gt;Rüstungsgrad:&lt;/span&gt; &lt;select name="attr_armor"&gt; &lt;option value="Nichts"&gt;Nichts&lt;/option&gt; &lt;option value="Leicht"&gt;Leicht&lt;/option&gt; &lt;option value="Mittel"&gt;Mittel&lt;/option&gt; &lt;option value="Schwer"&gt;Schwer&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="inventory"&gt; &lt;h1 class="tab-label"&gt;Inventar&lt;/h1&gt; &lt;div class="inventory-container"&gt; &lt;span&gt;Stuff...&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; const buttonlist = ['character', 'inventory']; buttonlist.forEach((button) =&gt; { on(`clicked:${button}`, function () { setAttrs({ sheet_tab: button, }); }); }); &lt;/script&gt; css .charsheet .char-sheet { background-image: url('<a href="https://i.pinimg.com/736x/81/eb/c8/81ebc8dfc0b7c0c7a1186369da5cee0e.jpg" rel="nofollow">https://i.pinimg.com/736x/81/eb/c8/81ebc8dfc0b7c0c7a1186369da5cee0e.jpg</a>'); background-repeat: no-repeat; background-size: cover; color: #e0e0e0; font-family: 'Arial', sans-serif; height: 840px; margin: auto; outline: 2px solid #000; padding: 0; position: relative; width: 840px; } .charsheet .nav-buttons { left: 40px; position: relative; top: 20px; width: fit-content; } .charsheet .nav-button { background: #222; border: 1px solid #555; border-radius: 5px; color: #fff; margin: 2px; width: 95px; } .charsheet .nav-button:hover { background: #111; box-shadow: 2px 2px 6px #000; color: #fff; outline: 1px solid #777; } /* configure the tab buttons */ .charsheet .character, .charsheet .inventory { display: none; } /* style the active button */ .charsheet .tabstoggle[value="character"] ~ .nav-buttons .tab-0 {outline: 2px solid #000;} .charsheet .tabstoggle[value="inventory"] ~ .nav-buttons .tab-1 {outline: 2px solid #000;} /* show the selected tab */ .charsheet .tabstoggle[value="character"] ~ div.character, .charsheet .tabstoggle[value="inventory"] ~ div.inventory { display: block; } .charsheet .tab-label { color: #FFF; font-size: 24px; position: absolute; right: 40px; text-shadow: 1px 1px 5px black; top: 14px; } .charsheet .stats-container { align-items: flex-start; background: rgba(20, 20, 20, 0.8); border-radius: 10px; display: flex; flex-direction: column; left: 12%; margin: auto; padding: 15px; position: absolute; top: 46%; width: 19%; } .charsheet .stat { font-size: 16px; margin-bottom: 10px; } .charsheet .stat input, .charsheet .stat select { background: #222; border: 1px solid #555; border-radius: 5px; color: #fff; min-width: fit-content; padding: 5px; width: 100%; } .charsheet .inventory-container { align-items: flex-start; background: rgb(221 197 162); border: 2px solid #18211d; border-radius: 10px; color: initial; display: flex; flex-direction: column; left: 10%; margin: auto; min-height: 50%; padding: 15px; position: absolute; top: 10%; width: 75%; }

Oh vielen dank! Das ist sehr hilfreich danke :)

Die Codes, die Sie gesendet haben, funktionieren so gar nicht bei mir :o Hab ich was falsch gemacht?

Hi Soul, Never trust the Preview tab.&nbsp; It has been notoriously incorrect in the past.&nbsp; Always check your code changes in game.&nbsp; I would also recommend using Roll20's Custom Sandbox for sheet development over the Custom game.&nbsp; The sandbox works much faster since it monitors your local editing changes in real-time (use Scott's Autoupdater browser extension for Chrome).&nbsp; Much better than the edit, save and reload game approach using Custom. Cheers note: I'm not sure if the Autoupdater extension currently works in Jumpgate based games... If you decide to use it you might need to develop using a non-jumpgate game. Not really a big deal, but worth mentioning. Your game will still work properly under Jumpgate but as I recall, the autoupdate feature was not working under Jumpgate the last time I checked. YMMV Disregard my note. I just checked and the autoupdater extension appears to work under Jumpgate as well. Yay!

Hallo Vince, ich habe den code eingefügt und hatte im spiel auch nachgeschaut. Der Bogen wird überhaupt nicht angezeigt. Bei der Sandbox kann ich keinen html oder css code eingeben. Ähnliches problem. Ich habe den code allerdings in den sheet.json editor eingegeben. Gibt ja scheinbar kein html oder css feld. und als datei kann ich es nicht wählen. Vielleicht stelle ich mich auch einfach nur maximal blöd an dann&nbsp; sorry an dieser stelle :D

Unlike the Custom game, the "Custom Sandbox" uses an in-game tool to choose your HTML and CSS. No the Game Settings 4-tab editor. Also, the sheet.json editor is only used for sheet meta info and default sheet-specific settings. That may matter down the road, but not at this time. Here are a couple examples that should help. Custom Game is simple but Custom Sandbox is preferred IMO. Custom Game sheet editing: 1. create a new game choose or type in "Custom" in the Recommend: Pick a Character sheet. 2. then click "I'm ready, create game" 3. on the next page(game's home page) choose Settings&gt;Game Settings to open the 4-tab sheet editor. 4. you should be able to copy and paste the HTML from above into the HTML window.&nbsp; (make sure you are copying only the html and paste as plain text) 5. do the same for the CSS 6. Save Changes 7. Open your game in another tab or window 8. Create a new character and your "should" see a sheet with your code from the editor window.&nbsp; Make changes in the editor, save, and reload your game to see the new changes. Custom Sandbox sheet editing: 1. Open the Custom Sandbox page: <a href="https://app.roll20.net/sheetsandbox" rel="nofollow">https://app.roll20.net/sheetsandbox</a> 2. Click the "Create New Sandbox" 3. The next page will be your Custom Sandbox game's home page. 4. Launch the game. 5. You should see a new window in the game "Sheet Sandbox Tools" where you can "browse" your local environment for the HTML and CSS files. 6. For example, you might have a folder on your computer where you are working on your sheet ie "c:\my_roll20_sheet\"&nbsp; Ensure that your html and css file are located in that folder.&nbsp; Choose THAT local folder(or wherever you have your sheet code located...) when using the "Sandbox Tools". HTML and CSS can be edited with a simple text editor or something more complicated like vscode.&nbsp;Your sandbox will be "linked" to those local files.&nbsp; Edit them locally and use the&nbsp;"Sheet Sandbox Tools" to refresh the sheet in-game with your changes. Edit HTML locally, re-select the HTML file from your sandbox game.&nbsp; Edit the CSS locally, re-select the CSS file from your sandbox game. 7. If you do not have a translation.json file (you do not unless you add additional localization code to your sheet) you can ignore linking a Translation.json 8. If you use Scott's Autoupdater extension , your in-game sheet will automatically update as you edit your local files.&nbsp; Very cool! Either of those options "should" get you to an editable sheet. Let me know if that still fails to load for you and I'll continue. ;-)

oh damn, alright got it now. Thanks and sorry for annoying :D

No worries. Hopefully this will help you move forward on your sheet.