Creating L5R 4E character sheet. CSS advice?

Since I want to play L5R and I can't find any character sheet for it, I'm attempting to make my own. I'm new to CSS and HTML, so I'm learning as I go along. Can anyone suggest a particularly well-made or simple character sheet that I can look to for good examples of coding? Also, if anyone already *has* an L5R sheet, let me know. Thanks!

I was also curious what I shoudl be coding in, should I get something liike Notepad++? Is there any software that offers the preview functionality like the website does?

I haven't worked with Roll20 sheets specifically, but unless there's some radically different things in there compared to regular HTML / CSS, Notepad++ should definitely be enough. If you save the file as a .htm, you should be able to look at it directly in your browser. (Roll20 functionality probably doesn't work, unless they've got some really neat programming in place, but the general appearance should be fine.) I learned HTML / CSS through W3Schools back in the day; their tutorials should be a good guide on the way.

Cool, I will be sure to check that out, I've been poking Code Academy's CSS tutorials this afternoon. Here's what I have so far, having shamelessly copied from Brian's Exalted files. I'm currently trying to figure out a way to center the 5 Traits instead of having them right aligned. <a href="http://i.imgur.com/jPu68Sx.jpg" rel="nofollow">http://i.imgur.com/jPu68Sx.jpg</a>

Might be as easy as text - align:center ; Otherwise, try margin: 0 15% 0 15%; and then fiddle around with the exact numbers to make sure it looks right. It's hard to tell when I don't have the CSS itself. Also, remember that the Ring is a derived value, the lowest of its two subtraits. Are those skills copied from the Exalted sheet too? Just checking, because they look very different from the ones in my book. Deleted post below was an accidental double post, my mistake.

Yep, those skills are just copied, haven't gotten to changing them yet. I'm not familiar enough with the attribute system to know how to tell it to take the lowest of the two traits, so I figured I'd come back to it later. I think I need something like input type="number" name="attr_Air" value="min(@{Reflexes}@{Awareness}" disabled="true" / However I don't know the syntax for the value part yet. Thanks for the centering suggestions!

You can see a listing of how to implement various math functions, including min(x), for autocalc fields in the CSS Wizardry thread (although admittedly, it's not really CSS that's doing it). If you try to use an offline editor to make the character sheet, you'll be missing out on some things, most notably the sheet-2colrow and sheet-3colrow classes (and the sheet-col class which is intended for use inside the other two). Here's the CSS for those classes: .sheet-2colrow, .sheet-3colrow { display: block; clear: both; } .sheet-3colrow .sheet-col { width: calc(33% - 21px); margin-right: 30px; } .sheet-2colrow .sheet-col { width: calc(50% - 20px); margin-right: 30px; } .sheet-col { display: inline-block; vertical-align: top; } Also remember that autocalc fields won't work in an offline environment (they're calculated using some JavaScript), nor will repeating sections (manipulated with JavaScript), but those are both true of the preview pane as well. You'll also be missing out on some default styling which may slightly alter the look of your sheet offline as compared to online, and you won't have access to certain special fonts, such as the one used for the dice images which appear on roll buttons by default. It may also be worth pointing out, especially if you're copying code from my Exalted sheet, that when running on Roll20, all classes on your HTML elements are prefixed with "sheet-", and all selectors in your CSS are prefixed with ".charsheet ". So, if you write the following offline: &lt;input type="number" name="attr_Reflexes" class="ability narrow" /&gt; input.ability { font-style: italic; } .narrow { width: 10%; } It will look like you want it, but once you enter a campaign with it, you will effectively have: &lt;div class="charsheet tab-pane"&gt;&lt;input type="number" name="attr_Reflexes" class="sheet-ability sheet-narrow" /&gt;&lt;/div&gt; .charsheet input.ability { font-style: italic; } .charsheet .narrow { width: 10%; } As you can see, the classes won't match up. If you remember to include sheet-* in your CSS you'll be fine (this is what I did on the Exalted sheet), but it may be simpler to just always remember to include sheet-* on all of your classes, even your HTML, and you'll have an easier time hunting down bugs.

Thanks Brian for the advice! I've decided to stick to editing on the website for now, just making offline backups every so often, because I'm not sure when I'll do something that will mess up the entire sheet. Hey! That math is exactly what I was looking for! I just didn't scroll far enough down when reading the CSS wizardry thread beforehand. You seem to have put everything in there! :D

Currently I can't get the math to display properly. I have [code] &lt;div&gt; &lt;input type="number" disabled="true" name="attr_Air" value="(((@{attr_Reflexes} + @{attr_Awareness}) - abs(@{attr_Reflexes} - @{attr_Awareness})) / 2)" /&gt; &lt;/div&gt; &lt;div&gt; &lt;p&gt;&lt;/ladel&gt;&lt;span&gt;Reflexes&lt;/span&gt;&lt;/p&gt; &lt;input type="number" name="attr_Reflexes" /&gt; &lt;/div&gt; &lt;div&gt; &lt;p&gt;&lt;/ladel&gt;&lt;span&gt;Awareness&lt;/span&gt;&lt;/p&gt; &lt;input type="number" name="attr_Awareness" /&gt;[/code] And currently nothing shows up in the "Air" box. :(

You should be using @{Reflexes} and @{Awareness} to reference the inputs named attr_Reflexes and attr_Awareness.

Ah, thank you!

Next issue. Working on making roll buttons for traits and rings. When I try to roll a ring, it gets mightily confused. Here's teh code &lt;input type="number" disabled="true" name="attr_Earth" value="(((@{Stamina} + @{Willpower}) - abs(@{Stamina} - @{Willpower})) / 2)" /&gt; &lt;button type='roll' name='roll_Earth' value='@{name} rolls Earth [[@{Earth}d10!!]]'&gt;&lt;/button&gt;&lt;br/&gt; And when I put in reasonable values for willpower and stam, like 2 and 3, it properly displays "2" as the Earth ring. When I try to roll earth though, I get "Could not determine result type of: [{"type":"M","expr":"(((2+3)-abs(2-3))/2)"},{"type":"C","text":"d10!!"}]" Should I give up on Autocalculating the rings and just let the players adjust them properly? It seems like that might make the rolling much easier to code.

You just can't use an inline roll, since your calculated value uses abs. You could use /r [[@{Earth}]]d10!!

You mean type that into the chat client or create a macro? I guess that could work. In the meantime I'll just have the Rings set manually, as they're used in calculating almost every single roll in the game.

Is there any way to change fonts in these sheets? Everytime I try, either nothing changes or everything disappears. Looking at the other shets people ahve made, they all seem to use the same font, so I was wondering if that had been disabled.

You should be able to change the font just fine. What did you try to do?

I took label { font-size: 12px; } and changed it to label { font-size: 12px; font-family: "Brush Script MT", cursive; } and that change alone wrecks the formatting for the entire sheet.

Looks like the problems is that the sanitizer is matching the CSS against several regular expressions, one of which includes (java|vb)?script . That's catching on the "script" part of Brush Script MT, and the CSS is getting thrown out. So, do not use any of the following words, as they should all suffer the same problem: data: eval cookie window parent this behavior behaviour expression moz-binding @import @charset javascript vbscript script

Ohh, thank you!

well, suddenly the last couple days of me trying to muck together my own kludged L5R character sheet seem somewhat wasted... At about the same time I started working on the same problem, though from the snapshot given above it looks like you're significantly further ahead than I am. I haven't looked into how to submit new character sheets yet, but I was initially hoping to have a first draft of mine out sometime next week, any idea when yours might be out? In the mean-time I'll probably keep working on my version, but it seems a little silly to have two in process.

Steven F. said: it seems a little silly to have two in process. But collaboration seems like a great idea!

Steven F. said: well, suddenly the last couple days of me trying to muck together my own kludged L5R character sheet seem somewhat wasted... At about the same time I started working on the same problem, though from the snapshot given above it looks like you're significantly further ahead than I am. I haven't looked into how to submit new character sheets yet, but I was initially hoping to have a first draft of mine out sometime next week, any idea when yours might be out? In the mean-time I'll probably keep working on my version, but it seems a little silly to have two in process. I have no clue how long mine will take, because I'm completely new to CSS. I am running my first game next Friday, and didn't particularly expect to have it done by then. I'm happy to share what I have with you, but I can't promise it's comprehensible. As I said, It was a direct copy of Brian's Exalted sheet, and I'm gradually trying to hammer it into what I want. Currently I have these items finished: Rings Ring Rolls Traits Trait Rolls Name/Clan/School In progress: Skill entries Skill rolls Still to be implemented: Wounds Chart Insight Rank Initiative Armor TN School Techniques Equipment Spells Background Advantages/Disadvantages It currently looks like this: <a href="http://imgur.com/uF5evJS" rel="nofollow">http://imgur.com/uF5evJS</a>

I'll get back to my computer around the 14th, I'd love to have a look at the CSS and everything then.

I'm trying to make a table that looks like this: <a href="http://www.w3schools.com/css/tryit.asp?filename=tr" rel="nofollow">http://www.w3schools.com/css/tryit.asp?filename=tr</a>... However, I know I can't use the id="stuff" because the roll20 doesn't allow for id IIRC. How do I make the tr, th, and alt.tr different classes? Thanks!

Nick, you can simply substitute id="customers" for class="customers" in the HTML, and change #customers to .customers in the CSS. The reason you shouldn't use ids on your character sheet is because all of the sheets in a campaign are on the same webpage, using the same HTML, and ids are supposed to be unique across the page. As soon as the campaign has more than one character, the browser is forced into undefined territory. However, for most cases where you would use an id, you can use a class just fine. There are differences behind the scenes with how the two are handled, but you care more about the output. =)

Thanks! That seems to work gerat, and now my tables look much nicer.

Thanks so much for all the help so far, Steve and I have about 3/4 of our goals finished and working! We're now getting to weapons, and I have two questions about those. 1. How can I make a dropdown menu change another attribute? Say I have 5 arrow types, for example, and I have them in a dropdown menu. Each arrow type should set a different value for attr_ArrowDamageRoll and attr_ArrowDamageKeep. Is this possible? 2. Is it possible to make an expandable list with different things that roll properly? What I mean is, can you have an expandable weapon list, where each row that a user creates is able to have separate attribute names that stay separate? like attr_Weapon1DamageKeep, attr_Weapon2DamageKeep, attr_Weapon3DamageKeep, etc. Thanks!

Calle A. said: I'll get back to my computer around the 14th, I'd love to have a look at the CSS and everything then. Happy to send it, let me kn if you want to use it in our campaign. Here is how it currently looks: <a href="http://i.imgur.com/oQr4S0b.jpg" rel="nofollow">http://i.imgur.com/oQr4S0b.jpg</a> <a href="http://i.imgur.com/OZxuG4Q.jpg" rel="nofollow">http://i.imgur.com/OZxuG4Q.jpg</a>

Calle A. said: I should warn you though, emphasis rolls don't work as-written in Roll20; specifically, there's an issue with compounding dice and rerolling. For example, if you roll a 10 and it explodes onto a 1, it will be dropped and re-rolled. That is the way it should work or that's the way it's currently working? (Steve has done the emphasis rolls so far, but I'm happy to look into it)

That's the way it's working in Roll20 right now. I can't remember if you get to re-roll an exploded die with emphasis or if it stays as a 1 (giving a total of 11) but it definitely shouldn't drop it entirely.

The text from the 4th ed book I have states "may immediately re-roll any dice that result in a 1." My interpretation would be that an exploded dice that rolls a 1 for a total of eleven has not resulted in a 1, and is therefore not rerolled. I will see what I can do, currently the code for emphasis rolls read like /roll [[@{roll_Temptation}+@{roll_bonus_Temptation}]]d10k[[@{keep_Temptation}+@{keep_bonus_Temptation}]]!!&lt;1"&gt;

Yeah, that's the idea. Haven't tried that mechanic, will have to check it out. There is a predefined mechanic for rerolling (something like 10d10!!k10r1) which doesn't work with compounding numbers. EDIT: Yeah, not seeing a noticeable difference with that macro. Not even seeing any rerolls; did you miss an r near the end? The bug becomes obvious if you do something like /roll 100d10!!r&lt;1, where you might see several 11's and even a few 21's being rerolled. For now, I guess we'll have to do emphasis rolls manually, until it's fixed.

Oh, I do see that happening, quite strange. We could always just use the rolls and tell people to be on the lookout for gray 11s and 21s, as they'll have to be manually factored in. I'll probably have to put a not in the CSS sheet regarding that, as I can't see any way to do the proper roll in roll20.

Nick R. said: Thanks so much for all the help so far, Steve and I have about 3/4 of our goals finished and working! We're now getting to weapons, and I have two questions about those. 1. How can I make a dropdown menu change another attribute? Say I have 5 arrow types, for example, and I have them in a dropdown menu. Each arrow type should set a different value for attr_ArrowDamageRoll and attr_ArrowDamageKeep. Is this possible? 2. Is it possible to make an expandable list with different things that roll properly? What I mean is, can you have an expandable weapon list, where each row that a user creates is able to have separate attribute names that stay separate? like attr_Weapon1DamageKeep, attr_Weapon2DamageKeep, attr_Weapon3DamageKeep, etc. Thanks! I'm not sure what you mean, exactly. You'll have to be more explicit, since I'm only vaguely familiar with the L5R system. You can create a repeating section with roll buttons, if that's what you mean. You can't have interactions between the different sections, or reference them from outside the repeating section, though. While there is a syntax for accessing values from a repeating section, there isn't a guarantee that the indexes will remain the same.

1. What I mean is, say I have a row in a table for a weapon. One of the cells is a selector for the type of weapon. I want the cell later on in row that is a dice roll to change based on what weapon type is selected, e.g., if "Sword" is selected I want the roll to be "/roll @{swordskill}d10k3" and if "Spear" is selected "/roll @{swordskill}d10k3" We have tried to make this happen by having the dropdown selector change an attribute, that is, change attr_WeaponStat to "@{swordskill}, and then later "/roll@{WeaponStat}d10k3" I think it runs into the same problem I was running into with Ring rolls several days ago, because the error message is again "SyntaxError: Expected "(", ".", "[", "abs(", "ceil(", "d", "floor(", "round(", "t", "{", [ |\t], [+|\-] or [0-9] but "J" found." 2. What I meant is that if I create a repeating section with roll buttons, will the roll button on row 4 use only values from row 4 and not from row 1?

is they any gm that is run l5r right now that i can join i be look for a game all over the roll20 i can not find one plz plz plz can someone ivn me to a gae i got the book and love to learn more about l5r

Nick R. said: 1. What I mean is, say I have a row in a table for a weapon. One of the cells is a selector for the type of weapon. I want the cell later on in row that is a dice roll to change based on what weapon type is selected, e.g., if "Sword" is selected I want the roll to be "/roll @{swordskill}d10k3" and if "Spear" is selected "/roll @{swordskill}d10k3" We have tried to make this happen by having the dropdown selector change an attribute, that is, change attr_WeaponStat to "@{swordskill}, and then later "/roll@{WeaponStat}d10k3" I think it runs into the same problem I was running into with Ring rolls several days ago, because the error message is again "SyntaxError: Expected "(", ".", "[", "abs(", "ceil(", "d", "floor(", "round(", "t", "{", [ |\t], [+|\-] or [0-9] but "J" found." You can create a select with values from other attributes. For example: &lt;input type="number" name="attr_swordskill" /&gt; &lt;input type="number" name="attr_spearskill" /&gt; &lt;select name="attr_WeaponStat"&gt; &lt;option value="@{swordskill}"&gt;Sword&lt;/option&gt; &lt;option value="@{spearskill}"&gt;Spear&lt;/option&gt; &lt;/select&gt; &lt;button type="roll" name="roll_weapon" value="/roll @{WeaponStat}d10k3"&gt;&lt;/button&gt; Nick R. said: 2. What I meant is that if I create a repeating section with roll buttons, will the roll button on row 4 use only values from row 4 and not from row 1? You will only be able to use values from row 4.

Nick R. said: Calle A. said: I'll get back to my computer around the 14th, I'd love to have a look at the CSS and everything then. Happy to send it, let me kn if you want to use it in our campaign. Nick - this is looking great! I was actually looking through the forums because I was about to start teaching myself what I needed to make an L5R 4e sheet. If you don't mind sharing what you've got so far I'll be happy to look it over and have my much more technically minded players see what they can come up with as suggestions.

Sure, just PM me your email and I'll send you what I have so far. Here is the current status: <a href="https://docs.google.com/spreadsheets/d/1sg0aKuUtpxQe8X3EpMERPyi86AqmylpNfRUDoswfZpY/edit?usp=sharing" rel="nofollow">https://docs.google.com/spreadsheets/d/1sg0aKuUtpxQe8X3EpMERPyi86AqmylpNfRUDoswfZpY/edit?usp=sharing</a>

Brian said: You can create a select with values from other attributes. For example: &lt;input type="number" name="attr_swordskill" /&gt; &lt;input type="number" name="attr_spearskill" /&gt; &lt;select name="attr_WeaponStat"&gt; &lt;option value="@{swordskill}"&gt;Sword&lt;/option&gt; &lt;option value="@{spearskill}"&gt;Spear&lt;/option&gt; &lt;/select&gt; &lt;button type="roll" name="roll_weapon" value="/roll @{WeaponStat}d10k3"&gt;&lt;/button&gt; You will only be able to use values from row 4. Thank you! Both issues resolved and working now! Sheet is really starting to take shape, and I've started working on spells now. Currently I'm trying to figure out how I can make a multiple line text area in a repeatable list thing. <a href="http://i.imgur.com/5LyiIrm.jpg" rel="nofollow">http://i.imgur.com/5LyiIrm.jpg</a> I'm also wondering how to change the look of the dice button. Would it be in this code? "button[type=roll].sheet-blank-roll-button::before, input[type=radio]:not(.sheet-tab):checked ~ input[type=radio] + span::before, .sheet-dots input[type=checkbox]:checked ~ input[type=radio] + span::before { content: ""; }" Aiming for something more like these: <a href="https://app.roll20.net/forum/post/1009540/still-more-sheet-building-issues#post-1011021" rel="nofollow">https://app.roll20.net/forum/post/1009540/still-more-sheet-building-issues#post-1011021</a>

Nick R. said: Currently I'm trying to figure out how I can make a multiple line text area in a repeatable list thing. <a href="http://i.imgur.com/5LyiIrm.jpg" rel="nofollow">http://i.imgur.com/5LyiIrm.jpg</a> Use &lt;textarea name="attr_attribute-name"&gt;&lt;/textarea&gt; instead of &lt;input type="text" name="attr_attribute-name" /&gt;. You may want to use CSS to modify the dimensions of the textarea. Nick R. said: I'm also wondering how to change the look of the dice button. Would it be in this code? "button[type=roll].sheet-blank-roll-button::before, input[type=radio]:not(.sheet-tab):checked ~ input[type=radio] + span::before, .sheet-dots input[type=checkbox]:checked ~ input[type=radio] + span::before { content: ""; }" Aiming for something more like these: <a href="https://app.roll20.net/forum/post/1009540/still-more-sheet-building-issues#post-1011021" rel="nofollow">https://app.roll20.net/forum/post/1009540/still-more-sheet-building-issues#post-1011021</a> Setting the button::before style to include content: "" will remove the d20 image that defaults on button[type=roll] elements. (You will likely wrestle with specificity, so I recommend doing the same thing as you've quoted: add a class to the button, and use button[type=roll].sheet-my-class::before .) Generally, styling a button works just like styling anything else, though.

Thanks! The textarea worked great. Still having issues with the buttons, but I have been working on actual bugs instead of UI niceties. How nice does a sheet have to be before it's released? I think I have most things working (finally got initiative under control), and I would love to get more widespread feedback before I begin working on version 2. (which currently will mostly be UI polish, the DND5 sheet has a bunch of ideas I want to steal) Can I upload a beta to GIT and have people start poking it and giving feedback?

I would like to express the joy of seeing my current favourite Setting & System getting its own character sheet! You rock!

I can't comment on Riley's criterion for accepting a sheet. At a guess , I'd say he probably just makes sure nothing explodes, as he's a busy guy and can't be familiar with every game system. (Consider: some of the fields on the oWoD sheets don't even save correctly.) If you don't include the json file, Riley won't even attempt to add it to the approved list of sheets (and I doubt he'll do much if any validation on it). You can use that fact to upload a "beta" version of the sheet to look at. Of course, you could also simply post a link to your own Git fork for people to peruse, rather than sending a pull request to Riley.

So something like this? <a href="https://github.com/PolarBruski/L5RRoll20" rel="nofollow">https://github.com/PolarBruski/L5RRoll20</a>

Will this sheet find its way to the Character Sheets Template any time soon? I'm planning to run an L5R campaign for my pals, and I'd really appreciate it.

I doubt it will since I'm quite busy atm, but I'm happy to send you a copy and/or walk you through setting it up for your campaign (you just need to copy/paste a few things, it's quite easy.)

Is there any update on your progress Nick?

is this completed yet?