Custom Character Sheet ID usable in template

Hi ! I use tabs for my characters sheet with only classes and css. So, every characters have the same class into their sheet and if I use tabs from one, all the others tabs from the others sheets are opening the first one. Even if this one is "close". So, is it possible to add an ID into the class like "tabs-skills-[ID]" into the HTML and the CSS layout? Thank you.

No, you cannot use IDs on character sheets, use classes instead.

See the wiki on  character sheet creation . IDs are not a valid way to reference character sheet html elements because the html elements are not unique on the page. Use the class reference in your css instead: .sheet-some-class{ /*CSS HERE*/ } Also, take note of the fact that your css will be modified by Roll20's parser in specific ways. These include, but may not be limited to: all classes are prepended with sheet- if they do not already have it (note that roll template classes don't appear to follow this, although they still need it) all css declaration are prepended with .charsheet if they do not already have it all attribute names must start with attr_ in order to be valid attributes. All rolls must start with roll_ to be valid.

Scott C. said: all attribute names must start with attr_ in order to be valid attributes. All rolls must start with roll_ to be valid. I suspect this is the problem. If the radio buttons backing the tab selection are named "foo" instead of "attr_foo", then all the tabs on all the sheets will likely be part of the same radio button group, of which only one can be selected.

Brian said: Scott C. said: all attribute names must start with attr_ in order to be valid attributes. All rolls must start with roll_ to be valid. I suspect this is the problem. If the radio buttons backing the tab selection are named "foo" instead of "attr_foo", then all the tabs on all the sheets will likely be part of the same radio button group, of which only one can be selected. I forgot the "attr_" for the options but the problem is still here. Anyway, I have it only if I open severals sheets. I'll use it like that. Thanks anyway.

If you can post an example of the code for the problem section, we might be able to help more.

Here the Html <div class="tabs">     <div class="tab">         <input type="radio" id="attr_tab-1" name="tab-group-1" checked>         <label class="tabs-label" for="attr_tab-1">Caractéristiques</label>                  <div class="content">             <div role="tabpanel" class="tab-panel tabstats active" id="tabstats">                                               <!-- Things tab 1 -->                              </div>         </div>     </div>          <div class="tab">         <input type="radio" id="attr_tab-2" name="tab-group-1">         <label class="tabs-label" for="attr_tab-2">Compétences</label>                  <div class="content heightTabskills">             <!-- Things tab 2 -->                                 </div>     </div> </div> Here the Css .charsheet .sheet-tabs {   position: relative;      min-height: 480px; /* This part sucks */   clear: both;   margin: 35px 0 25px;   background: white; } .charsheet .sheet-tab {   float: left;     } .charsheet .sheet-tab .sheet-tabs-label {   background: #eee;   padding: 10px;   border: 1px solid #ccc;   margin-left: -1px;   position: relative;   left: 1px;   top: -29px;   -webkit-transition: background-color .17s linear; } .charsheet .sheet-tab input[type="radio"] {   display: none;    } .charsheet .sheet-content {   position: absolute;   top: 10px;   left: 0;   background: white;   right: 0;   bottom: 0;   padding: 20px;   border: 1px solid #ccc;   -webkit-transition: opacity .6s linear;   opacity: 0; } .charsheet input[type="radio"]:checked ~ label {   background: white;   border-bottom: 1px solid white;   z-index: 2; } .charsheet input[type="radio"]:checked ~ label ~ .sheet-content {   z-index: 1;   opacity: 1; } .charsheet .sheet-specialskills input[type="number"]{     margin-left:10px; } Thank you.

Brandys said: Here the Html <div class="tabs">     <div class="tab">         <input type="radio" id="attr_tab-1" name="tab-group-1" checked>         <label class="tabs-label" for="attr_tab-1">Caractéristiques</label>                  <div class="content">             <div role="tabpanel" class="tab-panel tabstats active" id="tabstats">                                               <!-- Things tab 1 -->                              </div>         </div>     </div>          <div class="tab">         <input type="radio" id="attr_tab-2" name="tab-group-1">         <label class="tabs-label" for="attr_tab-2">Compétences</label>                  <div class="content heightTabskills">             <!-- Things tab 2 -->                                 </div>     </div> </div> Ok, Here's your problem. You are trying to use IDs in your html to then reference in your css. As noted by myself and Jakob above, IDs are not valid for character sheet html/css. See the wiki I linked to above for full details on this. Furthermore, the name of your html elements must be prepended with "attr_", not the ID of the elment (which is invalid anyways). So for an example of all of this:         <input type="radio" id="attr_tab-1" name="tab-group-1" checked> Should be         <input type="radio" class="tab-1" name="attr_tab-group-1" checked="checked"> Now this does mean that your current use of labels will not work as you can't use the for="..." syntax to link the labels to their radio buttons. See the  CSS Wizardry wiki for details on how to handle tabbed sheets in Roll20 character sheets. I'm sure that more experienced sheet authors like Brian and Jakob will see other things that need fixing here as well.

Hi I'll look at this as soon as I can and update my sheets. Thank you !