Tabs on your Custom Character Sheet

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.

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. 

So, a couple of things...that code won't work on Roll20, because Roll20 has some restriction on what it will allow.  My guess is, that working site is also using Javascript to control the tabs (the onClick command looks like a JS call).  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: https://wiki.roll20.net/CSS_Wizardry#Tabs

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

I look forward to that example.  I have been playing with the example from the wiki link.  It seems like the example there only works if your tabs are at the top of the sheet.  As soon as they are put inside any sort of div (for overall border or background decoration) that example quits working.  The radio buttons remain, but they quit displaying any tab content when selected.  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.

Ok, so, here's a quick and dirty template...

HTML + Sheetworker:

<div class='sheet-base'>
    <div class="sheet-buttonbar">
        <div class="sheet-navbuttons">
            <button type="action" name="act_characterprofile1" class="sheet-topbuttons">U</button>
            <input type="checkbox" class="sheet-showVehicles" name="attr_vehicle" style="display: none;" />
            <button type="action" name="act_vehicletab3" class="sheet-topbuttons sheet-vehiclesT">T</button>
            <button type="action" name="act_journaltab4" class="sheet-topbuttons">n</button>
            <button type="action" name="act_configurationtab2" class="sheet-topbuttons">x</button>
        </div>
        <div class="sheet-functions">
            Unique/Specialized buttons Go here
        </div>
        <div class="sheet-docbuttons">
            <input type="hidden" name="attr_newcontent" value="read" class="sheet-newcontent" />
            <button type="action" name="act_releasetab5" class="sheet-topbuttons sheet-releasenotesbutton">N</button>
            <input type="hidden" name="attr_newdocumentation" value="read" class="sheet-newdocumentation" />
            <button type="action" name="act_documentationtab6" class="sheet-topbuttons sheet-documentationbutton">i</button>
        </div>
    </div>
    <input type='radio' class='sheet-characterT' name='attr_sheetTab' style="display: none;" value='1' checked />
    <input type="radio" class="sheet-journalT" name="attr_sheetTab" style="display: none;" value="4" />
    <input type='radio' class='sheet-vehiclesT' name='attr_sheetTab' style="display: none;" value='3' />
    <input type='radio' class='sheet-configT' name='attr_sheetTab' style="display: none;" value='2' />
    <input type='radio' class='sheet-releaseN' name='attr_sheetTab' style="display: none;" value='5' />
    <input type='radio' class='sheet-documentatioN' name='attr_sheetTab' style="display: none;" value='6' />
    <!--Character Sheet Tab-->
    <div class='sheet-character'>
        character Stuff Goes here 
    </div>
    <div class='sheet-notes'>
        Journal/Notes Stuff Goes here 
    </div>
    <div class='sheet-vehicles'>
        Vehicle Stuff Goes here 
    </div>
    <div class='sheet-config'> <!--Configuration Tab-->
        Sheet Config/Settings goes here 
    </div>
    <div class="sheet-release">
        Release notes info goes here 
    </div>
    <div class='sheet-documentation'>
        Sheet Documentation goes here 
    </div>
</div>
<script type="text/worker">
    const buttonlist = ["characterprofile1","vehicletab3","journaltab4","configurationtab2","releasetab5","documentationtab6"];
    buttonlist.forEach(buttonlist => {
        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" });
            }
        });
    });
</script>

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;
}

Thanks for posting that Finderski. Cassie has a barebones example of the same sort here: 

https://github.com/clevett/roll20-character-sheets/wiki/Top-Level-Navigation

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.  It seems like the example there only works if your tabs are at the top of the sheet.  As soon as they are put inside any sort of div (for overall border or background decoration) that example quits working.  The radio buttons remain, but they quit displaying any tab content when selected.  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.

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, 

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 {

    width: 105px;

    height:50px;

    position: relative;

    top: 12px;

    left: 13px;

    margin: -1.5px;

    cursor: pointer;

    z-index: 1;

    opacity: 0;

}

input.sheet-tab + span::before {

    content: attr(title);

    border: solid 0px #a8a8a8;

    border-bottom-color: black;

    text-align: center;

    display: inline-block;

    background: #fff;

    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);

    width: 105px;

    height:50px;

    font-size: 16px;

    position: absolute;

    top: 12px;

    left: 13px;

}

input.sheet-tab:checked + span::before {

    background: #dcdcdc;

    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);

    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 {

    border: 0px solid #a8a8a8;

    border-top-color: #000;

    margin: 2px 0 0 5px;

    padding: 5px;

}

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 & Avarice sheet, I used the HSD2 sheet's tabs code as template.

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.

It just takes time.  Fiddle with it when you have some to spare and it will get there eventually.

Edit: I messed around with Finderski's template little.  I will probably switch to something based on this on the next sheet I do.  Thanks for that template!

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.

<div class='sheet-base'>
    <div class="sheet-buttonbar">
        <div class="sheet-navbuttons">
            <button type="action" name="act_character" class="sheet-topbuttons">U</button>
            <button type="action" name="act_vehicle" class="sheet-topbuttons">T</button>
            <button type="action" name="act_journal" class="sheet-topbuttons">n</button>
            <button type="action" name="act_configuration" class="sheet-topbuttons">x</button>
        </div>
        <div class="sheet-functions">
            Unique/Specialized buttons Go here
        </div>
        <div class="sheet-docbuttons">
            <input type="hidden" name="attr_content" value="unread" class="sheet-content" />
            <button type="action" name="act_content" class="sheet-topbuttons sheet-releasenotesbutton">N</button>
            <input type="hidden" name="attr_documentation" value="unread" class="sheet-documentation" />
            <button type="action" name="act_documentation" class="sheet-topbuttons sheet-documentationbutton">i</button>
        </div>
    </div>
    <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='character'  />
    <!--Character Sheet Tab-->
    <div class='sheet-character'>
        character Stuff Goes here 
    </div>
    <div class='sheet-notes'>
        Journal/Notes Stuff Goes here 
    </div>
    <div class='sheet-vehicles'>
        Vehicle Stuff Goes here 
    </div>
    <div class='sheet-config'> <!--Configuration Tab-->
        Sheet Config/Settings goes here 
    </div>
    <div class="sheet-release">
        Release notes info goes here 
    </div>
    <div class='sheet-documentation'>
        Sheet Documentation goes here 
    </div>
</div>
<script type="text/worker">
    const buttonlist = ["character","vehicle","journal","configuration","content","documentation"];
    const read = ['content', 'documentation'];
    buttonlist.forEach(button => {
        on(`clicked:${button}`, function() {
            console.log(`${button} button was clicked!!`);
            const settings = {};
            settings['sheetTab'] = button;
            if(read.includes(button)) settings[button] = 'read';
            setAttrs(settings);
        });
    });
</script>

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-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 {
    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-content[value="read"] + .sheet-releasenotesbutton,
.sheet-documentation[value="read"] + .sheet-documentationbutton {
    color: black;
}
.sheet-content[value="unread"] + .sheet-releasenotesbutton {
    color: red;
}
.sheet-documentation[value="unread"] + .sheet-documentationbutton {
    color: blue;
}

If I was posting something like this to the wiki, I would remove all 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.

GiGs said:

If I was posting something like this to the wiki, I would remove all 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  "release" and "docs" tabs could be seen as extra, and not needed to illustrate the core principles.

GiGs said:

With apologies to Finderski, here's a revised version of his code. 

No need to apologize... :)

Andreas J. said:

GiGs said:

If I was posting something like this to the wiki, I would remove all 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  "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

<div>
    <button type="action" name="act_character" >Character</button>
    <button type="action" name="act_journal" >Journal</button>
    <button type="action" name="act_configuration" >Configuration</button>
</div>
<input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='character'  />

<div class='sheet-character'>
    character Stuff Goes here 
</div>
<div class='sheet-journal'>
    Journal/Notes Stuff Goes here 
</div>
<div class='sheet-config'> 
    Sheet Config/Settings goes here 
</div>

<script type="text/worker">
    const buttonlist = ["character","journal","configuration"];
    buttonlist.forEach(button => {
        on(`clicked:${button}`, function() {
            setAttrs({
                sheetTab: button
            });
        });
    });
</script>

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.

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.  At my level of ignorance, seeing the use of flex (I've only used grid), the use of pictos, etc. was all good.  I had to look up what the flex css code meant to make what little changes I made.  I'm not going to pretend I understand everything in these examples yet, but the example that was more "fleshed out" was much appreciated.

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.  At my level of ignorance, seeing the use of flex (I've only used grid), the use of pictos, etc. was all good.  I had to look up what the flex css code meant to make what little changes I made.  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,  of the methods that can be used in sheets.

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.  At my level of ignorance, seeing the use of flex (I've only used grid), the use of pictos, etc. was all good.  I had to look up what the flex css code meant to make what little changes I made.  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. :)

Both are good examples.  Thanks for this.  Definitely should be added to the CSS Wizardry on the wiki.

Vince said:

Both are good examples.  Thanks for this.  Definitely should be added to the CSS Wizardry on the wiki.

I'll replace the old example with the short one Finderski & 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).

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.

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

Very nice! The gif is a nice touch. Your link goes to the edit page, not the normal viewing page by the way.

That's fantastic guys, I have been struggling with the tabs for ages and this solved the whole problem for me almost immediately  :D

One question though, how do I add the new tabs to the original line of tabs (Bio & Info / Character Sheet / Attributes and Abilities) instead of making a second line of new tabs?

Also...is it possible to rename the original tabs?

You can't adjust the top tabs (Bio, Character Sheet, A&A). They are system tabs, users and sheet designers have no access to those. 

You have to use the character sheet tab, and build your character sheet within that (hence the name).

GiGs said:

You cant adjust the top tabs (Bio, Character Sheet, A&A). They are system tabs, users and sheet designers have no access to those. 

You have to use the character sheet tab, and build your character sheet within that (hence the name).

... is what GiGs meant to say.

Oops, thats correct!

GiGs said:

You can't adjust the top tabs (Bio, Character Sheet, A&A). They are system tabs, users and sheet designers have no access to those. 

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  :)