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 Compendium in Game, Join Today

Tabs on your Custom Character Sheet

1572699143
So I was hoping to create some tabs on my character sheet to prevent so much scrolling for my players. The problem I'm running into is that even when I copy and paste the following code from a working site, it doesn't want to work in the character sheet. < div  class ="tab" >    < button  class ="tablinks"  onclick ="openCity(event, 'London')" > London < /button >    < button  class ="tablinks"  onclick ="openCity(event, 'Paris')" > Paris < /button >    < button  class ="tablinks"  onclick ="openCity(event, 'Tokyo')" > Tokyo < /button > < /div > <!-- Tab content --> < div  id ="London"  class ="tabcontent" >    < h3 > London < /h3 >    < p > London is the capital city of England. < /p > < /div > < div  id ="Paris"  class ="tabcontent" >    < h3 > Paris < /h3 >    < p > Paris is the capital of France. < /p > < /div > < div  id ="Tokyo"  class ="tabcontent" >    < h3 > Tokyo < /h3 >    < p > Tokyo is the capital of Japan. < /p > < /div > It displays the buttons perfectly and I used this to create all the tabs for my sheet and it displays perfectly then too, but the problem is it displays the info of every single tab in order below the tabs, regardless of what tab is selected. Not sure why this isn't working. I've checked forums for similar codes that people said worked for their radio buttons in a similar fashion, but this still is doing the same thing where it displays all of the tabs at once.Not sure what I'm missing here.
1572700254

Edited 1572700314
GiGs
Pro
Sheet Author
API Scripter
You cant use code like that in roll20 sheets. onclick won't work, and you cant use ids for elements - you have to use classes. Roll20 has disabled some standard features used in other sites, for security reasons I believe.  If you want to use tabs, you need to look at how some sheets on roll20's github does it, or look in the css wizardry wiki page. 
1572700361

Edited 1572700401
Finderski
Pro
Sheet Author
So, a couple of things...that code won't work on Roll20, because Roll20 has some restriction on what it will allow. &nbsp;My guess is, that working site is also using Javascript to control the tabs (the onClick command looks like a JS call). &nbsp;You can use buttons in Roll20, but you need to do it a little differently. Also, on Roll20, you'll need to use CSS to show/hide the various tabs. The wiki has info on how to set up tabs:&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a> When I get a little time, I'll post my method using buttons. EDIT: Should have known I'd get ninja'd by GiGs. XD
1572725577
Kraynic
Pro
Sheet Author
I look forward to that example.&nbsp; I have been playing with the example from the wiki link.&nbsp; It seems like the example there only works if your tabs are at the top of the sheet.&nbsp; As soon as they are put inside any sort of div (for overall border or background decoration) that example quits working.&nbsp; The radio buttons remain, but they quit displaying any tab content when selected.&nbsp; I know there are a lot of sheets with tabs in the middle, so this seems like a fairly limited example in the wiki of how tabs can be implemented.
1572752164
Finderski
Pro
Sheet Author
Ok, so, here's a quick and dirty template... HTML + Sheetworker: &lt;div class='sheet-base'&gt; &lt;div class="sheet-buttonbar"&gt; &lt;div class="sheet-navbuttons"&gt; &lt;button type="action" name="act_characterprofile1" class="sheet-topbuttons"&gt;U&lt;/button&gt; &lt;input type="checkbox" class="sheet-showVehicles" name="attr_vehicle" style="display: none;" /&gt; &lt;button type="action" name="act_vehicletab3" class="sheet-topbuttons sheet-vehiclesT"&gt;T&lt;/button&gt; &lt;button type="action" name="act_journaltab4" class="sheet-topbuttons"&gt;n&lt;/button&gt; &lt;button type="action" name="act_configurationtab2" class="sheet-topbuttons"&gt;x&lt;/button&gt; &lt;/div&gt; &lt;div class="sheet-functions"&gt; Unique/Specialized buttons Go here &lt;/div&gt; &lt;div class="sheet-docbuttons"&gt; &lt;input type="hidden" name="attr_newcontent" value="read" class="sheet-newcontent" /&gt; &lt;button type="action" name="act_releasetab5" class="sheet-topbuttons sheet-releasenotesbutton"&gt;N&lt;/button&gt; &lt;input type="hidden" name="attr_newdocumentation" value="read" class="sheet-newdocumentation" /&gt; &lt;button type="action" name="act_documentationtab6" class="sheet-topbuttons sheet-documentationbutton"&gt;i&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;input type='radio' class='sheet-characterT' name='attr_sheetTab' style="display: none;" value='1' checked /&gt; &lt;input type="radio" class="sheet-journalT" name="attr_sheetTab" style="display: none;" value="4" /&gt; &lt;input type='radio' class='sheet-vehiclesT' name='attr_sheetTab' style="display: none;" value='3' /&gt; &lt;input type='radio' class='sheet-configT' name='attr_sheetTab' style="display: none;" value='2' /&gt; &lt;input type='radio' class='sheet-releaseN' name='attr_sheetTab' style="display: none;" value='5' /&gt; &lt;input type='radio' class='sheet-documentatioN' name='attr_sheetTab' style="display: none;" value='6' /&gt; &lt;!--Character Sheet Tab--&gt; &lt;div class='sheet-character'&gt; character Stuff Goes here &lt;/div&gt; &lt;div class='sheet-notes'&gt; Journal/Notes Stuff Goes here &lt;/div&gt; &lt;div class='sheet-vehicles'&gt; Vehicle Stuff Goes here &lt;/div&gt; &lt;div class='sheet-config'&gt; &lt;!--Configuration Tab--&gt; Sheet Config/Settings goes here &lt;/div&gt; &lt;div class="sheet-release"&gt; Release notes info goes here &lt;/div&gt; &lt;div class='sheet-documentation'&gt; Sheet Documentation goes here &lt;/div&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; const buttonlist = ["characterprofile1","vehicletab3","journaltab4","configurationtab2","releasetab5","documentationtab6"]; buttonlist.forEach(buttonlist =&gt; { on(`clicked:${buttonlist}`, function() { console.log(`${buttonlist} button was clicked!!`); let radioval = `${buttonlist}`; radioval = radioval.slice(-1); console.log(`Value for Radio Button is: ${radioval}`); setAttrs({ sheetTab: radioval }); if (radioval === "5") { setAttrs({ newcontent: "read" }); } if (radioval === "6") { setAttrs({ newdocumentation: "read" }); } }); }); &lt;/script&gt; CSS: .sheet-base { display: inline-block; margin: 0px; padding: 0px; width: 100%; } /* Configure the Button Bar */ .sheet-buttonbar { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: flex-start; padding: 5px 0 0 0; background: rgba(255,255,255,0.75); } .sheet-navbuttons, .sheet-functions, .sheet-docbuttons { flex: 1 0 33%; } .sheet-navbuttons { text-align: left; } .sheet-functions { text-align: center; } .sheet-docbuttons { text-align: right; } /*Configure the tab*/ .sheet-character, .sheet-config, .sheet-vehicles, .sheet-notes, .sheet-release, .sheet-documentation { display: none; } .sheet-release, .sheet-documentation { background: rgba(255,255,255,0.75); } .sheet-characterT:checked ~ div.sheet-character, .sheet-configT:checked ~ .sheet-config, .sheet-vehiclesT:checked ~ div.sheet-vehicles, .sheet-journalT:checked ~ div.sheet-notes, .sheet-releaseN:checked ~ div.sheet-release, .sheet-documentatioN:checked ~div.sheet-documentation { display: block; width: 100%; margin: 0px; padding: 0px; } .sheet-topbuttons { background-color: transparent; font-family: "Pictos"; font-size: 2em; border: none; background-image: none; font-weight: bold; box-shadow: none; text-shadow: none; height: 28px; margin: 0px; padding: 0 5px 0 5px; } .sheet-tab + span.sheet-vehiclesT { margin-left: -20px; } .sheet-newcontent[value="read"] + .sheet-releasenotesbutton, .sheet-newdocumentation[value="read"] + .sheet-documentationbutton { color: black; } .sheet-newcontent[value="unread"] + .sheet-releasenotesbutton { color: red; } .sheet-newdocumentation[value="unread"] + .sheet-documentationbutton { color: blue; } button[type=roll].sheet-benniesxp, button[type=roll].sheet-statblock { border: none; background-color: transparent; background-image: none; font-size: 1.05em; font-weight: bold; box-shadow: none; text-shadow: none; height: 28px; margin: 0px; padding: 0px; }
1572760573
GiGs
Pro
Sheet Author
API Scripter
Thanks for posting that Finderski. Cassie has a barebones example of the same sort here:&nbsp; <a href="https://github.com/clevett/roll20-character-sheets/wiki/Top-Level-Navigation" rel="nofollow">https://github.com/clevett/roll20-character-sheets/wiki/Top-Level-Navigation</a> Between the two it should be posisble to figure out how to do this. Kraynic said: I have been playing with the example from the wiki link.&nbsp; It seems like the example there only works if your tabs are at the top of the sheet.&nbsp; As soon as they are put inside any sort of div (for overall border or background decoration) that example quits working.&nbsp; The radio buttons remain, but they quit displaying any tab content when selected.&nbsp; I know there are a lot of sheets with tabs in the middle, so this seems like a fairly limited example in the wiki of how tabs can be implemented. To be honest, it's just a badly constructed example for teaching. There's a very clean example of the approach used (an improved version too) somewhere on the github, maybe on the traveller sheets. (Don't quote me on that!). Its a good idea to just try out out different sheets, find ones which have tabs, and then go to github and try to get the code. If it looks too hard to understand, find another sheet. If I stumble over the ones that have good construction on my next github binge, I'll try to remember to copy them for the wiki, because the example there is really bad for learning from.
1572811720
You guys are so helpful as usual. Got my tabs up and running now, still can't seem to have them nested into the character sheet with a header up top like I was trying to do, but I do have the tabs up and running and functioning. The only issue I'm having now is that when you pull up the character sheet in the actual game. The tabs are covering up the existing tabs in the character itself and the buttons to click on are positioned directly below the actual visible tabs, rather than the tabs themselves being where the buttons are. I tried messing with various margins to lower the visible tabs, but nothing seems to be fixing that. Here is the CSS I have written. div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4,&nbsp; input.sheet-tab5:checked ~ div.sheet-tab5, input.sheet-tab6:checked ~ div.sheet-tab6, input.sheet-tab7:checked ~ div.sheet-tab7 { display: block; } input.sheet-tab { &nbsp; &nbsp; width: 105px; &nbsp; &nbsp; height:50px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 12px; &nbsp; &nbsp; left: 13px; &nbsp; &nbsp; margin: -1.5px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; &nbsp; &nbsp; opacity: 0; } input.sheet-tab + span::before { &nbsp; &nbsp; content: attr(title); &nbsp; &nbsp; border: solid 0px #a8a8a8; &nbsp; &nbsp; border-bottom-color: black; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; background: #fff; &nbsp; &nbsp; background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); &nbsp; &nbsp; width: 105px; &nbsp; &nbsp; height:50px; &nbsp; &nbsp; font-size: 16px; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; top: 12px; &nbsp; &nbsp; left: 13px; } input.sheet-tab:checked + span::before { &nbsp; &nbsp; background: #dcdcdc; &nbsp; &nbsp; background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); &nbsp; &nbsp; border-bottom-color: #fff; } input.sheet-tab:not(:first-child) + span::before { border-left: none; } input.sheet-tab2 + span::before { left: 118px; } input.sheet-tab3 + span::before { left: 223px; } input.sheet-tab4 + span::before { left: 328px; } input.sheet-tab5 + span::before { left: 433px; } input.sheet-tab6 + span::before { left: 538px; } input.sheet-tab7 + span::before { left: 643px; } div.sheet-tab-content { &nbsp; &nbsp; border: 0px solid #a8a8a8; &nbsp; &nbsp; border-top-color: #000; &nbsp; &nbsp; margin: 2px 0 0 5px; &nbsp; &nbsp; padding: 5px; }
1572813670

Edited 1572814062
ᐰndreas J.
Forum Champion
Sheet Author
I've made a sheet that uses tabs, based on the wiki's example, after doing an unknown amount of changes to eventually tame it. The relevant CSS is here at the end , and the tab "buttons" in the html are pretty much identical to the original. I think the takeaway from my sheet is that if you go the wiki example route, one way to force the tabs to be on the sheet is to give them something like "top: -25px;", but I'm pretty sure I'd go with cassie's version next time. More recently when I created the Ambition &amp; Avarice sheet, I used the HSD2 sheet's tabs code as template.
1572826066
Thanks again. I was able to get it lined up with that direction. I'm gonna be honest though, I really want my sheet to look similar to what you have, but it honestly feels like its something that is just beyond me unless I spend several more days trying to understand this stuff. I look at your code and I feel like I can't even just copy and past that because It just looks like a foreign language to me and I wouldn't know what to begin to edit to get what I want. Thank you so much though for the assistance cause at least now my character sheet is functional again before playing tomorrow night. It currently was unusable. Might just be paying someone to produce the appearance that I would like.
1572826132

Edited 1572827963
Kraynic
Pro
Sheet Author
It just takes time.&nbsp; Fiddle with it when you have some to spare and it will get there eventually. Edit: I messed around with Finderski's template little.&nbsp; I will probably switch to something based on this on the next sheet I do.&nbsp; Thanks for that template!
1572879427

Edited 1572879595
GiGs
Pro
Sheet Author
API Scripter
With apologies to Finderski, here's a revised version of his code. This removes some html and css that wasnt necessary for the example, and streamlines the sheetworker a bit. I also changed the names of the tabs, since in this version you dont need the numbers at the end of the name. I think its a great example from Finderski, which i just optimised a bit. &lt;div class='sheet-base'&gt; &lt;div class="sheet-buttonbar"&gt; &lt;div class="sheet-navbuttons"&gt; &lt;button type="action" name="act_character" class="sheet-topbuttons"&gt;U&lt;/button&gt; &lt;button type="action" name="act_vehicle" class="sheet-topbuttons"&gt;T&lt;/button&gt; &lt;button type="action" name="act_journal" class="sheet-topbuttons"&gt;n&lt;/button&gt; &lt;button type="action" name="act_configuration" class="sheet-topbuttons"&gt;x&lt;/button&gt; &lt;/div&gt; &lt;div class="sheet-functions"&gt; Unique/Specialized buttons Go here &lt;/div&gt; &lt;div class="sheet-docbuttons"&gt; &lt;input type="hidden" name="attr_content" value="unread" class="sheet-content" /&gt; &lt;button type="action" name="act_content" class="sheet-topbuttons sheet-releasenotesbutton"&gt;N&lt;/button&gt; &lt;input type="hidden" name="attr_documentation" value="unread" class="sheet-documentation" /&gt; &lt;button type="action" name="act_documentation" class="sheet-topbuttons sheet-documentationbutton"&gt;i&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab' value='character' /&gt; &lt;!--Character Sheet Tab--&gt; &lt;div class='sheet-character'&gt; character Stuff Goes here &lt;/div&gt; &lt;div class='sheet-notes'&gt; Journal/Notes Stuff Goes here &lt;/div&gt; &lt;div class='sheet-vehicles'&gt; Vehicle Stuff Goes here &lt;/div&gt; &lt;div class='sheet-config'&gt; &lt;!--Configuration Tab--&gt; Sheet Config/Settings goes here &lt;/div&gt; &lt;div class="sheet-release"&gt; Release notes info goes here &lt;/div&gt; &lt;div class='sheet-documentation'&gt; Sheet Documentation goes here &lt;/div&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; const buttonlist = ["character","vehicle","journal","configuration","content","documentation"]; const read = ['content', 'documentation']; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, function() { console.log(`${button} button was clicked!!`); const settings = {}; settings['sheetTab'] = button; if(read.includes(button)) settings[button] = 'read'; setAttrs(settings); }); }); &lt;/script&gt; CSS: .sheet-base { display: inline-block; margin: 0px; padding: 0px; width: 100%; } /* Configure the Button Bar */ .sheet-buttonbar { &nbsp; &nbsp; display: flex; &nbsp; &nbsp; flex-direction: row; &nbsp; &nbsp; flex-wrap: nowrap; &nbsp; &nbsp; justify-content: space-evenly; &nbsp; &nbsp; align-items: flex-start; &nbsp; &nbsp; padding: 5px 0 0 0; &nbsp; &nbsp; background: rgba(255,255,255,0.75); } .sheet-navbuttons, .sheet-functions, .sheet-docbuttons { &nbsp; &nbsp; flex: 1 0 33%; } .sheet-navbuttons { &nbsp; &nbsp; text-align: left; } .sheet-functions { &nbsp; &nbsp; text-align: center; } .sheet-docbuttons { &nbsp; &nbsp; text-align: right; } /*Configure the tab*/ .sheet-character, .sheet-config, .sheet-vehicles, .sheet-notes, .sheet-release, .sheet-documentation { display: none; } .sheet-release, .sheet-documentation { &nbsp; &nbsp; background: rgba(255,255,255,0.75); } .sheet-tabstoggle[value="character"] ~ div.sheet-character, .sheet-tabstoggle[value="configuration"] ~ .sheet-config, .sheet-tabstoggle[value="vehicle"] ~ div.sheet-vehicles, .sheet-tabstoggle[value="journal"] ~ div.sheet-notes, .sheet-tabstoggle[value="content"] ~ div.sheet-release, .sheet-tabstoggle[value="documentation"] ~div.sheet-documentation { display: block; width: 100%; margin: 0px; padding: 0px; } .sheet-topbuttons { &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; font-family: "Pictos"; &nbsp; &nbsp; font-size: 2em; &nbsp; &nbsp; border: none; &nbsp; &nbsp; background-image: none; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; box-shadow: none; &nbsp; &nbsp; text-shadow: none; &nbsp; &nbsp; height: 28px; &nbsp; &nbsp; margin: 0px; &nbsp; &nbsp; padding: 0 5px 0 5px; } .sheet-content[value="read"] + .sheet-releasenotesbutton, .sheet-documentation[value="read"] + .sheet-documentationbutton { &nbsp; &nbsp; color: black; } .sheet-content[value="unread"] + .sheet-releasenotesbutton { &nbsp; &nbsp; color: red; } .sheet-documentation[value="unread"] + .sheet-documentationbutton { &nbsp; &nbsp; color: blue; } If I was posting something like this to the wiki, I would remove all &nbsp;css that isnt directly relating to the tabs function. All font size, text colour, layout, etc., just so that people can see exactly what is needed for the tab function. Because CSS is damn confusing hehe.
1572881446

Edited 1572881472
ᐰndreas J.
Forum Champion
Sheet Author
GiGs said: If I was posting something like this to the wiki, I would remove all &nbsp;css that isnt directly relating to the tabs function. All font size, text colour, layout, etc., just so that people can see exactly what is needed for the tab function. Because CSS is damn confusing hehe. Exactly this. And the example could really be further distilled to only have three tabs, the extra styiling&nbsp; "release" and "docs" tabs could be seen as extra, and not needed to illustrate the core principles.
1572882462
Finderski
Pro
Sheet Author
GiGs said: With apologies to Finderski, here's a revised version of his code.&nbsp; No need to apologize... :)
1572886270

Edited 1572887651
GiGs
Pro
Sheet Author
API Scripter
Andreas J. said: GiGs said: If I was posting something like this to the wiki, I would remove all &nbsp;css that isnt directly relating to the tabs function. All font size, text colour, layout, etc., just so that people can see exactly what is needed for the tab function. Because CSS is damn confusing hehe. Exactly this. And the example could really be further distilled to only have three tabs, the extra styiling&nbsp; "release" and "docs" tabs could be seen as extra, and not needed to illustrate the core principles. Ask and you shall receive. :) Here is Finderski's method, stripped down to just the essentials to show unstyled tabs: HTML &lt;div&gt; &lt;button type="action" name="act_character" &gt;Character&lt;/button&gt; &lt;button type="action" name="act_journal" &gt;Journal&lt;/button&gt; &lt;button type="action" name="act_configuration" &gt;Configuration&lt;/button&gt; &lt;/div&gt; &lt;input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab' value='character' /&gt; &lt;div class='sheet-character'&gt; character Stuff Goes here &lt;/div&gt; &lt;div class='sheet-journal'&gt; Journal/Notes Stuff Goes here &lt;/div&gt; &lt;div class='sheet-config'&gt; Sheet Config/Settings goes here &lt;/div&gt; &lt;script type="text/worker"&gt; const buttonlist = ["character","journal","configuration"]; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); &lt;/script&gt; CSS /*Configure the tab buttons*/ .sheet-character, .sheet-config, .sheet-journal { display: none; } /* show the selected tab */ .sheet-tabstoggle[value="character"] ~ div.sheet-character, .sheet-tabstoggle[value="configuration"] ~ .sheet-config, .sheet-tabstoggle[value="journal"] ~ div.sheet-journal { display: block; } I love how simple the CSS is with this approach.
1572893854
Kraynic
Pro
Sheet Author
While I suppose that is best for just demonstrating the tabs and nothing but the tabs, having all the other fiddly bits in Finderski's example was nice to have.&nbsp; At my level of ignorance, seeing the use of flex (I've only used grid), the use of pictos, etc. was all good.&nbsp; I had to look up what the flex css code meant to make what little changes I made.&nbsp; I'm not going to pretend I understand everything in these examples yet, but the example that was more "fleshed out" was much appreciated.
1572894546

Edited 1572894622
ᐰndreas J.
Forum Champion
Sheet Author
Kraynic said: While I suppose that is best for just demonstrating the tabs and nothing but the tabs, having all the other fiddly bits in Finderski's example was nice to have.&nbsp; At my level of ignorance, seeing the use of flex (I've only used grid), the use of pictos, etc. was all good.&nbsp; I had to look up what the flex css code meant to make what little changes I made.&nbsp; I'm not going to pretend I understand everything in these examples yet, but the example that was more "fleshed out" was much appreciated. Yes, but demonstrating a concept with as little bloat as possible, should be a separate thing from a general sheet example illustrating a couple, or many,&nbsp; of the methods that can be used in sheets.
1572896469
GiGs
Pro
Sheet Author
API Scripter
Kraynic said: While I suppose that is best for just demonstrating the tabs and nothing but the tabs, having all the other fiddly bits in Finderski's example was nice to have.&nbsp; At my level of ignorance, seeing the use of flex (I've only used grid), the use of pictos, etc. was all good.&nbsp; I had to look up what the flex css code meant to make what little changes I made.&nbsp; I'm not going to pretend I understand everything in these examples yet, but the example that was more "fleshed out" was much appreciated. And now you have both versions, so you can see what specific parts were for the tabs, and what does the rest. :)
1572926141
Vince
Pro
Sheet Author
Both are good examples.&nbsp; Thanks for this.&nbsp; Definitely should be added to the CSS Wizardry on the wiki.
1572955831
ᐰndreas J.
Forum Champion
Sheet Author
Vince said: Both are good examples.&nbsp; Thanks for this.&nbsp; Definitely should be added to the CSS Wizardry on the wiki. I'll replace the old example with the short one Finderski &amp; GiGs made, (and leave the old one to be found inside a expandable section at the bottom, if someone still want to inflict it upon themselves).
1572956003
GiGs
Pro
Sheet Author
API Scripter
Great! I think a non-sheet worker version should be included, but I agree not that one. Sometime in the near future I'll try to dig up a css-only version thats simpler than the wiki one (pretty sure I have one saved somewhere, but not sure where) to go along with the sheet worker approach.
1572956703

Edited 1572957921
ᐰndreas J.
Forum Champion
Sheet Author
It is done. I made minor changes, and added a gif showing the implementation for good measure. Can't have orphaned text outside proper html elements, now can we? :D That the wiki really needs next is a clean-cut example of how to do Sheet Layout without HTML tables or the built in column/rows CSS Roll20 have. Edit: link fixed
1572957384

Edited 1574657255
GiGs
Pro
Sheet Author
API Scripter
Very nice! The gif is a nice touch. Your link goes to the edit page, not the normal viewing page by the way.
1574657066
Ray
Pro
That's fantastic guys, I have been struggling with the tabs for ages and this solved the whole problem for me almost immediately&nbsp; :D One question though, how do I add the new tabs to the original line of tabs (Bio &amp; Info / Character Sheet / Attributes and Abilities) instead of making a second line of new tabs? Also...is it possible to rename the original tabs?
1574657387

Edited 1574720200
GiGs
Pro
Sheet Author
API Scripter
You can 't adjust the top tabs (Bio, Character Sheet, A&amp;A). They are system tabs, users and sheet designers have no access to those.&nbsp; You have to use the character sheet tab, and build your character sheet within that (hence the name).
1574687298
ᐰndreas J.
Forum Champion
Sheet Author
GiGs said: You cant adjust the top tabs (Bio, Character Sheet, A&amp;A). They are system tabs, users and sheet designers have no access to those.&nbsp; You have to use the character sheet tab, and build your character sheet within that (hence the name). ... is what GiGs meant to say.
1574720180
GiGs
Pro
Sheet Author
API Scripter
Oops, thats correct!
1574996670
Ray
Pro
GiGs said: You can 't adjust the top tabs (Bio, Character Sheet, A&amp;A). They are system tabs, users and sheet designers have no access to those.&nbsp; You have to use the character sheet tab, and build your character sheet within that (hence the name). Thanks GiGs...I figured that would be the case. No matter, I'm just happy I got my tabs working, finally&nbsp; :)