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

Custom Character Sheet - Rolltemplate Background image in an attribute ?

1713717166

Edited 1713717340
Hello Everyone, I'd like to first start thanking you all for all the different post and tutorial you built around the years it has helped me a lot in the creation of my first character sheet for my first campaign as a DM. I am here today to ask a specific question that I can't seem to find a proper method to apply. In the process of creating custom creatures/monsters in my game, using a specific custom sheet, I'm trying to change the roll background image by placing the path to the image in an attribute. The desired design is as follow : Roll from the creature "Ethlimyn" : Roll from the creature "Cecaelia" : My HTML rolltemplate look like so : &lt; rolltemplate class = "sheet-rolltemplate-ATDW_CR" &gt; &nbsp; &nbsp; &lt; div class = "sheet-CR_container sheet-color-{{color}}" &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-CR_header" &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_title}} &lt; div class = "sheet-CR_title" &gt; {{CR_title}} &lt;/ div &gt; {{/CR_title}} &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_subtitle}} &lt; div class = "sheet-CR_subtitle" &gt; {{CR_subtitle}} &lt;/ div &gt; {{/CR_subtitle}} &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-CR_roll" &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_Normal_roll}} &lt; div class = "CR_Normal_roll_s" &gt; {{CR_Normal_roll}} &lt;/ div &gt; {{/CR_Normal_roll}} &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-CR_content" &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{#allprops() CR_title CR_subtitle CR_Normal_roll &nbsp;CR_desc}} &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-key" &gt; {{key}} &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-value" &gt; {{value}} &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{/allprops() CR_title CR_subtitle CR_Normal_roll &nbsp;CR_desc}} &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_desc}} &lt; div class = "sheet-CR_desc" &gt; {{CR_desc}} &lt;/ div &gt; {{/CR_desc}} &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &lt;/ rolltemplate &gt; At first I was only using one image so my CSS part was looking like this for my roll display : .sheet-rolltemplate-ATDW_CR .sheet-CR_Normal_roll_s { &nbsp; &nbsp; background-image : url ( ' <a href="https://raw.githubusercontent.com/Hylun-Git/Roll20_test_img/main/Monsters/Cecaelia/Cecaelia_header.png" rel="nofollow">https://raw.githubusercontent.com/Hylun-Git/Roll20_test_img/main/Monsters/Cecaelia/Cecaelia_header.png</a> ' ); &nbsp; &nbsp; position : float; &nbsp; &nbsp; left : 140px ; &nbsp; &nbsp; line-height : 4em ; &nbsp; &nbsp; height &nbsp; : 50px ; &nbsp; &nbsp; /*width: 280px;*/ } My guess was to create under my GitHub page folders for each creature with their respective Roll background image and to call the link in their sheet under an attribute. The created attribute is hidden and serve only the purpose of adding the https link to the image. &lt; input type = "hidden" name = "attr_CR_header" value = "Header" /&gt; Though I saw that I was not able to call the attribute value in the CSS file using the @{CR_header} method I tried to change the roll line in my rolltemplate like so :&nbsp; &lt; div class = "sheet-CR_roll" &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_Normal_roll}} &lt; div @{CR_header} class = "CR_Normal_roll_s" &gt; {{CR_Normal_roll}} &lt;/ div &gt; {{/CR_Normal_roll}} &nbsp; &nbsp; &nbsp; &lt;/ div &gt; And changing the reference of my link by placing it in such way inside my attribute : background-image : url(' <a href="https://raw.githubusercontent.com/Hylun-Git/Roll20_test_img/main/Monsters/Ethlimyn/Ethlimyn_header.png" rel="nofollow">https://raw.githubusercontent.com/Hylun-Git/Roll20_test_img/main/Monsters/Ethlimyn/Ethlimyn_header.png</a>') After some test and trying to change the way it was written I did not find a proper way to work with this. If any of you have a suggestion as how to work this out I would be quite interested. It is my first time posting on a forum and I am sorry in advance if I messed some part or made it unclear. (P.S: If there is a way to change the color of the roll background and number color I would be quite interested too) Thank you all for your time. Respectfully, Hylün
1713739053
Finderski
Pro
Sheet Author
Compendium Curator
The easiest way is to pass in a class name via an attribute and then have your CSS set up for each of the different classes. For example: &lt;rolltemplate class="sheet-rolltemplate-ATDW_CR {{creatureClass}}"&gt; You could use an input called "creatureClass" to store the actual class name you wanted to use that would align with your CSS.&nbsp;
1713754417
vÍnce
Pro
Sheet Author
@Finderski I totally forgot about this trick. This definitely should be included in <a href="https://wiki.roll20.net/CSS_Wizardry" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry</a> Thank you for the reminder!
1713782889

Edited 1713783608
Hello again ! First thank you all for your answers @Finderski : That is indeed one of the way I was using for some static images like the different players attributes roll which will not change during the campaing or any future game creation. Though the creatures and possible encounters will change during the campaign and maybe future games. I'm trying to find a solution that would not require players or other futur user to tweak with the CSS or HTML code and just provide the image link from their git page or sharing plateform and place it in the corresponding attribute of the new creature/encounter. That solution is indeed the best at the moment to ensure it all to work and I will be using it for the moment to continue on with my campaign. Though I think there is a possible way to make it simpler for the common users.&nbsp; Thank you for your answer ! @emma02 : Thanks a lot ! I'll try my best on creating the best experience for my players and maybe futur user of that game environment. I tried using the call of my attribute through the var(--CR_header) method but without succes on my end, maybe an error on my way of writting it in. HTML code where the roll template is defined : &lt; rolltemplate class = "sheet-rolltemplate-ATDW_CR" &gt; &nbsp; &nbsp; &lt; div class = "sheet-CR_container sheet-color-{{color}}" &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-CR_header" &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_title}} &lt; div class = "sheet-CR_title" &gt; {{CR_title}} &lt;/ div &gt; {{/CR_title}} &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_subtitle}} &lt; div class = "sheet-CR_subtitle" &gt; {{CR_subtitle}} &lt;/ div &gt; {{/CR_subtitle}} &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-CR_roll" &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_Normal_roll}} &lt; div class = "CR_Normal_roll_s" &gt; {{CR_Normal_roll}} &lt;/ div &gt; {{/CR_Normal_roll}} &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-CR_content" &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{#allprops() CR_title CR_subtitle CR_Normal_roll &nbsp;CR_desc}} &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-key" &gt; {{key}} &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-value" &gt; {{value}} &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp;{{/allprops() CR_title CR_subtitle CR_Normal_roll &nbsp;CR_desc}} &nbsp; &nbsp; &nbsp; &nbsp;{{#CR_desc}} &lt; div class = "sheet-CR_desc" &gt; {{CR_desc}} &lt;/ div &gt; {{/CR_desc}} &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &lt;/ rolltemplate &gt; HTML code where the attribute is created and where one of the roll is called : &nbsp; &nbsp; &lt; input type = "text" class = "CR_name" name = "attr_Cr_name" value = "" /&gt; &nbsp; &nbsp; &lt; input type = "text" class = "CR_Stats_STR" name = "attr_CR_Stats_STR" value = "8" &gt; &nbsp; &nbsp; &lt; button type = "roll" class = "CR_Roll_STR" name = "roll_attack" value = "&amp;{template:ATDW_CR} {{CR_title=Strength Check}} {{CR_Normal_roll=[[{@{CR_AdvQuant}d20+@{CR_Stats_STR}}@{CR_AdvSelc}]]}}" &gt;&lt;/ button &gt; CSS code where I'm calling the attribute : .sheet-rolltemplate-ATDW_CR .sheet-CR_Normal_roll_s { &nbsp; &nbsp; background-image : var ( --CR_header ); &nbsp; &nbsp; position : float; &nbsp; &nbsp; left : 140px ; &nbsp; &nbsp; line-height : 4em ; &nbsp; &nbsp; height &nbsp; : 50px ; &nbsp; &nbsp; /*width: 280px;*/ } Maybe you will be able to spot an error I could not see. After some research on my end I found that those variable in the CSS file should be created at the top of the file meaning that I would have to go back to the CSS file when I would like to add new design, Is that right ? Thanks again everyone for the help and answers ! Respectfully, Hylün