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

Using Compact Layout on a Custom Character Sheet?

The D&D 2014 character sheet has a noisy layout at the top that includes " Character Sheet", " Bio & Info", and " Attributes & Abilities" tabs, in addition to the buttons to edit, popout, or close the sheet. By contrast, the D&D 2024 character sheet has a nice compact layout at the top that includes only the edit, minimize, popout, and close buttons.  Is it possible to set up a custom character sheet so that it uses the 2024 layout, or something approaching it, instead of the 2014 layout. In other words, is there a way to hide the elements that appear around the character sheet and replicate their functionality within the sheet? Or is this only something the official "by Roll20" character sheets can do? (Sorry if this has been asked before. I couldn't find the answer via google, and chatgpt was giving me a different answer every time I asked.)
1756153917
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
The 2024 sheet has the same buttons at the top as the 2014 sheet, they're just styled differently. As for the rest of your question, I guess I'm not sure what you are asking. You want to use the 2014 sheet, but have it look like the 2024 sheet?
1756166067

Edited 1756166249
Take the following custom sheet code: sheet.json: { "html": "sheet.html", "css": "style.css", "authors": "Jim M", "roll20userid": "732085", "preview": "preview.png", "instructions": "Custom Sheet", "legacy": false, "sheet_type": "character" } sheet.html: <div class="sheet-hello-world">Hello World, this is my custom character sheet</div> style.css: .charsheet .sheet-hello-world { font-size: 24pt; } That code produces this first layout: I would instead like to produce this second layout: Or, even better, this: I am looking to see what can be changed in order to restyle the first layout into the second layout.  If it is through CSS, then it isn't by styling a .charsheet element, as these layout elements are outside of the character sheet container.  If it is an option in the JSON, then it doesn't seem to be documented. 
1756169703
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
The 2024 sheet is created using beacon, a different sheet infrastructure. You can restyle the roll20 tab bar using css. You can look at the remnants sheet css for an example of how to style it or just explore the html of the sheet to find the tabs and their container. Since they are in the iframe, as long as you aren't using legacy sanitization you can style them.
Thanks. Just to document this for anyone who searches this later, I got it (sort of) working with this code: .ui-dialog .nav-tabs { display: none; }
1756182771
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Note that if this sheet is for public release, you'll need to leave them visible.