Brian made an excellent post about hacking your HTML/CSS in order to stylize certain elements that are not reachable through our Roll20 sandbox. Through his post addressing how to create tabs for player sheets, I've come across a rather crippling "bug" in that if a page has scrolling, the tabs float on top of the content, sticking to the screen coordinates instead of maintaining a static position on the page. Is there a way to circumvent this issue? I'll post the code Brian wrote below to provide a reference: <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span>
<div class="sheet-tab-content sheet-tab1">
<h1>Tab 1</h1>
Lorem ipsum dolor sit amet
</div>
<div class="sheet-tab-content sheet-tab2">
<h1>Tab the Second</h1>
consectetur adipisicing elit
</div>
<div class="sheet-tab-content sheet-tab3">
<h1>3rd Tab</h1>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
<div class="sheet-tab-content sheet-tab4">
<h1>Fourth Tab</h1>
Ut enim ad minim veniam
</div> 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 { 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);
width: 150px;
height: 20px;
font-size: 18px;
position: absolute;
top: 12px;
left: 13px;
}
input.sheet-tab:checked + span::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;
}
input.sheet-tab:not(:first-child) + span::before { border-left: none; }
input.sheet-tab2 + span::before {
background: #fee;
background: -moz-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
background: -webkit-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
background: -ms-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
background: -o-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
left: 163px;
}
input.sheet-tab2:checked + span::before {
background: #dcdcdc;
background: -moz-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
background: -webkit-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
background: -ms-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
background: -o-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
border-bottom-color: #fcecec;
}
input.sheet-tab3 + span::before { left: 313px; }
input.sheet-tab4 + span::before { left: 463px; }
div.sheet-tab-content {
border: 1px solid #a8a8a8;
border-top-color: #000;
margin: 2px 0 0 5px;
padding: 5px;
}
div.sheet-tab2 { background-color: #fcecec; }
