CSS Wizardry

Is that the actual HTML/CSS you're using? Because your HTML doesn't have either the (sheet-)arrow or (sheet-)body classes in it, and input.arrow isn't going to match anything (you'd need input.sheet-arrow).

Sorry. Looks like the forum gods edited my code when I posted it. So then what exactly do you need to do to make <input type="checkbox" class="arrow"/> work? Here is my exact code: <!-- Fighting Styles --> <div class='sheet-1colrow'> </div> <div> <h3>Fighting Traditions</h3> <input type="checkbox" class="arrow"/><span></span> <br> <div class='sheet-1colrow'> </div> <div style="width:5px"> </div> <div align="left"> <span style="line-height:28px">Fighting Tradition:</span> <textarea name="attr_tradition" style="width:200px; height:18px"></textarea> <div style="width:5px"> </div> </div> <div align="left"> <span style="line-height:28px width: 30em">Weapons of Choice:</span> <textarea name="attr_stylessbasic" style="width:200px; height:18px"></textarea> </div> <br> <div class='sheet-3colrow'> </div> <div style="width:245px" align="center"> <h3 align="center">Basic Styles</h3> <textarea name="attr_stylesbasic" style="width:235px; height:100px"></textarea> </div> <div style="width:5px"> </div> <div style="width:245px" align="center"> <h3 align="center">Greater Styles</h3> <textarea name="attr_stylegreater" style="width:235px; height:100px"></textarea> </div> <div style="width:5px"> </div> <div style="width:245px" align="center"> <h3 align="center">Heroic Styles</h3> <textarea name="attr_stylesheroic" style="width:235px; height:100px"></textarea> </div> </div> This doesn't work. Checking the "arrow" doesn't hide anything. I expect this is a div issue. But even so, once the checkbox is checked, it won't let me uncheck it. I've revised my CSS as follows: /*Hiding Sections*/ input.arrow { display: none; } input.sheet-arrow:checked ~ div.sheet-body { float: left; } Thanks Brian. I suspect I'm starting to get on your nerves. I'll be done soon. Promise. :)

Okay, so... You've swapped the float:left and display:none , you don't want that. You want to swap display:none and display:block in order to invert the checkbox behavior. Your HTML doesn't actually have a div that you're trying to hide; that would be one with class="sheet-body" or class="body" to match the div.sheet-body in the CSS. You still don't have the "sheet-" prefix in your CSS on the arrow class. In Roll20, it won't match anything. Your arrow checkbox doesn't have a name prefixed with "attr_", so it won't save. Your users will have to re-check it each time the sheet is loaded. You appear to be trying to use the checkbox styling I've posted in this thread. If you're actually setting the checkbox itself to display:none at any point, then that would prevent you from clicking the checkbox again, which would prevent you from unchecking it. I can't be certain of that, though, because I can't see all of your CSS. As a general recommendation, avoid inline styles unless you really need it. For example, you've got three divs with style="width:245px" but you could easily make this a class. Same goes for the h3s with align="center" . You should also note that the align attribute is not officially supported by either h3 or div, and the attribute is entirely obsolote in HTML5; you should use CSS for element positioning. In fact, you could also merge those three divs together if you're wanting them in a column. I'm not certain what the sheet-1colrow class is supposed to do, but both it and the several style="width:5px" divs are empty, so without some additional CSS they're going to be 0x0 blocks on the page at render time. Why are fighting tradition and weapons of choice rendered as textareas, but sized as text inputs? Unless you actually need the user to be capable of writing multiple lines (which is of dubious use at the small textarea height), use an input. <a href="http://jsfiddle.net/XudLz/" rel="nofollow">http://jsfiddle.net/XudLz/</a> &lt;!-- Fighting Styles --&gt; &lt;div&gt; &lt;input type="checkbox" name="attr_traditions-toggle" class="sheet-arrow" /&gt;&lt;span&gt;&lt;/span&gt; &lt;h3&gt;Fighting Traditions&lt;/h3&gt; &lt;div class="sheet-body"&gt; &lt;div&gt; &lt;span&gt;Fighting Tradition:&lt;/span&gt; &lt;input type="text" name="attr_tradition" /&gt; &lt;/div&gt; &lt;div&gt; &lt;span&gt;Weapons of Choice:&lt;/span&gt; &lt;input type="text" name="attr_stylessbasic" /&gt; &lt;/div&gt; &lt;div class="sheet-narrow-column"&gt; &lt;h3&gt;Basic Styles&lt;/h3&gt; &lt;textarea name="attr_stylesbasic"&gt;&lt;/textarea&gt; &lt;h3&gt;Greater Styles&lt;/h3&gt; &lt;textarea name="attr_stylegreater"&gt;&lt;/textarea&gt; &lt;h3&gt;Heroic Styles&lt;/h3&gt; &lt;textarea name="attr_stylesheroic"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;/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 &gt; h3 { text-align: center; } div.sheet-narrow-column &gt; 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. Thank you, that did it. And for whatever reason, now tabs are working for me too.

Thank you to all the people who asked the questions I needed answers to, before I went looking for the answers, and thank you Brian for answering so many of them.

Brian said: Okay, so... Thanks Brian! This clears up a lot. My HTML is about 10 years out of date and my CSS skills are hardly worth mentioning, so I've been leaning mostly on the HTML side to get things done. Clearly not the best way to go about doing things. So thanks for being patient and answering a lot of these questions with obvious answers. It's been a real learning experience for me. I've incorporated a lot of these changes into the sheet already and its working great. On the empty DIV fields: I'm using the WoD character sheet CSS as my template. I've noticed that if I don't include a "&lt;div class='sheet-Xcolrow'&gt; &lt;/div&gt;" at the beginning of each "section", my left/right margins go all to hell. And that's regardless whether its 3-, 2- or 1-column. It's like that in the original sheet too. I'm not really sure why, and there is probably a very easy fix for it if I had a better idea what I was doing on the CSS side. As it stands, it's just something I've gotten used to adding. The " style="width:5px" divs" are pretty much the same, creating Gutter space between the columns. Again, artifact of the original sheet that seems to work whether it should or not. Tom

Brian, With the Tabs material you posted above, is there any reason why it wouldn't work on Firefox? It seems to work just fine on Chrome and Safari, but Firefox doesn't show the frames and inline text, just the "hidden" checkboxes.

No, there's no reason why it would fail on Firefox as far as I know. Post what you've got and I'll try to figure out the problem.

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.

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 <a href="http://jsfiddle.net/zjyutuf8/" rel="nofollow">http://jsfiddle.net/zjyutuf8/</a> 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.)

As a quick glance I dont see any reason why the code posted by Brian wouldnt work fine. The issue with the 5e sheet was caused by the use of the psuedo selectors (:before and :after for example) which shouldnt be rendered at all on html elements that are replaced when rendered (ie. input, img,...) as they have no content to place stuff "after" or "before" and instead are replaced with the appropriate element for rendering. In this case Firefox was the one rendering the content "correctly" and causing the "fake buttons/tabs" that the 5e sheet imposes over the radio buttons not to display when they were setup using the psuedo elelment selector on an input tag....chrome just displayed the content anyway as though the element wasnt actually one that gets replaced, even though the spec suggests it should not. The fix was to move to an additional span tag (much like Brians examples) after each input and do the work on that as it does have content instead of directly on the input tag....though this required some positioning tricks to ensure that the additional tag was imposed where the radio button was to give the "fake button/tab" like appearance. To cut a long story short though, it's basically because of the appearance I wanted on the radio buttons, and the mechanic i was using to achieve that was the problem...the actual operation of the radio elements (to hide/show sections elsewhere) worked fine throughout...so the issue that Tom is having with Brians example is likely a different one.

Alright. After taking a two week sabbatical from dickering with the character sheet, I'm back at it. I had a feeling that some of the issues I've been having were caused by legacy CSS in the old nWoD Werewolf character sheet that I used as a template. So I ripped it all out and began adding things back piecemeal one after the other. I figured at the very least, it would give me a better working understanding of what was going on under the hood. It also gave me the chance to implement the changes Brian suggested upthread. In the end, it didn't work as well as I'd hoped. Still having some of the same basic issues, so I'm going to throw the list back out here: Webfonts This worked up until about a week ago. Now I'm just getting a basic serif throughout. HTML &lt;link href=' <a href="http://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="nofollow">http://fonts.googleapis.com/css?family=IM+Fell+English+SC</a> ' rel='stylesheet' type='text/css'&gt; 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( <a href="http://themes.googleusercontent.com/static/fonts/imfellenglishsc/v3/h3Tn6yWfw4b5qaLD1RWvz9gX5f6-V0DImePmAcKHNfQ.ttf" rel="nofollow">http://themes.googleusercontent.com/static/fonts/imfellenglishsc/v3/h3Tn6yWfw4b5qaLD1RWvz9gX5f6-V0DImePmAcKHNfQ.ttf</a> ) format('truetype'); } h1, h2, h3 { font-family: 'IM Fell English SC', serif; } Tabs bar Firefox still doesn't see anything here. Firefox Every other browser tested: Here's my code: HTML &lt;!-- Sheet Tabs --&gt; &lt;input type="radio" name="attr_tab" value="1" title="Basics" checked="checked" /&gt; &lt;input type="radio" name="attr_tab" value="2" title="Skills/Talents" /&gt; &lt;input type="radio" name="attr_tab" value="3" title="Combat" /&gt; &lt;input type="radio" name="attr_tab" value="4" title="Sorcery" /&gt; &lt;input type="radio" name="attr_tab" value="5" title="Gear" /&gt; &lt;input type="radio" name="attr_tab" value="6" title="Organized Play" /&gt; &lt;br/&gt; 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*/ Thanks for the help.

Tom, Sorry for the less-than-comprehensive answer, but for the Webfonts issue, your href is pointing to a valid fonts package, but the rel (relationship attribute) is saying this is a stylesheet of type 'text/css': &lt;link href=' <a href="http://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="nofollow">http://fonts.googleapis.com/css?family=IM+Fell+English+SC</a> ' rel='stylesheet' type='text/css'&gt; It looks like that should be a reference to your css file? I could be mistaken about that. I'm still new to this. Or perhaps it's that your local src for the font is 'IM FELL English SC', but you are referencing this with lower case 'Fell' ? h1, h2, h3 { font-family: 'IM Fell English SC', serif; } 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. With respect to the tabs bar, where is the div called sheet-tab-content? That's not in your html snippet...

Dan, Yeah, I just don't get the webfont issue. I took out the html and still nothing. So I'll leave it in for now. Like I said, it worked well for over two weeks before suddenly nothing. I copy/pasted your jsFiddle example (which works) and it still doesn't work. The only thing I can think of is that something severed the link between the source and Roll20 on the server end. My tab bar html code is almost immediately after the BODY, right beneath the link to my graphic.

Webfont: if you can enter a dummy &lt;h1&gt; element in the outtermost div of your html and you can copy/paste the font-face block of your css at the very bottom of your css file and it still does not work, then I would guess that you have a bracket out of place or a comment. That messed me up pretty badly the other day. Try copy/pasting your entire css into jsFiddle and use it (or another program) to examine bracket placement and color-coding of css/comments to help deduce of that's what wrong. tab bar: Sure,there's some html there but I only see 6 radio inputs and a break. But, that can't be all of the html because your css is trying to select a class called 'sheet-tab-content' that is a div. So, where is that? Also, the radio inputs have no class name, but it looks like you are trying to select a sibling (using ~) of an input with a class name of 'sheet-tab1'. Is that supposed to be the first radio button? The selector won't work without the class name. Or, does that belong to some html that wasn't in the post I responded to? I think you need to post the whole thing, or if it's really big at least the html that is being selected by the css. If it helps, here's a cheat-sheet of selectors that I use . Sorry if I'm explaining stuff you already know.

Ah, wait… I bet I know what happened -- roll20 stripped the class names from the html elements didn't it? Yikes, it did that to me too and I forgot about it. You have to manually go back in and edit your post to put them in. I guess it's some kind of security protective thing, but it's kind of annoying.

I've just started learning how to script out character sheets and I'm trying to make a dice pool generator for Cortex system style games. Everything is going smoothly so far, but what I'd really like to add to it is a button that will 'reset' several named attributes at once so all my selection boxes don't have to be cleared then checked again each time a person rolls. Any suggestions?

Unfortunately, actually clearing the value is not possible. On the Exalted sheet, I've got a checkbox that gives the appearance of clearing my radio buttons (since you can't unselect a radio button group), but the value doesn't actually change.

Cycling Button 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. First, set all of the radio inputs to some baseline z-index Set the first radio input of the group to a z-index higher than the rest. For each input, when it is checked, set the z-index of the next input to something higher than the first input. You don't need to do anything for when the last input 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 : &lt;div class="sheet-damage-box"&gt; &lt;input type="radio" class="sheet-damage-box sheet-no-damage" name="attr_damage-box" value="0" checked="checked" /&gt; &lt;input type="radio" class="sheet-damage-box sheet-bashing-damage" name="attr_damage-box" value="1" /&gt; &lt;input type="radio" class="sheet-damage-box sheet-lethal-damage" name="attr_damage-box" value="2" /&gt; &lt;input type="radio" class="sheet-damage-box sheet-aggravated-damage" name="attr_damage-box" value="3" /&gt; &lt;span class="sheet-damage-box sheet-no-damage"&gt;☐ (no damage)&lt;/span&gt; &lt;span class="sheet-damage-box sheet-bashing-damage"&gt;&amp;nbsp;∕&amp;nbsp; (bashing damage)&lt;/span&gt; &lt;span class="sheet-damage-box sheet-lethal-damage"&gt;☓ (lethal damage)&lt;/span&gt; &lt;span class="sheet-damage-box sheet-aggravated-damage"&gt;✱ (aggravated damage)&lt;/span&gt; &lt;/div&gt; 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.

I'm trying to find a way to map a set of numbers to a different set. The input values are chosen using a &lt;select&gt; tag and I want to map each one to a different value using some math function(s) or some other kind of wizardry. The input and output mapping looks like this: 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 So, f(-4)=15 for some function, f() that I'm trying to figure out. I've struggled with this for a few hours, but I can't seem to find a mathematical way of doing it using what is available. I'm hoping it might be possible by taking the value of the select (the Input above) and using that to choose another value in a hidden select element elsewhere?? Something like this: &lt;select name="attr_size"&gt; &lt;option value="16"&gt;Nuisance&lt;/option&gt; &lt;option value="8"&gt;Fine&lt;/option&gt; &lt;option value="4"&gt;Diminutive&lt;/option&gt; &lt;option value="2"&gt;Tiny&lt;/option&gt; &lt;option value="1"&gt;Small&lt;/option&gt; &lt;option value="0" selected="selected"&gt;Medium&lt;/option&gt; &lt;option value="-1"&gt;Large&lt;/option&gt; &lt;option value="-2"&gt;Huge&lt;/option&gt; &lt;option value="-4"&gt;Gargantuan&lt;/option&gt; &lt;option value="-8"&gt;Colossal&lt;/option&gt; &lt;option value="-16"&gt;Enormous&lt;/option&gt; &lt;option value="-32"&gt;Vast&lt;/option&gt; &lt;/select&gt; &lt;select disabled="true" name="attr_str_adjust"&gt; &lt;option value="-10"&gt;@{size}=16&lt;/option&gt; &lt;option value="-8"&gt;@{size}=8&lt;/option&gt; &lt;option value="-6"&gt;@{size}=4&lt;/option&gt; &lt;option value="-4"&gt;@{size}=2&lt;/option&gt; &lt;option value="-2"&gt;@{size}=1&lt;/option&gt; &lt;option value="0"&gt;@{size}=0&lt;/option&gt; &lt;option value="5"&gt;@{size}=-1&lt;/option&gt; &lt;option value="10"&gt;@{size}=-2&lt;/option&gt; &lt;option value="15"&gt;@{size}=-4&lt;/option&gt; &lt;option value="20"&gt;@{size}=-8&lt;/option&gt; &lt;option value="25"&gt;@{size}=-16&lt;/option&gt; &lt;option value="30"&gt;@{size}=-32&lt;/option&gt; &lt;/select&gt; Or possibly disabling all values in the second select except the one desired based on the option chosen in the first select ?? The closest thing I've found is this: <a href="http://stackoverflow.com/questions/3245967/can-an-" rel="nofollow">http://stackoverflow.com/questions/3245967/can-an-</a>... but I don't know how to make use if that... :-(

Is @{size} used for anything beyond @{str_adjust}? Because it would be easier to calculate with a linear progression: &lt;select name="attr_size"&gt; &lt;option value="1"&gt;Nuisance&lt;/option&gt; &lt;option value="2"&gt;Fine&lt;/option&gt; &lt;option value="3"&gt;Diminutive&lt;/option&gt; &lt;option value="4"&gt;Tiny&lt;/option&gt; &lt;option value="5"&gt;Small&lt;/option&gt; &lt;option value="6" selected="selected"&gt;Medium&lt;/option&gt; &lt;option value="7"&gt;Large&lt;/option&gt; &lt;option value="8"&gt;Huge&lt;/option&gt; &lt;option value="9"&gt;Gargantuan&lt;/option&gt; &lt;option value="10"&gt;Colossal&lt;/option&gt; &lt;option value="11"&gt;Enormous&lt;/option&gt; &lt;option value="12"&gt;Vast&lt;/option&gt; &lt;/select&gt; &lt;input type="hidden" disabled="disabled" name="attr_size_p2" value="(@{size} * @{size})" /&gt; &lt;input type="hidden" disabled="disabled" name="attr_size_p3" value="(@{size_p2} * @{size})" /&gt; &lt;input type="hidden" disabled="disabled" name="attr_size_p4" value="(@{size_p2} * @{size_p2})" /&gt; &lt;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)" /&gt; 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.)

Thanks Brian, I used a linear progression centered around zero and a pair of functions; a quartic fit like yours above and a 5th order polynomial for the other output. It worked for every value except in the calculation of modified strength for encumbrance for Enormous characters (resulted in 26 vice 25). Somehow, I think I can live with that ! :-) Btw, not sure it matters to anyone, but as I was working on this I thought about using the clz function at one point. It didn't seem to work and gave surprising results. I traced the problem to it's reliance on the log1p(x) function. The Taylor Series approximation that function uses is only good in the range (-1,1). I think a better approximation might be this Pade one: x - x²(12 + x)/(24+18x), from here . I graphed the 3, comparing log(1+x), the Taylor Series, and this Pade approximation. It looked to be reasonable in the range (-1,8).

I'm having trouble getting an element to position where I want. I'm using a checkbox to control opacity/visibility of elements in a table row. The checkbox is supposed to appear as an element (the first) in the row, but it can't actually be there and control the other elements visibility. So, it's outside the table and I'm faking it by using relative positioning. Everything 'works', except that the different browsers choose to render things so differently. I can make it look decent for Chrome/Firefox, but then it's off by too much for Safari/Opera. Are there any browser-specific hacks that I can use to position the checkbox for one browser (or set of browsers) that won't affect the other so that I can get a cross-platform solution? I've tried some of the suggestions from here, but none have worked: <a href="http://webdevwonders.com/list-of-css-hacks/" rel="nofollow">http://webdevwonders.com/list-of-css-hacks/</a>. Perhaps I didn't do them right? Does anyone have any suggestions (including give up -- it's a fools errand) ?

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 &lt; 9 */ } input[type=checkbox].visibility-check { /* Style for everything else */ }

Is there a way to add a bit of text above a fieldset? For example, I'd like to have the following text just above the | +Add | Modify | buttons: 'Click +Add to purchase a title of Renown' Alternatively, is there a way to add a title attribute to the fieldset, possibly using some css styling on repcontro or repcontainer l?

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.

I don't think we can style the repcontrol and repcontainer elements, as their class names don't begin with the sheet- prefix. That said, since they are adjacent siblings to fieldset you might be able to get them with fieldset + div

You can style them. The sheet- prefix is added to any classes which you put into the HTML. The .charsheet class is prepended to all of your selectors (to prevent you from styling the rest of the tabletop); the only reason you use sheet- on your class selectors in the CSS is because it's being inserted into your HTML. However, if you add other selectors in your CSS (such as repcontrol and repcontainer), those selectors will be followed appropriately.

Tom said: Tabs bar Firefox still doesn't see anything here. Same issue for me ! And the initial jsfiddle : ( <a href="http://jsfiddle.net/vdwLU/" rel="nofollow">http://jsfiddle.net/vdwLU/</a> ) doesn't work too ! i found that ::before doesn't work in firefox for inputs ! source : <a href="http://stackoverflow.com/questions/18610133/css3-r" rel="nofollow">http://stackoverflow.com/questions/18610133/css3-r</a>... So i think Brian's code can't work on firefox !? I found another way : <a href="http://jsfiddle.net/2QxN9/" rel="nofollow">http://jsfiddle.net/2QxN9/</a> <a href="https://app.roll20.net/forum/post/889534/using-the-radio-buttons-for-alternate-sheet-pages#post-920617" rel="nofollow">https://app.roll20.net/forum/post/889534/using-the-radio-buttons-for-alternate-sheet-pages#post-920617</a> with brian help too ! Brian, as you seems to be a css master, can you help us ? Does your code above works for firefox any way ? Otherwise, which one is the best for firefox ?

tontione said: Tom said: Tabs bar Firefox still doesn't see anything here. Same issue for me ! And the initial jsfiddle : ( <a href="http://jsfiddle.net/vdwLU/" rel="nofollow">http://jsfiddle.net/vdwLU/</a> ) doesn't work too ! i found that ::before doesn't work in firefox for inputs ! source : <a href="http://stackoverflow.com/questions/18610133/css3-r" rel="nofollow">http://stackoverflow.com/questions/18610133/css3-r</a>... 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: <a href="http://jsfiddle.net/z866duoa/" rel="nofollow">http://jsfiddle.net/z866duoa/</a>

It works ! Thanks again. :)

Well what do you know? I've been pestering Brian for months to get a solution to that. Then along comes tontione and viola! Fixed. Well, it did take a bit of work to get everything to line up, but its done now. Looks like I no longer have an excuse not to upgrade my sheet. Thanks Brian. Tontione, if you're ever in Dallas, I owe you a beer.

Is there a way to remove the d20 image from the roll buttons? I'd like to start with a clean slate for the buttons, but can't seem to get rid of that d20... :-/

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.

Fabulous! Thank you. I was close, I had the content part, just wasn't applying it to ::before. :)

So, I suspect what I want to do isn't possible, but if someone else knows how to do it please tell me. What I want to do is use a select or something that looks like a select to pick an option and have it set more than one attribute. The first place I would use it is to set MWK/enhancement for attack and damage as 1 option. I realize you can use a checkbox for MWK and just not add it to damage, but then you have to use the max formula to only use the MWK or the enhancement for attack. I was looking for a more...elegant? compact? solution than having a checkbox and a select/number input for these things.

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.

I'm not sure to understand what you want, but perhaps i did something like this. My intent was to apply different bonus depending on one option selected. In my case (pendragon sheet) : religion, select list : if pagan =&gt; healing rate +2 if roman christian : Health Points +2 if britain christian : Health points +3 AND Damage +2 Is it similar to what you're looking for ?

@Tontione Thanks for the suggestion. I took a look at your sheet html and I think I understand what you did there. I might be able to rework that to do what I want, but it certainly isn't as simple as I was hoping for.....Why does it always have to be so hard to make things do stuff completely different from what they were intended to do? ;)

Happy if it can help. Don't hesitate to ask questions about my code if needed. :)

@Brian Using your 'Hiding' code and the help you gave other folks here, I got some hiding blocks on my sheet (which, I think, is actually Chad H.'s sheet I copied and modified). This is awesome. Thanks!

I've figured out a way to toggle the background-image on and off for my character sheet. Is it possible to modify html elements in a similar fashion? For example, I have my &lt;h2&gt; tags styled with a background color and text color and I would like alter those colors depending on which background image is being used. Is there a way to do that with CSS, or would it require javascript to do that?

You can't change the style on your &lt;h2&gt; based on the presence of the background image, specifically, but you could change the style based on the same toggle that you're using to change the background.

D'oh! It's always the obvious that I overlook. :-/ Thanks Brian, that helps.

Wow. Just a big ol' thanks to one and all contributing here. Amazing stuff.

I would just like to quickly thank everyone who added things here. It is/was most useful in creating my One Piece D20 Character Sheet from scratch. I know its been over a month since anyone posted, but I am so grateful for it I felt the need to thank everyone here anyway.

Trying to wrap my head around getting into coding, while this hasn't "helped" me improve (it is still greek to me) I wanted to thank the contributors for the inspiration to invest in this skill ^_^

How does one use Brian 's math stuff? For example, if I want to use 1/3 of "endurance", rounded down to the nearest whole number, what would it look like? Would I need to put in a hidden block somewhere, or could I simple put: value="floor(@{endurance}/3)" ? Same with the minimum. Melee damage is Strength minus 5 (minimum 0)...I don't even know where toe guess on that.

John, For the floor thing, that's exactly how I did it and it works without a problem. As for the other (without knowing the formula involved), I would handle that by having the value of @{meleeDamage} be whatever it should be, but then do a kh1 type of thing. So, if the damage 1d20-5, then the formula could look something like: [[{1d20-@{meleeDamage},1d0}kh1]] I may have the kh1 syntax a little wrong, but I think it's right.

Thanks! The floor worked prefectly, and I am very pleased with the result. The keep-highest option would work (and quite elegantly, I might add), if this was part of a roll. But its suppose to be a static attribute other items are to draw from. Barring a better option, I'm going to use it when I add the roll buttons.