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

[Rogue Trader] Reworking and upgrading sheet, but hit the CSS wall.

Whilst preparing a character for my first game of Rogue Trader I found myself wanting more from the sheet. I started off creating macros for linking things in chat, using the default roll table, and then set about on creating a macro for every weapon in the game to make prep easier on the DM. Half way through writing all my macros I decided it'd probably make sense for me to rework the sheet instead of trying to code around it. I'm intending to revamp the sheet, replace checkboxes with radio buttons, have everything output into the default roll table, and make it possible to link traits and talents into the chat log. I decided to start by adding my weapon macro as the default roll for the sheet, when I hit the CSS wall. I have no idea how to read it, let alone editing it. So far I have replaced the [R] button in the bottom left with my macro template, replacing the hand-entered info for sheet attributes, which outputs like so: And, happy with how it turned out, decided to delete the [R] button, and replace the default button output with this new code. After doing so it worked, but the [R] remained as text floating outside the section. Finding the section of CSS that this part of the sheet uses is proving to be more of a task than I was expecting. Would any of you more experienced sheet authors be willing to point me in the right direction? 
1564133115

Edited 1564133176
GiGs
Pro
Sheet Author
API Scripter
I'm sure people would be happy to, but you'll need to post snippets of html and the css that applies to it, maybe with screenshots in game, and describe how you want to change that part of it. First thing though, are you using the dev console to examine the css in game? Open the character sheet, rightclick an element on the sheet, and select Inspect (it might be labelled something slightly different), and this will open the dev console with the html for that code in focus. You will be able to see which css styles apply to it, and can play around with editing them to see what effects it has. Any changes you make here are temporary - they'll be lost when you reload the sheet, so it's a good way to safely experiment. In this specific case, I'd inspect the floating r element and it'll show you the css styles, and also what html is causing it.
Thank you ever so much for the tip to use the dev console! I definitely have a better idea how this works now! After a little work this is what I've wound up with: <div class="sheet-quickborder"> <div class="sheet-row"> <div class="sheet-item sheet-puny"> <button type="roll" name="roll_rangedattack" value="&{template:default} {{name=@{rangedweaponname}}} {{attack=[[(@{bs}+?{Modifier|0}+ [[ ?{Aim|No, 0|Half, 10|Full, 20} ]]-1d100)/10]] degree(s) of success!}} {{Reload=@{rangedweaponreload}}} {{RoF=@{rangedweaponrof}}} {{Range=@{rangedweaponrange}}} {{Damage=[[{@{rangedweapondamage}, (@{rangedweapontearing}*@{rangedweapondamage})}kh1]] @{rangedweapontype} damage!}} {{Pen=@{rangedweaponpen}}} {{Special=@{rangedweaponspecial}}} " class="btn ui-draggable" data-characterid="-LkduqdNFnZPfdonTojg/repeating_rangedweapons_-LkduvWGRMayelyZwf3x_rangedattack"> <label>R</label> </button></div> <div class="sheet-item sheet-tiny"><label>Name:</label></div><div class="sheet-item sheet-big"><input type="text" name="attr_rangedweaponname"></div> <div class="sheet-item sheet-tiny"><label>Class:</label></div> <div class="sheet-item sheet-small"><input type="text" name="attr_rangedweaponclass"></div> </div> <div class="sheet-row"> <div class="sheet-item sheet-small"> <label name="rangeddamage"> <label>Damage:</label> </label></div> <div class="sheet-item sheet-small"><input type="text" name="attr_rangedweapondamage"></div> <div class="sheet-item sheet-little"><label style="font-size: 0.9em">Tearing</label></div> <div class="sheet-item sheet-puny"><input type="checkbox" name="attr_rangedweapontearing" value="1"></div> <div class="sheet-item sheet-little"><label>Type:</label></div> <div class="sheet-item sheet-small"><input type="text" name="attr_rangedweapontype"></div> <div class="sheet-item sheet-puny"><label>Pen:</label></div> <div class="sheet-item sheet-other"><input type="text" name="attr_rangedweaponpen" value="0"></div> </div> <div class="sheet-row"> <div class="sheet-item sheet-tiny"><label>Range:</label></div> <div class="sheet-item sheet-tiny"><input type="text" name="attr_rangedweaponrange"></div> <div class="sheet-item sheet-puny"><label>RoF:</label></div> <div class="sheet-item sheet-tiny"><input type="text" name="attr_rangedweaponrof"></div> <div class="sheet-item sheet-puny"><label>Clip:</label></div> <div class="sheet-item sheet-small"><input type="text" name="attr_rangedweaponclip" value="0"></div> <div class="sheet-item sheet-tiny"><label>Reload:</label></div> <div class="sheet-item sheet-tiny"><input type="text" name="attr_rangedweaponreload"></div> </div> <div class="sheet-row"> <div class="sheet-item sheet-tiny"><label>Special:</label></div> <div class="sheet-item sheet-huge"><input type="text" name="attr_rangedweaponspecial"></div> </div> </div> I have a few things further I'd like to do to this section and would appreciate advice on: I'd like to change the [R] button to the d20 roll symbol, following the wiki it didn't seem to work through the console. I'd like to create a new input field that acts as a default bonus, acting as the default number supplied to this modifier {{attack=[[(@{bs}+?{Modifier|0} . Would I be defining this attribute within the repeating section or elsewhere? I'd like to change the Tearing code, instead of it having rolling dice twice even when unchecked (and causing the green/red borders to appear when the unused dice roll min or max), I'd like it to simply modify the damage roll appropriately. Taking a [[1d10+4]] to a [[2d10d1+4]] for example. (Could this be done by telling it to output the attribute twice with a modifier?) Finally, I'd like for sections without any text to be ignored by the roll template if at all possible. I'm thinking a checkbox would work but if it's at all possible to have it check for an absence of text in the field and then not output it that'd be cleaner. (As in Pen/Special) And thanks again for your help!
1564165396

Edited 1564165501
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
This is all pretty straight forward once you get the hang of the unique aspects of sheet code I have a few things further I'd like to do to this section and would appreciate advice on: I'd like to change the [R] button to the d20 roll symbol, following the wiki it didn't seem to work through the console. This is done using the various pictos fonts. The reason it probably isn't working for you is that you have a <label> tag nested in your roll button for some reason. This isn't needed. Additionally, the d20 icon is the default display for the roll buttons, so if you change your button declaration to be: <button type="roll" name="roll_rangedattack" value="&{template:default} {{name=@{rangedweaponname}}} {{attack=[[(@{bs}+?{Modifier|0}+ [[ ?{Aim|No, 0|Half, 10|Full, 20} ]]-1d100)/10]] degree(s) of success!}} {{Reload=@{rangedweaponreload}}} {{RoF=@{rangedweaponrof}}} {{Range=@{rangedweaponrange}}} {{Damage=[[{@{rangedweapondamage}, (@{rangedweapontearing}*@{rangedweapondamage})}kh1]] @{rangedweapontype} damage!}} {{Pen=@{rangedweaponpen}}} {{Special=@{rangedweaponspecial}}}" class="btn ui-draggable" data-characterid="-LkduqdNFnZPfdonTojg/repeating_rangedweapons_-LkduvWGRMayelyZwf3x_rangedattack"></button> and then remove the css declaration that is eliminating the d20 icon, you'll have what you want. Note, that you also shouldn't need class="btn ui-draggable"  in your html code. I'd like to create a new input field that acts as a default bonus, acting as the default number supplied to this modifier  {{attack=[[(@{bs}+?{Modifier|0}.  Would I be defining this attribute within the repeating section or elsewhere? It depends on whether it's a system default, or a default that the user defines for each weapon. If it's a system default, then you'd define it outside the repeating section, otherwise inside. I'd like to change the  Tearing  code, instead of it having rolling dice twice even when unchecked (and causing the green/red borders to appear when the unused dice roll min or max), I'd like it to simply modify the damage roll appropriately. Taking a  [[1d10+4]]  to a  [[2d10d1+4]] for example. (Could this be done by telling it to output the attribute twice with a modifier?) There's a couple ways to do this, probably the easiest is to change the tearing input to have a different checked value like so: <input type="checkbox" name="attr_rangedweapontearing" value="@{rangedweapondamage}"> and change the roll template's damage declaration to be this: {{Damage=[[{@{rangedweapondamage}, 0d0+@{rangedweapontearing}}kh1]] @{rangedweapontype} damage!}} This will then resolve to either {{Damage=[[{1d10+3, 0d0+0}kh1]] @{rangedweapontype} damage!}} or {{Damage=[[{1d10+3, 0d0+1d10+3}kh1]] @{rangedweapontype} damage!}} depending on whether tearing is checked or not. Any cleaner output will require sheetworkers, and/or a custom roll template. Finally, I'd like for sections without any text to be ignored by the roll template if at all possible. I'm thinking a checkbox would work but if it's at all possible to have it check for an absence of text in the field and then not output it that'd be cleaner. (As in Pen/Special) You'll need a custom roll template to handle that. Right now you're using the default roll template which has absolutely no logic ability. You can read more about custom roll templates and roll template helper functions in the wiki . Hope that helps, Scott
Hi Mike, We made a bunch of changes for the Rogue Trader sheet ourselves, adding buttons for single shot, Semi and Full Auto Burst, and made a lot of use of the Power Cards API for it too. Happy to post snippets or even the full sheet if you're interested.
Thanks for your help Scott! I've got the weapon section more or less how I wanted it. I decided to keep the button as an R instead of the d20 symbol because I'm fairly certain deleting the css for that would break other sections of the sheet where it's used.  Corin I'd love to see what you've done with the sheet, and especially how you're utilising the API for it. I'm currently looking at creating a roll template that for the sheet, with enough logic to at least ignore blank input fields. I'm thinking I'll need to create one for each type of output, ranged & melee attacks, skills, traits and the like. Do you have any advice for creating a roll table for a ranged attack using this repeating section? <div class="sheet-quickborder"> <div class="sheet-row"> <!-- Row 1 - Roll Button, Name, Class & Base Mod --> <div class="sheet-item sheet-puny"> <!-- Roll Button --> <button type="roll" name="roll_rangedattack" value="&{template:default} {{name=@{rangedweaponname}}} {{attack=[[(@{bs}+?{Modifier|0}+ @{rangedweaponhitmod} + [[ ?{Aim|No, 0|Half, 10|Full, 20} ]]-1d100)/10]] degree(s) of success!}} {{Reload=@{rangedweaponreload}}} {{RoF=@{rangedweaponrof}}} {{Range=@{rangedweaponrange}}} {{Damage=[[(@{rangedweapondamagedice}+@{rangedweapontearing})@{rangedweapondtype}k@{rangedweapondamagedice}+@{rangedweapondamagemod}]] @{rangedweapontype} damage!}} {{Pen=@{rangedweaponpen}}} {{Special=@{rangedweaponspecial}}} " class="sheet-btn sheet-ui-draggable btn ui-draggable"> <!-- Chatlog Output --> <label>R</label> </button></div> <div class="sheet-item sheet-little"><label>Name:</label></div><div class="sheet-item sheet-large"><input type="text" name="attr_rangedweaponname"></div> <!-- Weapon Name--> <div class="sheet-item sheet-little"><label>Class:</label></div><div class="sheet-item sheet-little"><input type="text" name="attr_rangedweaponclass"></div> <!-- Weapon Class --> <div class="sheet-item sheet-little"><label>Mod:</label></div><div class="sheet-item sheet-little"><input type="number" value="0" name="attr_rangedweaponhitmod"></div></div> <!-- Static Skill Bonus --> <div class="sheet-row"> <!-- Row 2 - Damage Info --> <div class="sheet-item sheet-little"><label>Dmg:</label></div> <!-- Dmg: Label --> <div class="sheet-item sheet-punier"><input type="number" name="attr_rangedweapondamagedice"></div> <!-- Number of Damage Dice --> <div class="sheet-item sheet-tiny"><select name="attr_rangedweapondtype" class="sheet-dtype"> <!-- Type of Damage Dice --> <option value="d5">d5</option> <option value="d10">d10</option></select> </div> <div class="sheet-item sheet-punier"><input type="number" name="attr_rangedweapondamagemod"></div> <!-- Bonus to Damage Roll --> <div class="sheet-item sheet-little"><label style="font-size: 0.9em">Tearing</label></div> <!-- Tearing Label --> <div class="sheet-item sheet-puny"><input type="checkbox" name="attr_rangedweapontearing" value="1"></div> <!-- Tearing Checkbox --> <div class="sheet-item sheet-little"><label>Type:</label></div><div class="sheet-item sheet-small"><input type="text" placeholder="Damage Type" name="attr_rangedweapontype"></div> <!-- Damage Type --> <div class="sheet-item sheet-puny"><label>Pen:</label></div><div class="sheet-item sheet-other"><input type="text" name="attr_rangedweaponpen" value="0"></div> <!-- Penetration Value --> </div> <div class="sheet-row"> <!-- Row 3 - Range, RoF, Clip, Reload --> <div class="sheet-item sheet-tiny"><label>Range:</label></div><div class="sheet-item sheet-tiny"><input type="text" name="attr_rangedweaponrange"></div> <!-- Weapon Range --> <div class="sheet-item sheet-little"><label>RoF:</label></div><div class="sheet-item sheet-tiny"><input type="text" name="attr_rangedweaponrof"></div> <!-- Weapon RoF --> <div class="sheet-item sheet-little"><label>Clip:</label></div><div class="sheet-item sheet-puny"><input type="text" name="attr_rangedweaponclip" placeholder="Clip"></div> <!-- Weapon Clip --> <div class="sheet-item sheet-puniest"><label>/</label></div> <!-- Weapon Clip Divider --> <div class="sheet-item sheet-puny"><input type="text" name="attr_rangedweaponclipmax" placeholder="Max"></div> <!-- Weapon Clip Max --> <div class="sheet-item sheet-tiny"><label>Reload:</label></div><div class="sheet-item sheet-tiny"><input type="text" name="attr_rangedweaponreload"></div> <!-- Weapon Reload --> </div> <div class="sheet-row"> <!-- Row 4 - Weapon Qualities --> <div class="sheet-item sheet-tiny"><label>Special:</label></div><div class="sheet-item sheet-huge"><input type="text" placeholder="Special Weapon Qualities" name="attr_rangedweaponspecial"></div> <!-- Special Qualities --> </div> </div> Thanks again for all the help!
Has anyone added hit location to the API and fixed the Righteous Fury issue where it shows a crit when it isnt one (because it always rolls for tearing) ? Those two things would make me a happy happy man.
I've fixed tearing. And I'm adding hit location to the roll template as well.
I've done some work on the Rogue Trader sheet for my own game.  The current form is showcased here .  If anything looks like something you want, let me know and I'll post the code.
Thanks for demoing your sheet, it's great to see how you've tackled additions I was planning to making, and how you've done things differently to me. I'll definitely be using this for inspiration.  If you don't mind, I'll share how I tackled the tearing issue in case you wanted to steal it. Usually you'd have: {@{rangedweapondamage}, (0*@{rangedweapondamage})}kh1 I simply split the damage section into three sections: @{rangedweapondamagedice} which is a number field | @{rangedweapondicetype} which is a select field of d5/d10 | @{rangedweapondamagemod} which is another number field Then the calculation for damage becomes: (@{rangedweapondamagedice}+@{rangedweapontearing})@{rangedweapondtype}k@{rangedweapondamagedice}+@{rangedweapondamagemod} Where the value of @{rangedweapontearing} is 0 unchecked, or 1 checked.