[Help] Worlds in Peril character sheet

I'm creating a Worlds in Peril (Superhero AW hack) character sheet but I'm having trouble playing around with the CSS of it. I have the HTML part down and it's arranged the way I like it but I need helping in making it feel like part of the game. I can't seem to get it to look all superhero like and need some help.

Here would be my recommendations to get started: Is there a sheet already existent that has the look/feel you're after? If so, crib that CSS Post a picture of what your sheet looks like currently, the html and a description of what you want the sheet to look like Those should give us a jumping off point to get started on recommendations. :)

G V. said: Here would be my recommendations to get started: Is there a sheet already existent that has the look/feel you're after? If so, crib that CSS Post a picture of what your sheet looks like currently, the html and a description of what you want the sheet to look like Those should give us a jumping off point to get started on recommendations. :) I will, thanks for the help!

Character sheet As for what I want it to look like:

There are likely others who will be along with greater ability than I have, but...here's a jsfiddle I put together to create a hex using just CSS that I think might help with what you're trying to do... <a href="http://jsfiddle.net/finderski/v9fb81yt/" rel="nofollow">http://jsfiddle.net/finderski/v9fb81yt/</a> That will at least show you how you can have short and angled lines surrounding an input box. &nbsp;The basic premise is that you have 6 different divs that overlap with one another. &nbsp;two that make a kind of close which defines the top, bottom, left and right edges, then the other make the angled sides. &nbsp;z-index is used to allow them to overlap and some of the div boxes are rotated 45 degrees. The hex color for the blue is:&nbsp;#0061a5 And the hex color for the gray is: #d5d5d5

The beveled corners are tricky, but doable. Here's an example of the first part of the sheet:&nbsp; <a href="http://jsfiddle.net/Lithl/bd2w8cb3/" rel="nofollow">http://jsfiddle.net/Lithl/bd2w8cb3/</a> This is actually utilizing three &nbsp;different techniques for achieving the beveled corners. The blue labeled sections each have a pair of empty &lt;div&gt; elements used to create the opposing corners The input fields use the clip-path property, which currently only functions in webkit browsers like Chrome. Even given that, number inputs don't work properly, so all the inputs are text fields. The area underneath "Working Towards" can't use the same cornering technique as the blue sections, because that technique doesn't allow for a border colored differently from the background. Instead, it has a grey border, a grey triangle in the bottom-right corner, and a slightly smaller white triangle on top of that.

Brian—I've said it before (at least in my head), but feel the need to say it again (publicly): You are freakin' AMAZING! :) Thanks for all your help with character sheets.

G V. said: There are likely others who will be along with greater ability than I have, but...here's a jsfiddle I put together to create a hex using just CSS that I think might help with what you're trying to do... <a href="http://jsfiddle.net/finderski/v9fb81yt/" rel="nofollow">http://jsfiddle.net/finderski/v9fb81yt/</a> That will at least show you how you can have short and angled lines surrounding an input box. &nbsp;The basic premise is that you have 6 different divs that overlap with one another. &nbsp;two that make a kind of close which defines the top, bottom, left and right edges, then the other make the angled sides. &nbsp;z-index is used to allow them to overlap and some of the div boxes are rotated 45 degrees. The hex color for the blue is:&nbsp;#0061a5 And the hex color for the gray is: #d5d5d5 G V. said: Brian—I've said it before (at least in my head), but feel the need to say it again (publicly): You are freakin' AMAZING! :) Thanks for all your help with character sheets. Thanks for your help! It looks really good! Exactly like I want it.

Brian said: The beveled corners are tricky, but doable. Here's an example of the first part of the sheet: <a href="http://jsfiddle.net/Lithl/bd2w8cb3/" rel="nofollow">http://jsfiddle.net/Lithl/bd2w8cb3/</a> This is actually utilizing three different techniques for achieving the beveled corners. The blue labeled sections each have a pair of empty &lt;div&gt; elements used to create the opposing corners The input fields use the clip-path property, which currently only functions in webkit browsers like Chrome. Even given that, number inputs don't work properly, so all the inputs are text fields. The area underneath "Working Towards" can't use the same cornering technique as the blue sections, because that technique doesn't allow for a border colored differently from the background. Instead, it has a grey border, a grey triangle in the bottom-right corner, and a slightly smaller white triangle on top of that. So, I added my own stuff to it, using your CSS and it came out great for what I wanted it. I have only a couple of questions: On one of the parts that I added, the color keeps staying black and I can't seem to change it. I'm looking at your CSS and I understand about 3/4 of it (lol) so I want to change the part about the Bonds, keeping the blue label with the beveled corners. Now, the thing is that it needs to be a list and it keeps expanding, depending on the player. I did this but, for every addition it needs there needs to be a separate number to it.&nbsp; Lastly, I know what you did with the transparency block, but I how do I make it go away (for the Bonds section) without making a mess of your work. Thank you for your help! Here's the updated link Here

The Ghost DM said: On one of the parts that I added, the color keeps staying black and I can't seem to change it. If you mean the Power Profile label, you had &lt;div calss="..."&gt; instead of &lt;div class="..."&gt;. You also have a number of labels written as "lable". (Also, the label tag only has any particular use if it contains a form element such as &lt;input&gt; or &lt;textarea&gt;, or if you use the "for" attribute for it, which doesn't play nice with Roll20's character sheet system.) The Ghost DM said: I'm looking at your CSS and I understand about 3/4 of it (lol) so I want to change the part about the Bonds, keeping the blue label with the beveled corners. Now, the thing is that it needs to be a list and it keeps expanding, depending on the player. I did this but, for every addition it needs there needs to be a separate number to it. You've got a repeating section, but wrapping it around a &lt;td&gt; doesn't work. Repeating sections don't work well as part of a table; you can put the entire fieldset inside of a table cell, but that doesn't leverage the table's capabilities much. Also, just to make certain you're aware, a repeating section will only actually repeat &nbsp;in the VTT itself. The preview window won't do it, nor will simply viewing the sheet in your browser. The Ghost DM said: Lastly, I know what you did with the transparency block, but I how do I make it go away (for the Bonds section) without making a mess of your work. Not entirely certain what you're talking about.

Brian said: The Ghost DM said: On one of the parts that I added, the color keeps staying black and I can't seem to change it. If you mean the Power Profile label, you had &lt;div calss="..."&gt; instead of &lt;div class="..."&gt;. You also have a number of labels written as "lable". (Also, the label tag only has any particular use if it contains a form element such as &lt;input&gt; or &lt;textarea&gt;, or if you use the "for" attribute for it, which doesn't play nice with Roll20's character sheet system.) The Ghost DM said: I'm looking at your CSS and I understand about 3/4 of it (lol) so I want to change the part about the Bonds, keeping the blue label with the beveled corners. Now, the thing is that it needs to be a list and it keeps expanding, depending on the player. I did this but, for every addition it needs there needs to be a separate number to it. You've got a repeating section, but wrapping it around a &lt;td&gt; doesn't work. Repeating sections don't work well as part of a table; you can put the entire fieldset inside of a table cell, but that doesn't leverage the table's capabilities much. Also, just to make certain you're aware, a repeating section will only actually repeat &nbsp;in the VTT itself. The preview window won't do it, nor will simply viewing the sheet in your browser. The Ghost DM said: Lastly, I know what you did with the transparency block, but I how do I make it go away (for the Bonds section) without making a mess of your work. Not entirely certain what you're talking about. I fixed it and just left it as a repeating section for the players to fill out, because it changes every session basically. That way they have more freedom to change it as they please, as the campaign continues on. Thank you very much for your help!