Okay, so...
<!-- Fighting Styles --> <div> <input type="checkbox" name="attr_traditions-toggle" class="sheet-arrow" /><span></span> <h3>Fighting Traditions</h3> <div class="sheet-body"> <div> <span>Fighting Tradition:</span> <input type="text" name="attr_tradition" /> </div> <div> <span>Weapons of Choice:</span> <input type="text" name="attr_stylessbasic" /> </div> <div class="sheet-narrow-column"> <h3>Basic Styles</h3> <textarea name="attr_stylesbasic"></textarea> <h3>Greater Styles</h3> <textarea name="attr_stylegreater"></textarea> <h3>Heroic Styles</h3> <textarea name="attr_stylesheroic"></textarea> </div> </div> </div
/*Hiding Sections*/ input.sheet-arrow { float: left; }
div.sheet-body { display: none; } input.sheet-arrow:checked ~ div.sheet-body { display: block; } /* Classy! */ div.sheet-body span { display: inline-block; line-height: 28px; width: 8em; } div.sheet-body input { width: 200px; height: 18px; } div.sheet-narrow-column { width: 245px; } div.sheet-narrow-column > h3 { text-align: center; } div.sheet-narrow-column > textarea { height: 100px; width: calc(100% - 10px); margin: 0 5px 0 5px; }
Brian said:
Roll20 prefixes all class names with "sheet-". Try using "input.sheet-arrow:checked ~ div.sheet-body" as your second selector.
Brian said:
Okay, so...
Sam said:
It does though, there's some CSS tricks Actoba did to get it to work right. Look at the D&D5E and Pathfinder CSS files for an idea of what we did.
Could you give a specific example of what failed in Firefox and worked in other browsers? I just ran http://jsfiddle.net/zjyutuf8/ in Chrome 36, Firefox 31, and Internet Explorer 9, and it worked perfectly fine in all of them.
While the tricks involved in making tabs or collapsible sections may seem unintuitive to some, it's a fairly trivial piece of CSS as far as the browser is concerned. The general sibling selector is a part of CSS3, but Firefox has supported the general sibling selector since v1.0.8, and has supported the adjacent sibling selector (from CSS2.1) since it's initial release. (IE support for both was in IE7, and Chrome has always had support for both.)
HTML <link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC' rel='stylesheet' type='text/css'> CSS @font-face { font-family: 'IM Fell English SC'; font-style: normal; font-weight: 400; src: local('IM FELL English SC'), local('IM_FELL_English_SC'), url(http://themes.googleusercontent.com/static/fonts/imfellenglishsc/v3/h3Tn6yWfw4b5qaLD1RWvz9gX5f6-V0DImePmAcKHNfQ.ttf) format('truetype'); } h1, h2, h3 { font-family: 'IM Fell English SC', serif; } |
HTML <!-- Sheet Tabs --> <input type="radio" name="attr_tab" value="1" title="Basics" checked="checked" /> <input type="radio" name="attr_tab" value="2" title="Skills/Talents" /> <input type="radio" name="attr_tab" value="3" title="Combat" /> <input type="radio" name="attr_tab" value="4" title="Sorcery" /> <input type="radio" name="attr_tab" value="5" title="Gear" /> <input type="radio" name="attr_tab" value="6" title="Organized Play" /> <br/> CSS /*Sheet Tabs*/ 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: 121px; height: 20px; position: relative; top: 5px; margin: 4px; cursor: pointer; z-index: 1; font-family: 'IM Fell English SC', serif; } input.sheet-tab::before { content: attr(title); border: solid 2px #E8E8E8; text-align: center; display: inline-block; background: #FFFFFF; width: 121px; height: 20px; font-size: 14px; font-weight: bold; } input.sheet-tab:checked::before { background: #dcdcdc; background: -moz-linear-gradient(to top, #fcfcfc, #F0F0F0, #fcfcfc); background: -webkit-linear-gradient(to top, #fcfcfc, #F0F0F0, #fcfcfc); background: -ms-linear-gradient(to top, #fcfcfc, #F0F0F0, #fcfcfc); background: -o-linear-gradient(to top, #fcfcfc, #F0F0F0, #fcfcfc); background: linear-gradient(to top, #fcfcfc, #F0F0F0, #fcfcfc); border-color: #C0C0C0; } div.sheet-tab-content { border: 0px solid #a8a8a8; border-top-color: #000; margin: 2px 0 0 5px; padding: 5px; } /*end Sheet Tabs*/ |
It looks like that should be a reference to your css file? I could be mistaken about that. I'm still new to this.
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC' rel='stylesheet' type='text/css'>
h1, h2, h3 {Actually, I take it all back, I tried a jsFiddle of this and the link isn't necessary, it looks like the css contains all the required information and it worked fine with Fell as either uppercase or mixed case. You might try those suggestions anyway.
font-family: 'IM Fell English SC', serif;
}
You can't make a button that rotates through a list, changing a displayed value. However, you can fake it!
The trick lies in layering radio buttons on top of one another, and changing the z-index based on which button is selected.
When the fist input is selected, only the second one will be visible, so you can't click on any other value. When the second is clicked, the third will become the only one you can click on, and so on, until you click the final radio button input, at which point the first one will be visible. The user can still navigate backwards with the arrow keys or a combination of the tab key and space bar, but by and large the user can only change the value by cycling forward through the list.
Here's the jsfiddle:
<div class="sheet-damage-box"> <input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked="checked" /> <input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1" /> <input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2" /> <input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3" /> <span class="sheet-damage-box sheet-no-damage">☐ (no damage)</span> <span class="sheet-damage-box sheet-bashing-damage"> ∕ (bashing damage)</span> <span class="sheet-damage-box sheet-lethal-damage">☓ (lethal damage)</span> <span class="sheet-damage-box sheet-aggravated-damage">✱ (aggravated damage)</span> </div>
div.sheet-damage-box { width: 195px; height: 30px; position: relative; } input.sheet-damage-box { width: 30px; height: 30px; position: absolute; z-index: 1; } span.sheet-damage-box { margin: 10px 0 0 40px; display: none; } input.sheet-no-damage { z-index: 2; } input.sheet-no-damage:checked + input.sheet-bashing-damage, input.sheet-bashing-damage:checked + input.sheet-lethal-damage, input.sheet-lethal-damage:checked + input.sheet-aggravated-damage { z-index: 3; } input.sheet-no-damage:checked ~ span.sheet-no-damage, input.sheet-bashing-damage:checked ~ span.sheet-bashing-damage, input.sheet-lethal-damage:checked ~ span.sheet-lethal-damage, input.sheet-aggravated-damage:checked ~ span.sheet-aggravated-damage { display: inline-block; }
As you can see, I'm using the standard show/hide technique to display a span with some text for each selected radio button. You could also display an image, an input, an entire section of the character sheet, whatever you like!
One fancy option would be to combine this with the technique to style your radio buttons. Hide the radios with opacity:0, and display an image in the same location as the radio button (make sure it's at a lower z-index than the buttons!) so that the user is clicking on the displayed image to change it.
Input | 16 | 8 | 4 | 2 | 1 | 0 | -1 | -2 | -4 | -8 | -16 | -32 |
Corresponding Output | -10 | -8 | -6 | -4 | -2 | 0 | 5 | 10 | 15 | 20 | 25 | 30 |
<select name="attr_size">
<option value="16">Nuisance</option>
<option value="8">Fine</option>
<option value="4">Diminutive</option>
<option value="2">Tiny</option>
<option value="1">Small</option>
<option value="0" selected="selected">Medium</option>
<option value="-1">Large</option>
<option value="-2">Huge</option>
<option value="-4">Gargantuan</option>
<option value="-8">Colossal</option>
<option value="-16">Enormous</option>
<option value="-32">Vast</option>
</select>
<select disabled="true" name="attr_str_adjust">Or possibly disabling all values in the second select except the one desired based on the option chosen in the first select ??
<option value="-10">@{size}=16</option>
<option value="-8">@{size}=8</option>
<option value="-6">@{size}=4</option>
<option value="-4">@{size}=2</option>
<option value="-2">@{size}=1</option>
<option value="0">@{size}=0</option>
<option value="5">@{size}=-1</option>
<option value="10">@{size}=-2</option>
<option value="15">@{size}=-4</option>
<option value="20">@{size}=-8</option>
<option value="25">@{size}=-16</option>
<option value="30">@{size}=-32</option>
</select>
Is @{size} used for anything beyond @{str_adjust}? Because it would be easier to calculate with a linear progression:
<select name="attr_size">
<option value="1">Nuisance</option>
<option value="2">Fine</option>
<option value="3">Diminutive</option>
<option value="4">Tiny</option>
<option value="5">Small</option>
<option value="6" selected="selected">Medium</option>
<option value="7">Large</option>
<option value="8">Huge</option>
<option value="9">Gargantuan</option>
<option value="10">Colossal</option>
<option value="11">Enormous</option>
<option value="12">Vast</option>
</select>
<input type="hidden" disabled="disabled" name="attr_size_p2" value="(@{size} * @{size})" />
<input type="hidden" disabled="disabled" name="attr_size_p3" value="(@{size_p2} * @{size})" />
<input type="hidden" disabled="disabled" name="attr_size_p4" value="(@{size_p2} * @{size_p2})" />
<input type="number" disabled="disabled" name="attr_str_adjust" value="floor(-0.00611888 * @{size_p4} + 0.150932 * @{size_p3} - 0.972902 * @{size_p2} + 4.10082 * @{size} - 13.8527 - floor(@{size} / 6) * 0.58 + floor(@{size} / 7) * 0.58 + floor(@{size} / 12) * 0.58)" />
This is a quartic fit of the output, with some adjustment to ensure correct final output (done by trial-and-error in Excel). Keeping the values for @{size} would be much more complicated. Either you need a polynomial interpolation (a much longer equation), or you need to map the input's exponential progression to a linear one, and then do the above. (With the exception of 0, the input is a series of the powers of 4, stepping by 0.5: 4^2, 4^1.5, 4^1, 4^0.5, 4^0, 0, -4^0, -4^0.5, -4^1, -4^1.5, -4^2, -4^2.5.)
Dan W. said:
Does anyone have any suggestions (including give up -- it's a fools errand) ?
element[class|="my-class-name"] { ... }
Should work in everything except Opera (class name must contain a hyphen). So, you could do this:
input[type=checkbox].visibility-check {
/* Style for Opera */
}
input[type=checkbox][class|="visibility-check"] {
/* Style for everything else */
}
I'm not sure if newer versions of Opera have fixed this bug.
Older versions of Opera also had a bug with html:first-child. The html tag is not the first child of anything, so the match should fail. I believe this was fixed in Opera 9, but you could do this:
html:first-child input[type=checkbox].visibility-check {
/* Style for Opera < 9 */
}
input[type=checkbox].visibility-check {
/* Style for everything else */
}
Just put the text outside of the fieldset? I'm not entirely sure what you mean.
You could try using ::before and ::after pseudoselectors on the repcontrol/repcontainer to add content as well.
Same issue for me !Tom said:
Tabs bar
Firefox still doesn't see anything here.
tontione said:
Same issue for me !Tom said:
Tabs bar
Firefox still doesn't see anything here.
And the initial jsfiddle : ( http://jsfiddle.net/vdwLU/ ) doesn't work too !
i found that ::before doesn't work in firefox for inputs !
source : http://stackoverflow.com/questions/18610133/css3-r...
So i think Brian's code can't work on firefox !?
You can use the same pattern as styling radio buttons to create tabs, by adding a span element after the input and styling that, while giving the radio button opacity: 0. A quick example: http://jsfiddle.net/z866duoa/
Certainly!
button[type=roll].sheet-blank-roll-button::before { content: ""; }
This will remove the d20 image from roll button with the class "sheet-blank-roll-button". (The above is copied directly from my Exalted character sheet.) If you want to add different content to the ::before pseudo-element of the button, keep in mind that it defaults to dicefont20, and so pretty much any text you add to the ::before will be d20 images; change the font to something else in order to include anything else.
Roger, you're not going to be able to set the value of multiple attributes using a single form element (or group of radio inputs). The attribute to set is defined by the name of the form element, and you can't give multiple names to the same element.
If you built your sheet to work with an API script, you could set a value to an attribute that is then interpreted by the script as though it were multiple attributes, but that option would restrict your sheet to mentor accounts only.