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 .
×
Create a free account

[Help] Greg Porter's EABA Sheet - Styling Checkboxes

March 25 (7 years ago)
L00kingGla55
Sheet Author
I am working on creating a character sheet for EABA, since one does not appear to exist on Roll20 yet [WIP Screenshot].
I'm new to CSS and HTML, and I need some help emulating a feature of the interactive EABA character sheet:

 
I'm trying to make a checkbox that can cycle through more than two states. Specifically I want to toggle between 4 states: Empty, Slash, Check and Disabled. I considered using a select box for it, but the most accessible and organized way to cycle is just with a toggle, much like the interactive pdf linked above. If anyone can help a CSS noob out, I'd really appreciate it. I saw a similar feature in the Official New World of Darkness sheet (for Lethal, Aggravated and Bashing damage), but despite my best efforts, I can't seem to replicate it.

As before, any help is greatly appreciated! I'd really like to bring EABA to roll20 while retaining as many of the features of the Interactive character sheet as possible!



March 25 (7 years ago)
Jakob
Sheet Author
API Scripter
Here's what I use for the top of the Blades in the Dark sheet; this is a three-way-toggle between 3 sheet modes, should be right what you wanted if I understand you correctly. The way it's set up, it will work for an arbitrary number of states, the fact that it's 3 is purely incidental. This is the HTML:
<input type="checkbox" name="attr_sheet_type" class="sheet-hidden sheet-3waybox" value="faction"/>
<input type="radio" name="attr_sheet_type" class="sheet-type-selector sheet-3waybox" value="character" checked/>
<input type="radio" name="attr_sheet_type" class="sheet-type-selector sheet-3waybox" value="crew"/>
<input type="radio" name="attr_sheet_type" class="sheet-type-selector sheet-3waybox" value="faction"/>
<span class="sheet-type-selector"></span>
Note that the last input is duplicated as a checkbox at the start; this allows me to "wrap around" in a circle. The CSS looks like this:
.sheet-hidden{
  display: none !important;
}
input.sheet-type-selector {
  width: 170px;
  height: 20px;
  display: none;
  opacity: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  position: absolute;
}
.sheet-3waybox:checked + .sheet-3waybox, {
  display: inline-block;
}

/* Styling of the span common to all states */
span.sheet-type-selector {
  border: solid 1px #a7a7a7;
  text-align: center;
  display: inline-block;
  background: #cccccc;
  color: #3f3f3f;
  width: 170px;
  height: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: serif;
  font-weight: 600;
  cursor: pointer;
}
input.sheet-type-selector:hover ~ span {
  color: red;
}

/* Here you can style the span depending on what state is toggled */
input.sheet-type-selector[value="character"]:checked ~ span::before {
  content: "Character Mode";
}
input.sheet-type-selector[value="crew"]:checked ~ span::before {
  content: "Crew Mode";
}
input.sheet-type-selector[value="faction"]:checked ~ span::before {
  content: "Faction Mode";
}
March 25 (7 years ago)
L00kingGla55
Sheet Author
Thanks jakob! This is exactly what I'm looking for!