Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Backgrounds

1633803776
Don
Pro
Is it possible to have different character sheet backgrounds based on an attribute? Say one image if the attribute is 1 and a different image if the attribute is 2?
1633867310

Edited 1634028920
Finderski
Pro
Sheet Author
Compendium Curator
Is this a sheet you're developing? If so, definitely, it's just a matter of CSS to define the background. If this is a for an existing sheet...maybe, which sheet it is? If it's an existing sheet that you're modifying, then see above. To help further we'd either need to know the sheet, or if you're coding it, then we need some details around the code you're using, etc.
1633867668

Edited 1633867750
Oosh
Sheet Author
Do you mean for writing a custom sheet? It should be possible with the right setup, but might need a bunch of trickery for an existing sheet. AFAIK you can't style an ancestor element from a child's content, so you will need to have a hidden input at the top of your node tree linked to the attribute input in your character sheet. There are other ways to do it, but would probably rely on a bunch of absolute positioning and z-index faffing to get it to look right. A basic example with a few random images from R20 -it's just a number input with a default value, and alternative for "1" and "2". The HTML: &lt; input type = "hidden" name = "attr_background" /&gt; &lt; div class = "mysheet" &gt; &nbsp; &nbsp; &lt; div class = "attributes" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input name = "attr_background" type = "number" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- rest of sheet --&gt; &nbsp; &nbsp; &lt;/ div &gt; &lt;/ div &gt; And the CSS: .mysheet { &nbsp; &nbsp; min-height : 100vh ; } .attributes { &nbsp; &nbsp; padding : 15px 0px 0px 15px ; } input [ type = "hidden" ][ name = "attr_background" ] ~ .mysheet { &nbsp; &nbsp; background-image : url ( " <a href="https://s3.amazonaws.com/files.d20.io/images/246419359/f_dsCj7a4K_rYpIopPnloA/original.jpg" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/246419359/f_dsCj7a4K_rYpIopPnloA/original.jpg</a> " ); } input [ type = "hidden" ][ name = "attr_background" ][ value = "1" ] ~ .mysheet { &nbsp; &nbsp; background-image : url ( " <a href="https://app.roll20.net/v2/images/roll20-logo.png" rel="nofollow">https://app.roll20.net/v2/images/roll20-logo.png</a> " ); } input [ type = "hidden" ][ name = "attr_background" ][ value = "2" ] ~ .mysheet { &nbsp; &nbsp; background-image : url ( " <a href="https://s3.amazonaws.com/files.d20.io/marketplace/2035064/d6iYs5IY6Fv8XS70-98qeA/med.jpg" rel="nofollow">https://s3.amazonaws.com/files.d20.io/marketplace/2035064/d6iYs5IY6Fv8XS70-98qeA/med.jpg</a> " ); }
1633920880
Don
Pro
Thank you, seeing the examples really helps, CSS/HTML is all new to me. I'm working on some 'character' sheets that really are unit cards for a WW2 miniatures game.&nbsp; And the background would be different based on the nation (which is the hidden attribute) - basically the flag is the background with the data overtop. This is my initial start, using CSS Grid. I've put the American flag as the background here but for units of other nations I'll change the background. The centre picture is currently a static image, but I'm hoping they push through the ability to have the character avatar image displayed in the character sheet. Appreciate the responses.
1633993672
I thoought this was impossible but this forum post has me pondering now..... I wanted to use the background of the dnd celebration sheets from last year once but couldn't figure out how to get them to work with the 5e OGL sheet, are there custom backgrounds that fit perfectly into the 5e OGL sheet that won't make me have to do a ton of work to make work?&nbsp; I assumed that in order to have a cool looking sheet all of it had to be done manually, is it as simple as just pasting a few lines into the 5e OGL's CSS/HTML?
1634029027
Finderski
Pro
Sheet Author
Compendium Curator
DM Eddie said: I wanted to use the background of the dnd celebration sheets from last year once but couldn't figure out how to get them to work with the 5e OGL sheet, are there custom backgrounds that fit perfectly into the 5e OGL sheet that won't make me have to do a ton of work to make work?&nbsp; I assumed that in order to have a cool looking sheet all of it had to be done manually, is it as simple as just pasting a few lines into the 5e OGL's CSS/HTML? If you have access to and can modify the source code for the sheet, then yes. &nbsp;For a working example, you can look at the Savage Worlds Tabbed character sheet.
1634047515
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
It would probably not be a straightforward quick fix. I remember trying to do this with stylus a couple of years ago. There are a lot of divs on the sheet with white backgrounds, plus a several white-backgrounded images. You would need to change or switch out all of those to allow a background to be visible across the sheet. It is not currently built for it.