Torg Eternity Character sheet

Hello, I have some weird display issue with the Torg Character sheet. <a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Torg%20Eternity/torgeternity.jpg" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Torg%20Eternity/torgeternity.jpg</a> The top bar is supposed to be compoesd of 4 tabs (Home, Equipment, Perks, powers) The thing is they don't appear properly on my game (I only have 4 radio button with no text). I tried to use a custom character sheet with the codes found on github but the result is the same but I found out that the "Equipment" tab is renamed "Notes". My problem is that I don't know if this difference is due to an update of the character sheet or if it is really a display issue with my browser (I use Firefox 69.0.3) I couldn't find another topic about this "bug" on the forum (which is weird because It made me realise that I had the same issue with my Ars Magica game where the tabs also don't show up).

If its not limited to one sheet, could it be a browser issue? Have you tried your browser with extensions disabled? Edit: &nbsp;I just remembered there was report of a change in the way firefox handles certain elements, which broke some sheets till they were fixed. Ars Magica and Torg may be among the sheets that weren't fixed.&nbsp; So try it in chrome and see if it looks okay there.

Yeah, seems like this is an issue on Firefox, while the sheet looks fine on Chrome. Looking at the browser's developer tools, it says many of those css parts that styles the buttons have invalid values(on Firefox). I think this could be a result of Firefox making some minor changes how they display things, and those parts broke. Edit: I'm fairly certain I narrowed down the source to be how Firefox handles the linear-gradient() css fucntion, reading the extra notes. If all those fancy gradient backgorund things would be replaced with a static, gray background, it might work on firefox again. Edit2: The Torg Eternity Sheet seems to style the checkboxes themselves, but more often I've seen tabs been implemented by having a "span" right after the radio-input. The radio inputs are made invisible, and then the spans are positioned to be right on to of the corresponding radio-input, which then creates the visuals of the tab itself. It have probably something to do with inputs being harder to style in a good way, and the better method is to create the span-elements that then serves as "fake" radio-inputs. Functioning tab implementations in Roll20: DnD5E and HSD2 are two sheets using the input+span tab method. Starfinder official seems to be doing basicly the same with input+div. PF2E uses action buttons for tabs. the CSS Wizardry wiki page have a clunky example of tabs done with input+span, and doesn't function straight out the box. Once again I have to pander my own sheets and point to HSD2 as a simple-to-mid-complex implementation of the tabs, that should be easier to figure out &amp; isolate than from larger sheets that have 10x times to code to skim through.

Nice detective work! The Traveller sheets and most sheets by Coal Powered Puppet are also good examples of tabs (and do some great things with conditional visibility of things like skills too). Andreas J. said: the CSS Wizardry wiki page have a clunky example of tabs done with input+span, and doesn't function straight out the box.&nbsp; Those examples really should be updated. It was a source of endless frustration to me back making my first sheet and trying to use the tab method defined there.

GiGs said: Andreas J. said: the CSS Wizardry wiki page have a clunky example of tabs done with input+span, and doesn't function straight out the box.&nbsp; Those examples really should be updated. It was a source of endless frustration to me back making my first sheet and trying to use the tab method defined there. Yeah, the tabs on the HSD2 sheet are loosely based on the wiki example, and to my knowledge, the HSD2 sheet is the smaller/least complex sheet to grab functioning tabs from. There are other sheet that do a better job, but tracking down every relevant css class is way harder on those +10k line sheets...

Cassie has an example of action buttons for tabs 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>

Yup, I used the span system like in the CSS Wizardry wiki page and that fixed the thing. Thank you.

Archange said: I used the span system like in the CSS Wizardry wiki page and that fixed the thing. If you managed to fix the issue on Firefox, would you mind sharing your fixed version of the sheet with others? I can help out getting that fix to the public sheet if you aren't familiar with Git/GitHub.

I never used github but I can give the code I updated Only changed lines 7 to 10 in the html : &lt;input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" title="Home" checked="checked" /&gt;&lt;span title="Character"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="Notes" /&gt;&lt;span title="Equipment"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" title="Perks" /&gt;&lt;span title="Perks"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4" title="Powers" /&gt;&lt;span title="Powers"&gt;&lt;/span&gt; And line 677 (class was tab6 instead of tab2) &lt;div class="sheet-tab-content sheet-tab2"&gt; And changed the firsts classes in the css : 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 { display: block; } input.sheet-tab { width: 150px; height: 20px; position: relative; top: 5px; left: 6px; margin: -1.5px; cursor: pointer; z-index: 1; opacity: 0; } input.sheet-tab + span::before { content: attr(title); border: solid 1px #a8a8a8; border-bottom-color: black; text-align: center; display: inline-block; background: #fff; background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); position: absolute; width: 150px; height: 20px; font-size: 18px; } input.sheet-tab + span:checked::before { background: #dcdcdc; background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); border-bottom-color: #fff; position: absolute; } input.sheet-tab:not(:first-child) + span::before { border-left: none; } input.sheet-tab1 + span::before { left: 35px; } input.sheet-tab2 + span::before { left: 185px; } input.sheet-tab3 + span::before { left: 335px; } input.sheet-tab4 + span::before { left: 485px; } Not the cleanest thing but i'm no dev :p

Okay, I submitted the fix, with some adjustments to Github. With V.3.2, the sheet should also highlight the active tab button, which didn't happen on your fix(was just a minor typo) Torg Eternity V.3.2 (update likely going live 2019-10-22) Fixed tab buttons so they also display properly on Firefox ( Archange , with minor adjustments from Anduh ) Enlarged Logo to be readable minor CSS/HTML cleanup Changelog update

Yeah, I'm pro dev now !! (or not :) )

Archange said: Yeah, I'm pro dev now !! (or not :) ) Now you can put on your CV that you have contributed code to an open-source project :D