Of course! Thank you, that was my issue.
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..?Encartrus said:
It is presently impossible to fetch the player's Avatar, Token Image, Gravatar, or Chat image using the character sheets correct?
@font-face {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 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.)
font-family: Cimiez;
src: local('Cimiez Roman PDF.ttf'),
url(http://lithl.info/cimiez.ttf) format('truetype');
}
button.sheet-nod20:before { content: "" !important; }You might want to set the height and width, or add a different image while you do this. Alone, this will reduce the size of the button dramaticaly.
Coal Powered Puppet said:
Here they talk about the Roll20 fonts.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.
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; }
input[type="checkbox"] label
<!-- STYLE CSS --> <style> .sheet-p1 {color:white; text-align:center; font-size:250%} .sheet-p2 {color:white; text-align:center; font-size:175%} .sheet-p3 {color:white; text-align:center; font-size:150%} .sheet-td1 {background-color:#000000; border:1.0pt solid #000000} </style> <!-- FICHE PERSONNAGE --> <table cellpadding=2px cellspacing=-2px width=800 style='border-collapse:collapse; table-layout:fixed; width:800pt'> <!-- CARACTERISTIQUES GÉNÉRALES --> <tr> <td colspan=47 rowspan=2 class='sheet-td1'> <p class='sheet-p1'> <b>Titre 1</b> </p> </td> </tr> <tr> </tr> <tr> <td colspan=47 rowspan=2 class='sheet-td1'> <p class='sheet-p2'> <b>Titre 2</b> </p> </td> </tr> <tr> </tr> <tr> <td colspan=47 rowspan=2 class='sheet-td1'> <p class='sheet-p3'> <b>Texte</b> </p> </td> </tr> </table>
HTML : <!-- FICHE PERSONNAGE --> <table cellpadding=2px cellspacing=-2px width=800 style='border-collapse:collapse; table-layout:fixed; width:800pt'> <!-- CARACTERISTIQUES GÉNÉRALES --> <tr> <td colspan=47 rowspan=2 class='sheet-td1'> <p class='sheet-p1'> <b>Titre 1</b> </p> </td> </tr> <tr> </tr> <tr> <td colspan=47 rowspan=2 class='sheet-td1'> <p class='sheet-p2'> <b>Titre 2</b> </p> </td> </tr> <tr> </tr> <tr> <td colspan=47 rowspan=2 class='sheet-td1'> <p class='sheet-p3'> <b>Texte</b> </p> </td> </tr> </table>
CSS : .sheet-p1 {color:white; text-align:center; font-size:250%} .sheet-p2 {color:white; text-align:center; font-size:175%} .sheet-p3 {color:white; text-align:center; font-size:150%} .sheet-td1 {background-color:#000000; border:1.0pt solid #000000}
No, that's not possible with an actual <select>. You could fake it with styled radio buttons, though (I believe the Firefly sheet does something like this to select a die size).Vince said:
Is it possible to add images to the dropdown list of a <select> element?
<!--HTML--> <div class="sheet-wrapper"> <div class="sheet-left-div"> Enter 1st Fieldset here </div> <div class="sheet-right-div"> Enter 2nd Fieldset here </div> </div> <!--CSS--> .sheet-wrapper { width:100%; } .sheet-left-div { float: left; width:50%; background-color: red; } .sheet-right-div { 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?
.charsheet .repcontrol_move { cursor: url(http://i.imgur.com/kw6l5Mk.png) 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 .repitem .itemcontrol .repcontrol_move as your selector and you should be fine.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 { cursor: url(http://i.imgur.com/kw6l5Mk.png) 24 24, auto; }
Brian said:
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 .repitem .itemcontrol .repcontrol_move as your selector and you should be fine.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 { cursor: url(http://i.imgur.com/kw6l5Mk.png) 24 24, auto; }
.repitem .itemcontrol .repcontrol_move { cursor: url(http://i.imgur.com/kw6l5Mk.png) 24 24, auto; }This didn't work, but !important worked. Thanks!
<label class="sheet-small-label2 sheet-autoexpand"> <input title="@{height}" type="text" name="attr_height" /> <span data-i18n="height">Height</span> <span name="attr_height" class="sheet-autoexpand"> </label>
.sheet-small-label2 { display: inline-block; height: 3em; min-height: 3em; position: relative; } .sheet-small-label2 span:not(.sheet-autoexpand) { display:block; position: relative; bottom: 0px; } /* generic fields */ .sheet-small-label2 > input, .sheet-small-label2 > 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; }
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.
https://jsfiddle.net/v9ee7mwd/
(Also, I'm hoping to push my Ghost Lines character sheet up soon. That's why I needed the clocks.)
<label title="@{Height}: Characters Height.">Height: <span class="sheet-autoexpand-wrap"> <input name="attr_Height" type="text" > <span name="attr_Height" class="sheet-autoexpand" ></span> </span></label>
<label class="sheet-label-under2 sheet-autoexpand-wrap"> <input type="text" name="attr_SP_Range" title="Range spell can be cast" /> <span name="attr_SP_Range" class="sheet-autoexpand"></span> <span>Range</span> </label>Note: that in both cases, the actual input tag is contained directly inside a label or span with the class sheet-autoexpand-wrap.
label { display: inline-block; font-size: inherit; line-height: 1em; margin-bottom: initial; padding-right: initial; width: initial; color: initial; position: relative; height: auto; 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.
/* Note: This is the tag that wraps the entire thing. It can be a label or a span */ .sheet-autoexpand-wrap { display: inline-block; position: relative; width: auto; min-width: 2em; margin-right: 1em; white-space: nowrap; } .sheet-autoexpand-wrap:not(.sheet-label-under2) { height: 2em; vertical-align: middle; } .sheet-label-under2 { display: inline-block; height: 2.75em; vertical-align: top; }Again, it is very important that sheet-autoexpand-wrap have "display: inline-block; width:auto; white-space: nowrap;". I think "position: relative;" might be important also. Everything else can be adjusted to fit your individual style.
/* Note: This is the input statement that is visible. */ .sheet-autoexpand-wrap input { display: block; overflow: hidden; width: 100%; position: absolute; white-space: normal; } /* 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. */ .sheet-autoexpand-wrap span.sheet-autoexpand { visibility: hidden; width: 100%; white-space: pre; /* pre-wrap; for textarea which i never got working but "pre" should also work for spans */ word-wrap: break-word; overflow-wrap: break-word; overflow: hidden; padding-right: .7em; /* 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 */ } /* Note: This is the span that holds the label that we want small at the bottom. */ .sheet-label-under2 span:not(.sheet-autoexpand) { display: block; position: absolute; bottom: 0px; line-height: .75em; font-size: 85%; padding-left: .25em; }It is very important that everything inside the sheet-autoexpand-wrap be "display: block;" since we want them to line up one under another.
.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: https://jsfiddle.net/wfabcwk9/2/
<input type="checkbox" class="sheet-houserule_DH" name="attr_houserule_DEXHorse"/> <!-- two versions of the button I've tried --> <button type='roll' name='roll_HorseKB' value='(trimmed for space)'></button> <div class="sheet-houserule_DEXHorse" > <button type='roll' name='roll_HorseKB' value='(trimmed for space)'></button> </div>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; } /* Toggled State */ input.sheet-houserule_DH:checked ~ div.sheet-houserule_DEXHorse { display:inline !important; } input[name="attr_houserule_DEXHorse"]:checked ~ .sheet-houserule_DEXHorse { 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?
You need to save jsFiddle for it to regenerate the output.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).
.sheet-auto-expand-text { visibility: hidden; }which I have above in my actual usage.
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.
I'd recommend using the :not functionality in css as below, then you never have to unhide it and overwrite styles:.sheet-houserule_DEXHorse { display:none; } /* Toggled State */ input.sheet-houserule_DH:checked ~ div.sheet-houserule_DEXHorse { display:inline !important; } input[name="attr_houserule_DEXHorse"]:checked ~ .sheet-houserule_DEXHorse { display:inline !important; }
input.sheet-houserule_DH:not(:checked) ~ div.sheet-houserule_DEXHorse, input[name="attr_houserule_DEXHorse"]:not(:checked) ~ .sheet-houserule_DEXHorse { display: none; }
input.sheet-hrcheck_dex:not(:checked) ~ button { 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.
<input type="hidden" name="attr_honor_toggle" class="toggle-honor"> input.sheet-toggle-honor:not([value='1']) ~ div .sheet-honor { display: none; } // Later in the sheet <input type="checkbox" name="attr_honor_toggle" value="1">
<input class="sheet-HideConfig" type="checkbox" checked name="attr_is_config" /> <span class="sheet-is-config"><span style='font-family:"Pictos";'>y</span></span> /* separated over 2 lines just for clarity in this window */The CSS:
.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; text-align: center; display: inline-block; width: 5%; height: 16px; font-size: 9px; /*font-family: "Pictos";*/ /*background: #65763c;*/ background: black; /*#93537c;*/ color: white; /*white;*/ font-weight: bold; border-radius: 4px; margin-left: -5%; } .charsheet input.sheet-HideConfig { float:right; width: 5%; height: 16px; cursor: pointer; margin-left: auto; margin-top: auto; opacity: 0; z-index: 9999; } .charsheet .sheet-HideConfig:checked + span.sheet-is-config { background: black; border-radius: 4px; color: white; }
Kryx said:
FYI the auto-expanding works with textareas as well.