CSS Wizardry

Of course!  Thank you, that was my issue.

It is presently impossible to fetch the player's Avatar, Token Image, Gravatar, or Chat image using the character sheets correct?

Encartrus said: It is presently impossible to fetch the player's Avatar, Token Image, Gravatar, or Chat image using the character sheets correct? I would say not possible.  I believe those objects are only accessible using API. You could include API commands in your sheet macros that could display the images in chat, but it sounds like you want to use them within the sheet..?

Yeah, I'm wanting to make the header image options in my derivative of your sheet to be {Token} in addition to the default and custom ones you have triggering. I could source link the token each time, but for NPCs that would be horribly tedious.

I googled "css use calc instead of media" and found this article. This looks pretty awesome, i have not tried it yet I just found it now: Since we can't use @media in our sheets, this may be a good workaround to make nicer looking pages: <a href="https://medium.freecodecamp.com/the-fab-four-techn" rel="nofollow">https://medium.freecodecamp.com/the-fab-four-techn</a>...

While neat, what's your use-case for trying it in Roll20? While Plus users (and players of plus GMs) can technically load the VTT on their phone, I seriously doubt anyone doing that is actually trying to use a character sheet in that configuration. At best they're using the chat.

Our sheet is basically a bunch of blocks, some are side by side already and some span the full width of the page. It would be nice to have some of the stacked blocks move to side by side when the sheet is wide enough, instead of just expanding farther and farther. While that is possible now it just doesn't look that great. Most of my players play on 2 screens, one for the map and put the sheet and PRD up on the other. I only have a laptop to play on so I have a pretty small screen (1366x768), and also I am the GM, so I have too much on my screen and try to shrink it down. I narrow the width of the sheets when I GM, currently when I do that the side by side blocks move down and under each other. they are just not as attractive as they could be

Is there any way at all to include custom fonts in a character sheet or no? I've tried several methods of using fonts from the google font library, but none of them seem to work. I have one more method I have yet to try, but it's a pain in the butt so I thought I'd ask you guys first. (Baking the font directly into the CSS in base64.) Does roll20 really not support google fonts / @fontface? Solved thanks to this thread:&nbsp; <a href="https://app.roll20.net/forum/post/1573359/slug%7D" rel="nofollow">https://app.roll20.net/forum/post/1573359/slug%7D</a> Though I will bake the font so it works without having to do this. EDIT: It appears that attempting to bake the font into the character sheet breaks all the css completely. I hope roll20 fixes this or adds a better way to put fonts on your sheets. :/

@font-face works. However, for remote fonts (src: url(...)) the browser will encounter a security conflict and the user will have to manually allow the content. The page will reload with the remote font available to the user until they close that browser tab, at which point they'll have to manually re-allow it the next time. Note that you can also specify a local version of the font with @font-face (src: local(...)), which you can use to load the font from the user's computer if they have it installed, and skip the permission-granting process entirely. Here's the @font-face used on my Ex3 sheet: @font-face { font-family: Cimiez; src: local('Cimiez Roman PDF.ttf'), url(<a href="http://lithl.info/cimiez.ttf" rel="nofollow">http://lithl.info/cimiez.ttf</a>) format('truetype'); } As you can see, the sheet will attempt to load the font installed on the user's computer under the name "Cimiez Roman PDF.ttf". Only if that doesn't work, then &nbsp;it will try to load the font from lithl.info. If the user has the correct font installed, it will render on the sheet properly, although the "Load unsafe scripts" shield button will still be present in the address bar. (Screenshot from Chrome, although other browsers should have something similar.) Do not attempt to base64 encode your font. Any base64-encoded data in your CSS (a 'data url') will cause the entirety of your CSS to be thrown out by the VTT's security code.

Yeah, I know *how* to get around it browser-side, but it's really freakin annoying nonetheless, especially since the default browser fonts all suck. Please roll20, let us upload fonts to you servers so we don't have to deal with this crap.

I don't know who discovered/invented/stole this first, but tzizimine was the latest. Removing standard d20 from roll buttons If the button class is "sheet-nod20"... button.sheet-nod20:before { content: "" !important; } You might want to set the height and width, or add a different image while you do this. &nbsp;Alone, this will reduce the size of the button dramaticaly.&nbsp;

Swyrl said: Yeah, I know *how* to get around it browser-side, but it's really freakin annoying nonetheless, especially since the default browser fonts all suck.&nbsp; Here they talk about the Roll20 fonts. &nbsp;

Coal Powered Puppet said: Swyrl said: Yeah, I know *how* to get around it browser-side, but it's really freakin annoying nonetheless, especially since the default browser fonts all suck.&nbsp; Here they talk about the Roll20 fonts. &nbsp; And&nbsp; here's a suggestion you can support to allow external fonts in Roll20...

Something I just figured out the other day: Roll20 has tons of css connected directly to the elements in their app.css and base.css, right on label, button[type="roll"], input[type="checkbox", select, etc. That was the reason we had had to repeat those elements over and over in our css, instead of only using classes.&nbsp; So we have a checkbox &lt;input type="checkbox" class="sheet-sect-show" ... /&gt; &nbsp;we could only reference it with input[type="checkbox"].sheet-sect-show if we were changing one of the attributes that is set in app.css or base.css.&nbsp; That caused a lot of css to be repeated &nbsp;especially if there were 2 or 3 levels of nesting, because we needed a different version of the selector for each type of input that was affected. &nbsp;Yes we (or someone) had overwritten a lot, and we had our own "label", "span", "select" attributes set, but this still presented the same problem. To override those we still needed to use both the element and class in the selector. Yesterday I finally decided to set a few of those attributes to "initial" on the elements, and magically my css has gotten cleaner!&nbsp; I have only spent a few hours testing, but I've been able to eliminate tons of css and element references from our css file. At the top of our css file we now have this, which I built by inspecting odd things on the page and found the setting in app.css and base.css, and whatever attributes those were, reset them to initial, or if they had .ui-dialog in front. After doing that, i can reference those portions of the DOM using only the class, and don't need a whole bunch of other things in the selectors. So right now the top of my css looks like this: label { margin-bottom:initial; padding-right:initial; width:initial; font-size:inherit; line-height:1em; display:inline; } select { width:initial; } button[type="roll"] { margin-left:initial; margin-right:initial; } Obviously a few things on label I set myself still. I've only just begun. But now every single instance of&nbsp; input[type="checkbox"] label is gone from our css except for the reset to initial on top. I'm still working on textarea, div, select, etc. But this finally lets me have very simple selectors. And I could even remove some of the ^=s and :not()s as well Hopefully this will help speed up the sheet. It sure makes it easier to read.

Hi ! I think that my problem is very easy to solve, but I'm just llike a turkey typing on my keyboard xD I'm just trying to create my classes, but it don't work, and I can't find why... :/ &lt;!-- STYLE CSS --&gt; &nbsp;&nbsp; &nbsp;&lt;style&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sheet-p1 {color:white; text-align:center; font-size:250%} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sheet-p2 {color:white; text-align:center; font-size:175%} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sheet-p3 {color:white; text-align:center; font-size:150%} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sheet-td1 {background-color:#000000; border:1.0pt solid #000000} &nbsp;&nbsp; &nbsp;&lt;/style&gt; &nbsp;&nbsp; &nbsp; &lt;!-- FICHE PERSONNAGE --&gt; &nbsp;&nbsp; &nbsp;&lt;table cellpadding=2px cellspacing=-2px width=800 style='border-collapse:collapse; table-layout:fixed; width:800pt'&gt; &nbsp;&nbsp; &nbsp; &lt;!-- CARACTERISTIQUES GÉNÉRALES --&gt;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td colspan=47 rowspan=2 class='sheet-td1'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p class='sheet-p1'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;b&gt;Titre 1&lt;/b&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/td&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td colspan=47 rowspan=2 class='sheet-td1'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p class='sheet-p2'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;b&gt;Titre 2&lt;/b&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/td&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td colspan=47 rowspan=2 class='sheet-td1'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p class='sheet-p3'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;b&gt;Texte&lt;/b&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/td&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&lt;/table&gt; &nbsp;&nbsp;&nbsp;

Place your css in a separate txt file and upload (copy/paste) it to the css tab in the sheet editor. &nbsp;You can include inline style within an html element as well. &nbsp;Cheers

@Vince Thanks for your time ! Should I format it like that ? HTML : &lt;!-- FICHE PERSONNAGE --&gt; &nbsp;&nbsp; &nbsp;&lt;table cellpadding=2px cellspacing=-2px width=800 style='border-collapse:collapse; table-layout:fixed; width:800pt'&gt; &nbsp;&nbsp; &nbsp; &lt;!-- CARACTERISTIQUES GÉNÉRALES --&gt;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td colspan=47 rowspan=2 class='sheet-td1'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p class='sheet-p1'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;b&gt;Titre 1&lt;/b&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/td&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td colspan=47 rowspan=2 class='sheet-td1'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p class='sheet-p2'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;b&gt;Titre 2&lt;/b&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/td&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td colspan=47 rowspan=2 class='sheet-td1'&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p class='sheet-p3'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;b&gt;Texte&lt;/b&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/td&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&lt;/table&gt; CSS : &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sheet-p1 {color:white; text-align:center; font-size:250%} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sheet-p2 {color:white; text-align:center; font-size:175%} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sheet-p3 {color:white; text-align:center; font-size:150%} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sheet-td1 {background-color:#000000; border:1.0pt solid #000000}

That should work. &nbsp;You have the idea. &nbsp;There are lot's of methods for applying formatting with css. &nbsp;Studying(tutorials, other's code, etc.), experimentation(use the browser's inspect element feature often and tweak the css to see what happens), and practice. &nbsp; I would add a closing " ; " at the end of your style elements.&nbsp; Have fun. Cheers

2t?

Is it possible to add images to the dropdown list of a &lt;select&gt; element? &nbsp;I was able to style the text only in a quick test. &nbsp;Thanks

Vince said: Is it possible to add images to the dropdown list of a &lt;select&gt; element? No, that's not possible with an actual &lt;select&gt;. You could fake it with styled radio buttons, though (I believe the Firefly sheet does something like this to select a die size).

Hey there. I'm trying to make a repeating section in which new elements appear side by side (like in the spells section of the D&D 5e Shaped sheet), instead of under one another. Is there a more or less simple way of doing this?&nbsp;

You can wrap your filedsets within a couple of divs and use float:left. example; &lt;!--HTML--&gt; &lt;div class="sheet-wrapper"&gt; &nbsp; &lt;div class="sheet-left-div"&gt; &nbsp; &nbsp; Enter 1st &nbsp;Fieldset here &nbsp; &lt;/div&gt; &nbsp; &lt;div class="sheet-right-div"&gt; &nbsp; &nbsp; Enter 2nd Fieldset here &nbsp; &lt;/div&gt; &lt;/div&gt; &lt;!--CSS--&gt; .sheet-wrapper { &nbsp; &nbsp; width:100%; } .sheet-left-div { &nbsp; &nbsp; float: left; &nbsp; &nbsp; width:50%; &nbsp; &nbsp; background-color: red; } .sheet-right-div { &nbsp; &nbsp; background-color: green; }

Letícia said: Hey there. I'm trying to make a repeating section in which new elements appear side by side (like in the spells section of the D&D 5e Shaped sheet), instead of under one another. Is there a more or less simple way of doing this?&nbsp; Brian covered this here:&nbsp; Styling Your Repeating Sections

Is there a way to change the cursor for the repeating fields' move button? I tried this, but didn't work. .charsheet .repcontrol_move { &nbsp; &nbsp; cursor: url(<a href="http://i.imgur.com/kw6l5Mk.png" rel="nofollow">http://i.imgur.com/kw6l5Mk.png</a>) 24 24, auto; }

Havoc said: Is there a way to change the cursor for the repeating fields' move button? I tried this, but didn't work. .charsheet .repcontrol_move { &nbsp; &nbsp; cursor: url(<a href="http://i.imgur.com/kw6l5Mk.png" rel="nofollow">http://i.imgur.com/kw6l5Mk.png</a>) 24 24, auto; } Your rule is being overridden by the built-in one because the built-in one has higher specificity on the selector. You have two solutions: Either make the rule important ( cursor: ... !important; ), or else get specificity on your selector that's equal to or higher than the built-in one. Copying the built-in selector is sufficient to match it, so you can use&nbsp; .repitem .itemcontrol .repcontrol_move as your selector and you should be fine.

" Specificity " - throw this word around at dinner parties and everyone will know , &nbsp; you are a nerd. &nbsp;;-)

Brian said: Havoc said: Is there a way to change the cursor for the repeating fields' move button? I tried this, but didn't work. .charsheet .repcontrol_move { &nbsp; &nbsp; cursor: url(<a href="http://i.imgur.com/kw6l5Mk.png" rel="nofollow">http://i.imgur.com/kw6l5Mk.png</a>) 24 24, auto; } Your rule is being overridden by the built-in one because the built-in one has higher specificity on the selector. You have two solutions: Either make the rule important ( cursor: ... !important; ), or else get specificity on your selector that's equal to or higher than the built-in one. Copying the built-in selector is sufficient to match it, so you can use&nbsp; .repitem .itemcontrol .repcontrol_move as your selector and you should be fine. .repitem .itemcontrol .repcontrol_move { &nbsp; &nbsp; cursor: url(<a href="http://i.imgur.com/kw6l5Mk.png" rel="nofollow">http://i.imgur.com/kw6l5Mk.png</a>) 24 24, auto; } This didn't work, but !important worked. Thanks!

specificity kills ambiguity&nbsp;

I want to see if this is possible. Let's say we have 3 or more images that should change onclick. User clicks on the image, it changes to the second, he clicks again, it changes to the third and so on. When we reached the last one, it should reset to the first one. Image A -&gt; Image B -&gt; Image C -&gt; ... -&gt; Image A

yes you can have something like that: <a href="https://app.roll20.net/forum/post/882997/css-wizar" rel="nofollow">https://app.roll20.net/forum/post/882997/css-wizar</a>... i found that when I wrote this: <a href="https://app.roll20.net/forum/post/3769728/slug%7D" rel="nofollow">https://app.roll20.net/forum/post/3769728/slug%7D</a>

Yup. As I posted in Chris' second link, you can see an example of it in action on the Exalted 3e sheet.

Thanks for the help!

Learned how to create an auto-expanding text field today only via css. Allows us to fit more fields in less space, but no data is hidden since the field expands. here is the article I found it in&nbsp; <a href="http://www.brianchu.com/blog/2013/11/02/creating-an-auto-growing-text-input/" rel="nofollow">http://www.brianchu.com/blog/2013/11/02/creating-an-auto-growing-text-input/</a> here is how I implemented it: here is a video of it working:&nbsp; <a href="http://www.youtube.com/watch?v=NTvBvhkSA0g" rel="nofollow">http://www.youtube.com/watch?v=NTvBvhkSA0g</a> below are the fields. the label wraps each field. Each has 3 sub elements: input &nbsp;(the input, obviously) span the label that appears underneath the input field span .sheet-autoexpand : the hidden field that forces the label to expand after you update the input field &lt;label class="sheet-small-label2 sheet-autoexpand"&gt; &lt;input title="@{height}" type="text" name="attr_height" /&gt; &lt;span data-i18n="height"&gt;Height&lt;/span&gt; &lt;span name="attr_height" class="sheet-autoexpand"&gt; &lt;/label&gt; The css that makes it work: .sheet-small-label2 { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; height: 3em; &nbsp; &nbsp; min-height: 3em; &nbsp; &nbsp; position: relative; } .sheet-small-label2 span:not(.sheet-autoexpand) { display:block; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; bottom: 0px; } /* generic fields */ .sheet-small-label2 &gt; input, .sheet-small-label2 &gt; select { display:block; } .sheet-small-label2.sheet-autoexpand { padding-top:2em ; width:auto; min-width:4em; } .sheet-small-label2.sheet-autoexpand input[type="text"].sheet-autoexpand { position:absolute; overflow:hidden; height:1.5em; top:.3em; } .sheet-small-label2.sheet-autoexpand span.sheet-autoexpand { visibility:hidden; width:100%; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:break-word; display:block; }

+1000 Chris. &nbsp;Very cool.

I noticed that no one was using Apocalypse World style clocks. So I looked up a pure css technique to fill in circles. Here's an implementation of AW style clocks. <a href="https://jsfiddle.net/v9ee7mwd/" rel="nofollow">https://jsfiddle.net/v9ee7mwd/</a> (Also, I'm hoping to push my Ghost Lines character sheet up soon. That's why I needed the clocks.)

plexsoup said: I noticed that no one was using Apocalypse World style clocks. So I looked up a pure css technique to fill in circles. Here's an implementation of AW style clocks. <a href="https://jsfiddle.net/v9ee7mwd/" rel="nofollow">https://jsfiddle.net/v9ee7mwd/</a> (Also, I'm hoping to push my Ghost Lines character sheet up soon. That's why I needed the clocks.) Got no use for this right now, but it's great! Thanks.

On Dec 2nd, Chris B posted a CSS wizardry above for a lovely trick of auto-expanding text fields that grow when you type text into them.&nbsp; I had a hard time getting them to work, mostly due to some dubious practices of what I was doing with my sheet. When I added Chris B's code above to my sheet it did not display correctly. Chris B was kind enough to help me through my problems. I am going to post the version of the code that I ended up with. in case anybody else has similar problems. &nbsp; Here is some sample html for when you want the label in front of the text field &nbsp; &nbsp; &lt;label title="@{Height}: &nbsp; Characters Height."&gt;Height:&nbsp; &lt;span class="sheet-autoexpand-wrap"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input name="attr_Height" type="text" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_Height" class="sheet-autoexpand" &gt;&lt;/span&gt; &nbsp; &nbsp; &lt;/span&gt;&lt;/label&gt; Here is some sample html for when you want the label underneath&nbsp; &nbsp; &nbsp; &lt;label class="sheet-label-under2 sheet-autoexpand-wrap"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_SP_Range" title="Range spell can be cast" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_SP_Range" class="sheet-autoexpand"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;Range&lt;/span&gt; &nbsp; &nbsp; &lt;/label&gt; Note: that in both cases, the actual input tag is contained directly inside a label or span with the class sheet-autoexpand-wrap.&nbsp; The wrap also contains a span with the same name as the input tag. In the case where the label is underneath the text field, the label goes in a span within the wrap as well.&nbsp; As you have probably noticed, by default labels in roll20 are large, red and bold. You probably ought to have code in your css normalizing them. label { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; font-size: inherit; &nbsp; &nbsp; line-height: 1em; &nbsp; &nbsp; margin-bottom: initial; &nbsp; &nbsp; padding-right: initial; &nbsp; &nbsp; width: initial; &nbsp; &nbsp; color: initial; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; height: auto; &nbsp; &nbsp; font-weight: normal; } You can adjust this to suit your own tastes (for example you might want your font-weight to default to ether lighter or bold), but the only important thing for this trick is that it must have "display: inline-block" for this trick to work. &nbsp; &nbsp; &nbsp; &nbsp; /* Note: This is the tag that wraps the entire thing. It can be a label or a span */ .sheet-autoexpand-wrap { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; width: auto; &nbsp; &nbsp; min-width: 2em; &nbsp; &nbsp; margin-right: 1em; &nbsp; &nbsp; white-space: nowrap; } .sheet-autoexpand-wrap:not(.sheet-label-under2) { &nbsp; &nbsp; height: &nbsp; &nbsp; 2em; &nbsp; &nbsp; vertical-align: middle; } .sheet-label-under2 { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; height: &nbsp; &nbsp; 2.75em; &nbsp; &nbsp; vertical-align: top; } Again, it is very important that sheet-autoexpand-wrap have "display: inline-block; &nbsp; width:auto; &nbsp;white-space: nowrap;". I think "position: relative;" might be important also. Everything else can be adjusted to fit your individual style. &nbsp; &nbsp; &nbsp; &nbsp; /* Note: This is the input statement that is visible. */ .sheet-autoexpand-wrap input { &nbsp; &nbsp; display: block; &nbsp; &nbsp; overflow: hidden; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; white-space: normal; } &nbsp; &nbsp; &nbsp; &nbsp; /* Note: This is the invisible copy of the input. This css changes this invisible fields size to the length of the text in the input. The outer wrapper then changes size to match this fields length. &nbsp;*/ .sheet-autoexpand-wrap span.sheet-autoexpand { &nbsp; &nbsp; visibility: hidden; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; white-space: pre; &nbsp;/* pre-wrap; for textarea which i never got working but "pre" should also work for spans */ &nbsp; &nbsp; word-wrap: break-word; &nbsp; &nbsp; overflow-wrap: break-word; &nbsp; &nbsp; overflow: hidden; &nbsp; &nbsp; padding-right: .7em; &nbsp; /* We want the text box very slightly bigger than the text. */ /* also here make sure the font size is the same or slightly bigger than the input font size */ } &nbsp; &nbsp; &nbsp; &nbsp; /* Note: This is the span that holds the label that we want small at the bottom. */ .sheet-label-under2 span:not(.sheet-autoexpand) { &nbsp; &nbsp; display: block; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; bottom: 0px; &nbsp; &nbsp; line-height: .75em; &nbsp; &nbsp; font-size: 85%; &nbsp; &nbsp; padding-left: .25em; } &nbsp;It is very important that everything inside the sheet-autoexpand-wrap be "display: block;" since we want them to line up one under another. The heart of this trick is that&nbsp;span.sheet-autoexpand is hidden, but both that span and the input are set to width 100%, while&nbsp;sheet-autoexpand-wrap is set to width: auto; When you add or remove text from the input box, the invisible field of the same name inside the same wrap changes its size. The wrap then expands to the length of the invisible field, and the input box then expands to the length of the wrap. The input box is always exactly big enough to hold the text you typed into it. If the wrap also holds a label, it needs to be positioned absolute at the bottom of the wrap. So anyway, this css should work "as is" out of the box. You can modify it to look how you prefer, but if doing so could break the whole trick unless you are careful.&nbsp;

I've greatly simplified the above auto-expanding sheet:&nbsp; <a href="https://jsfiddle.net/wfabcwk9/2/" rel="nofollow">https://jsfiddle.net/wfabcwk9/2/</a> To make it fully work with my sheet I use the following: .sheet-auto-expand-wrap { display: inline-block; position: relative; input, select, textarea { left: 0; //sometimes the input wasn't aligned left position: absolute; } } .sheet-auto-expand-text { display: block; min-height: 1em; min-width: .7rem; padding: 0 2px; //inputs have padding: 0 1px; selects have some inherent padding that can't be removed visibility: hidden; white-space: pre-line; }

Kryx said: I've greatly simplified the above auto-expanding sheet:&nbsp; <a href="https://jsfiddle.net/wfabcwk9/2/" rel="nofollow">https://jsfiddle.net/wfabcwk9/2/</a> It doesn't seem to work. Am I missing something? There's a little input with "111" inside, where I input more charaters but it keeps the same size. (On windows, chrome 55 64 bits).

Do those auto-expanding fields work with textareas, or just inputs? I would like a textarea that has a fixed width, but grows vertically as more lines of text are added.

I'm having a weird problem with the Hide Areas technique mentioned earlier in the thread. I've used it successfully in several places on my character sheet, but there's one that I cant get to work and I'm not sure if I'm messing up the syntax somehow. It looks like I am using it identically to the others. So, there's a button on my sheet that I want hidden, and only visible when a checkbox (houserule-dexhorse) is checked. Here's the html for the button, and the checkbox, and the CSS I use to hide it and then make visible. &lt;input type="checkbox" class="sheet-houserule_DH" name="attr_houserule_DEXHorse"/&gt; &lt;!-- two versions of the button I've tried --&gt; &lt;button &nbsp;type='roll' name='roll_HorseKB' value='(trimmed for space)'&gt;&lt;/button&gt; &lt;div class="sheet-houserule_DEXHorse" &gt; &lt;button &nbsp;type='roll' name='roll_HorseKB' value='(trimmed for space)'&gt;&lt;/button&gt; &lt;/div&gt; I've tried several forms of the CSS, two are below. Hiding the button works, it's getting it to reappear when the box is checked that fails. .sheet-houserule_DEXHorse { display:none;&nbsp; } /* Toggled State */ input.sheet-houserule_DH:checked ~ div.sheet-houserule_DEXHorse { &nbsp; &nbsp;display:inline !important; } input[name="attr_houserule_DEXHorse"]:checked ~ .sheet-houserule_DEXHorse { &nbsp; &nbsp;display:inline !important; } The important is only there out of desperation, but it doesn't work either. This technique works on other parts of the character sheet, but i cant get it to work here and dont understand why. What am I misisng?

Natha said: It doesn't seem to work. Am I missing something? There's a little input with "111" inside, where I input more charaters but it keeps the same size. (On windows, chrome 55 64 bits). You need to save jsFiddle for it to regenerate the output. If you don't want the characters shown you can use&nbsp; .sheet-auto-expand-text { visibility: hidden; } which I have above in my actual usage. ============================== G G said: Do those auto-expanding fields work with textareas, or just inputs? I would like a textarea that has a fixed width, but grows vertically as more lines of text are added. My next project was to experiment with those. I'm inclined to think that they may, but textareas behave quite differently to inputs so we'll see. ============================== G G said: .sheet-houserule_DEXHorse { display:none;&nbsp; } /* Toggled State */ input.sheet-houserule_DH:checked ~ div.sheet-houserule_DEXHorse { &nbsp; &nbsp;display:inline !important; } input[name="attr_houserule_DEXHorse"]:checked ~ .sheet-houserule_DEXHorse { &nbsp; &nbsp;display:inline !important; } I'd recommend using the :not functionality in css as below, then you never have to unhide it and overwrite styles: input.sheet-houserule_DH:not(:checked) ~ div.sheet-houserule_DEXHorse, input[name="attr_houserule_DEXHorse"]:not(:checked) ~ .sheet-houserule_DEXHorse { &nbsp; &nbsp;display: none; }

Thanks for the suggestion, Kryx, but that's not working forme either. I'm so stumped, I cant figure out why this specific element wont cooperate. I tried changing it to this as a test: input.sheet-hrcheck_dex:not(:checked) ~ button { &nbsp; &nbsp; display: none; } Which if i understand correctly, what this should do is: if the checkbox with class .sheet-hr-check_dex is checked, all buttons in the character sheet should be hidden. But nothing happens. So my checkbox is being ignored, as far as I can tell.

That's not what it'll do. If sheet-hrcheck_dex is NOT checked then all adjacent&nbsp; buttons will be hidden. What I typically do is set variables at the top of my html next to a div that wraps the whole sheet. I then use something like this: &lt;input type="hidden" name="attr_honor_toggle" class="toggle-honor"&gt; input.sheet-toggle-honor:not([value='1']) ~ div .sheet-honor { display: none; } // Later in the sheet &lt;input type="checkbox" name="attr_honor_toggle" value="1"&gt;

Aha, that works! i dont quite follow the CSS logic, but I can copy the code. Thanks Kryx!

I have a CSS problem relating to Hide Areas, and float:right. I found similar in the stormbringer character sheet, for showing and hiding a config area. It shows a settings cog in a span, with a hidden input. It normally appears at the left side of the sheet, but I'm trying to get it to float to the right of the sheet and by adding float:rigght to the two relevant elements, they aren't in the same space any more, they appear next to each other, not overlapping, which is a problem. How do I get the span and the checkbox to both float at the right side of the sheet, occupying the same space? The HTML: &lt;input class="sheet-HideConfig" type="checkbox" checked name="attr_is_config" /&gt; &lt;span class="sheet-is-config"&gt;&lt;span style='font-family:"Pictos";'&gt;y&lt;/span&gt;&lt;/span&gt; /* separated over 2 lines just for clarity in this window */ The CSS:&nbsp; .sheet-HideConfig:checked ~ *.sheet-config { display:none; } .charsheet span.sheet-is-config::after { /*Close Config: grayish background with black text*/ content: "^"; } .charsheet .sheet-HideConfig:checked + span.sheet-is-config::after { /*Show Configuration: Black background with grayish text*/ content: "v"; } .charsheet span.sheet-is-config { float:right; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; &nbsp; &nbsp; width: 5%; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; font-size: 9px; &nbsp; &nbsp; /*font-family: "Pictos";*/ &nbsp; &nbsp; /*background: #65763c;*/ &nbsp; &nbsp; background: black; /*#93537c;*/ color: white; /*white;*/ font-weight: bold; border-radius: 4px; margin-left: -5%; } .charsheet input.sheet-HideConfig { &nbsp; &nbsp; float:right; &nbsp; &nbsp; width: 5%; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; margin-left: auto; &nbsp; &nbsp; margin-top: auto; opacity: 0; z-index: 9999; } .charsheet .sheet-HideConfig:checked + span.sheet-is-config { &nbsp; &nbsp; background: black; &nbsp; &nbsp; border-radius: 4px; color: white; }

FYI the auto-expanding works with textareas as well.

Kryx said: FYI the auto-expanding works with textareas as well. That's great. I'll give that a try soon.