Need Help With CSS for my 40K Kill Team character sheets

Hey Guys! Noticed there were no Kill Team character sheets floating around yet...so I "made" one.  It's almost usable, except that I need tips on how to format the sheet so the layout makes sense...here's a screen shot of what it currently looks like  and what it should look like . Here's my html code . I'm thinking I need to use CSS to clean this up? Super confused...thanks in advance!

Leigh N. said: Here's my html code . I'm thinking I need to use CSS to clean this up? Super confused...thanks in advance! That link didn't go anywhere. And yes, CSS is used to enhance layout for sheets. Have you looked at how other sheets have been done, and what they contain?

CSS can be very confusing, but its what you need. As Andreas says, your html file link isnt working, but I can say you've made a good start. The html layout is nice and clean, so it will be a bit laborious, but it should be possible to make it look at least a bit more like the second pic.

sorry about that, forgot my github account's been acting funny..here's screenshots: part 1 part 2 part 3 I'm not really aiming to make this thing look all gussied up and pretty, just functional tbh.  Is that possible with html?  Or do I need to teach myself CSS as well? I've looked at some examples of character sheets, but it's a bit beyond me still to say the least....I was hoping some of the fine folks on these forums that I frequent would be able to help out?

<b>     NAME     M     WS     BS     S     T     W     A     LD     SV </b> <p>     <input type="text" name="attr_character_name" />     <input type="number" name="attr_movement" value="0" />     <input type="number" name="attr_weaponskill" value="0" />     <input type="number" name="attr_ballisticskill" value="0" />     <input type="number" name="attr_strength" value="0" />     <input type="number" name="attr_toughness" value="0" />     <input type="number" name="attr_wounds" value="0" />     <input type="number" name="attr_attacks" value="0" />     <input type="number" name="attr_leadership" value="0" />     <input type="number" name="attr_save" value="0" /> </p> <b>     WEAPON     RANGE     TYPE     S     AP     D     ABILITIES </b> <fieldset class="repeating_attacks">     <input type="text" name="attr_attackname" />     <input type="number" name="attr_attackrange" value="0" />     <select name="attr_attacktype" class="attacktype">      <option value="Assault">Assault</option>     <option value="Grenade">Grenade</option>     <option value="Heavy">Heavy</option>     <option value="Pistol">Pistol</option>     <option value="Rapid Fire">Rapid Fire</option>     <option value="Melee">Melee</option>     <input type="number" name="attr_attackstrength" value="0" />     <input type="number" name="attr_attackap" value="0" />     <input type="number" name="attr_damage" value="0" />     <input type="text" name="attr_attackability" /> </fieldset> <br> <b>     ABILITY     EFFECT </b> <fieldset class="repeating_abilities">     <input type="text" name="attr_abilityname" />     <input type="text" name="attr_abilityeffect" /> </fieldset> <br> <b>     SPECIALISM </b> <fieldset class="repeating_specialism">     <input type="text" name="attr_specialismname" />     <input type="text" name="attr_specialismeffect" /> </fieldset> <b>     DEMEANOR </b> <fieldset class="repeating_demeanor">     <input type="text" name="attr_demeanorname" />     <input type="text" name="attr_demeanoreffect" /> </fieldset> <br> <b>     EXPERIENCE </b> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <b>     FLESH WOUNDS </b> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <b>     CONVALESCENCE </b> <input type="checkbox"> <b>     NEW RECRUIT </b> <input type="checkbox">

I cleaned up the code using div, that seemed to help a lot: update My next question is how do I go about shrinking the size of the number inputs, and placing the attribute field names (like name, move, ws, etc) into position without having to resort to using periods?  Still can't understand how to reference the different parts of the html for css, and how to position things using css.

Can you show the html?

sure, here's the updated version: <div style="font-family:courier;background-color:orange;color:black;padding:3px;">     <b>         NAME........................MOVE...WS....BS.....S......T.....W.....A.....LD....SV     </b> </div> <div>     <input type="text" name="attr_character_name" />     <input type="number" name="attr_movement" value="0" />     <input type="number" name="attr_weaponskill" value="0" />     <input type="number" name="attr_ballisticskill" value="0" />     <input type="number" name="attr_strength" value="0" />     <input type="number" name="attr_toughness" value="0" />     <input type="number" name="attr_wounds" value="0" />     <input type="number" name="attr_attacks" value="0" />     <input type="number" name="attr_leadership" value="0" />     <input type="number" name="attr_save" value="0" /> </div> <br> <div style="font-family:courier;background-color:orange;color:black;padding:3px;">     <b>         WEAPON.....................RANGE..TYPE..........................S.....AP.....D...ABILITIES     </b> </div> <div>     <fieldset class="repeating_attacks">         <input type="text" name="attr_attackname" />         <input type="number" name="attr_attackrange" value="0" />         <select name="attr_attacktype" class="attacktype">          <option value="Assault">Assault</option>         <option value="Grenade">Grenade</option>         <option value="Heavy">Heavy</option>         <option value="Pistol">Pistol</option>         <option value="Rapid Fire">Rapid Fire</option>         <option value="Melee">Melee</option>         <input type="number" name="attr_attackstrength" value="0" />         <input type="number" name="attr_attackap" value="0" />         <input type="number" name="attr_damage" value="0" />         <input type="text" name="attr_attackability" />     </fieldset> </div> <br> <div style="font-family:courier;background-color:orange;color:black;padding:3px;">     <b>         ABILITY.....................EFFECT     </b> </div> <div>     <fieldset class="repeating_abilities">         <input type="text" name="attr_abilityname" />         <input type="text" name="attr_abilityeffect" />     </fieldset> </div> <br> <div style="font-family:courier;background-color:orange;color:black;padding:3px;">     <b>         SPECIALISM     </b> </div> <div>     <fieldset class="repeating_specialism">         <input type="text" name="attr_specialismname" />         <input type="text" name="attr_specialismeffect" />     </fieldset> </div> <br> <div style="font-family:courier;background-color:orange;color:black;padding:3px;">     <b>         DEMEANOR     </b> </div> <div>     <fieldset class="repeating_demeanor">         <input type="text" name="attr_demeanorname" />         <input type="text" name="attr_demeanoreffect" />     </fieldset> </div> <br> <div style="font-family:courier;background-color:orange;color:black;padding:3px;">     <b>         EXPERIENCE     </b>     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <b>         | FLESH WOUNDS     </b>     <input type="checkbox">     <input type="checkbox">     <input type="checkbox">     <b>         | CONVALESCENCE     </b>     <input type="checkbox">     <b>         | NEW RECRUIT     </b>     <input type="checkbox"> </div>

Disclaimer:  I am fairly ignorant, and most of what I know comes from being too stubborn to quit on rewriting an existing sheet for my own use. With that said, I have been steadily improving my sheet and what follows is just some basic stuff I have learned from what I have gone through.  First, you have 10 columns, so I put a blank line in the html to show the row line break.  That is something I had to do for my own sanity.  If you have many rows, it is hard to find a specific row item if you can't easily find the row breaks.  That is because when you specify rows (in this case 10) in css, it will just keep throwing things into that many columns until it runs out of items.  If I had put in 21 entries, the last would show up under the name text box.  If you need a blank spot in a row, you can throw in a spot filler in html like: <div class='space-holder'></div> The entries I used for the text are header entries, so already make the text bold.  The number indicates the size of header.  I reference the class in the css to make the background yellow.  You can use html color code to put any color there you want.  You can set the css to automatically stretch/shrink cells, but I have taken to setting widths (possibly a bad habit on my part) because I like things to keep their spacing.  As far as I can tell, the following things are true when messing with input fields for a character sheet: 1.  An input field will make a text input if you use a custom type, so it doesn't have to be type="text".  This allows you to use custom labels to reference in css. 2.  A number field (type="number") can't have the width altered, will ignore grid column width, and will overlap the next column to the right. 3.  A text field will work fine for numbers, you just don't have the little up and down arrows. <div class='stats-grid-container' > <h4 class='statlabel' >Name</h4> <h4 class='statlabel' >Move</h4> <h4 class='statlabel' >W.S.</h4> <h4 class='statlabel' >B.S.</h4> <h4 class='statlabel' >S.</h4> <h4 class='statlabel' >T.</h4> <h4 class='statlabel' >W.</h4> <h4 class='statlabel' >A.</h4> <h4 class='statlabel' >L.D.</h4> <h4 class='statlabel' >S.V.</h4> <input class='name' type='text' value='' name='attr_character_name' /> <input class='stats' type='text' value='0' name='attr_movement' /> <input class='stats' type='text' value='0' name='attr_weaponskill' /> <input class='stats' type='text' value='0' name='attr_ballisticskill' /> <input class='stats' type='text' value='0' name='attr_strength' /> <input class='stats' type='text' value='0' name='attr_toughness' /> <input class='stats' type='text' value='0' name='attr_wounds' /> <input class='stats' type='text' value='0' name='attr_attacks' /> <input class='stats' type='text' value='0' name='attr_leadership' /> <input class='stats' type='text' value='0' name='attr_save' /> </div> .sheet-stats-grid-container{ display: grid; grid-template-columns: 213px 42px 42px 42px 42px 42px 42px 42px 42px 42px } .sheet-statlabel{ background: yellow; text-align: center; } .sheet-stats{ width: 40px; } I'll try to upload a screenshot in a bit. I made a test game, and this is that row on a character sheet, complete with the Roll20 randomly generated name (gotta love those...).  Most everything else you want to do is a spin off of that.  Repeating sections are done in a similar way.  Figure out how many columns you need, write your html with enough class/type references to do what you need in css, set up the css grid size, and then set anything you need within.  You can even set a grid within one of the grid cells if you need.  I mention that, because you may eventually find some of your stats will need 2 boxes, one for current and one for max with some sort of divider in between.

kraynic- I can't tell you how much help that was, THANK YOUUUUUU!!! I think I get the css now.....I use classes to create something for the css to handle, right? makes way more sense now. Any idea on how to use images, either as a background for the character sheet, or for icons?  I think the wiki said it was a bad idea to use an image host to reference them, so what do I do instead?

You would just expand out your html to have another layer surrounding the rest of your sheet that could be referenced by the css.  Something like: <div class='back-panel'> <div class='stats-grid-container' > <h4 class='statlabel' >Name</h4> <h4 class='statlabel' >Move</h4> <h4 class='statlabel' >W.S.</h4> <h4 class='statlabel' >B.S.</h4> <h4 class='statlabel' >S.</h4> <h4 class='statlabel' >T.</h4> <h4 class='statlabel' >W.</h4> <h4 class='statlabel' >A.</h4> <h4 class='statlabel' >L.D.</h4> <h4 class='statlabel' >S.V.</h4> <input class='name' type='text' value='' name='attr_character_name' /> <input class='stats' type='text' value='0' name='attr_movement' /> <input class='stats' type='text' value='0' name='attr_weaponskill' /> <input class='stats' type='text' value='0' name='attr_ballisticskill' /> <input class='stats' type='text' value='0' name='attr_strength' /> <input class='stats' type='text' value='0' name='attr_toughness' /> <input class='stats' type='text' value='0' name='attr_wounds' /> <input class='stats' type='text' value='0' name='attr_attacks' /> <input class='stats' type='text' value='0' name='attr_leadership' /> <input class='stats' type='text' value='0' name='attr_save' /> </div> </div> .sheet-back-panel{ width: auto; background: blue; } .sheet-stats-grid-container{ display: grid; grid-template-columns: 213px 42px 42px 42px 42px 42px 42px 42px 42px 42px } .sheet-statlabel{ background: yellow; text-align: center; } .sheet-stats{ width: 40px; } The "width: auto;" allows the background to use the full display width of the character sheet and expand/contract if you resize the sheet window. As far as a background image goes, if you intend to let others use the sheet, I would recommend just using a color, because that won't break until something changes about how html and css are written/utilized to make it break.  The image will break if anything happens to where it is hosted, sharing rules are changed by the host, and probably a bunch of other factors I'm not thinking of. I haven't used an image, so haven't forced myself to learn how.  I know there are a lot of sheets that use background images (even plain things like parchment), so I expect you could find a sheet or 2 on github to steal ideas from.  If you haven't visited there, you can find it HERE.

Great example code, Kraynic.

GiGs said: Great example code, Kraynic. Thanks!  I was halfway thinking you would correct something I was doing, but since I have been working on my sheet and had this stuff on my mind, I figured I would give answering a question like this a go.

Leigh N. said: kraynic- I can't tell you how much help that was, THANK YOUUUUUU!!! I think I get the css now.....I use classes to create something for the css to handle, right? makes way more sense now. Any idea on how to use images, either as a background for the character sheet, or for icons?  I think the wiki said it was a bad idea to use an image host to reference them, so what do I do instead? If you're sheet is for your own use, dont worry about using an image host like imgur. That'll be fine.  You can set a background for the character sheet with something like .charsheet {    background-image :  url("internet link goes here") ; } One thing to be aware of: with very few exceptions (like charsheet) your css class names must start with .sheet- Roll20 adds sheet- to the start of any classes listed in the html. For instance in Kraynics code, in the html he has <h4 class='statlabel' >Name</h4> and in the css he has .sheet-statlabel{ Don't forget to add the sheet- in the CSS. Roll20 will ignore the class without it, and you'll lose hours trying to figure out why your css isnt working (speaking from personal pain). 

Kraynic said: GiGs said: Great example code, Kraynic. Thanks!  I was halfway thinking you would correct something I was doing, but since I have been working on my sheet and had this stuff on my mind, I figured I would give answering a question like this a go. Haha, CSS is one area where I'm still a relative beginner, and it's often trial and error for me. You did well!

thanks again for all the good tips and looks guys, muchly appreciated I did want to share this sheet with the roll20 community when I finished it, figured why not. if I have relative success with this I wanted to bang one out for Frostgrave, that's why I wanted to know about using an image for the background. I am having trouble with the dropdown list screwing with my format for the next section on weapons: screenshot <div class='stats-grid-container' > <h4 class='statlabel' >Name</h4> <h4 class='statlabel' >Move</h4> <h4 class='statlabel' >WS</h4> <h4 class='statlabel' >BS</h4> <h4 class='statlabel' >S</h4> <h4 class='statlabel' >T</h4> <h4 class='statlabel' >W</h4> <h4 class='statlabel' >A</h4> <h4 class='statlabel' >Ld</h4> <h4 class='statlabel' >Sv</h4> <input class='name' type='text' value='' name='attr_character_name' /> <input class='stats' type='text' value='0' name='attr_movement' /> <input class='stats' type='text' value='0' name='attr_weaponskill' /> <input class='stats' type='text' value='0' name='attr_ballisticskill' /> <input class='stats' type='text' value='0' name='attr_strength' /> <input class='stats' type='text' value='0' name='attr_toughness' /> <input class='stats' type='text' value='0' name='attr_wounds' /> <input class='stats' type='text' value='0' name='attr_attacks' /> <input class='stats' type='text' value='0' name='attr_leadership' /> <input class='stats' type='text' value='0' name='attr_save' /> </div> <br> <div class='space-holder'></div> <div class='weapon-grid-container' > <h4 class='statlabel' >Weapon</h4> <h4 class='statlabel' >Range</h4> <h4 class='statlabel' >Type</h4> <h4 class='statlabel' >S</h4> <h4 class='statlabel' >AP</h4> <h4 class='statlabel' >D</h4> <h4 class='statlabel' >Abilities</h4> <fieldset class="repeating_weapon"> <input class='weapon' type='text' value='' name='attr_weaponname' /> <input class='weapon' type='text' value='0' name='attr_weaponrange' /> <input class='weapon' select name="attr_weapontype"> <option value="Assault">Assault</option> <option value="Grenade">Grenade</option> <option value="Heavy">Heavy</option> <option value="Pistol">Pistol</option> <option value="Rapid Fire">Rapid Fire</option> <option value="Melee">Melee</option> <input class='weapon' type='text' value='0' name='attr_weaponstrength' /> <input class='weapon' type='text' value='0' name='attr_weaponap' /> <input class='weapon' type='text' value='0' name='attr_weapondamage' /> <input class='weapon' type='text' value='' name='attr_weaponability' /> </fieldset> </div> .sheet-stats-grid-container{ display: grid; grid-template-columns: 213px 42px 42px 42px 42px 42px 42px 42px 42px 42px } .sheet-statlabel{ background: orange; text-align: center; font-family:courier; } .sheet-stats{ width: 40px; } .sheet-weapon-grid-container{ display: grid; grid-template-columns: 213px 42px 42px 42px 42px 42px 42px } .sheet-weapon{ width: 40px; }

I'm guessing you are referring to this bit which has slightly incorrect syntax:         <input class='weapon' select name="attr_weapontype"> <option value="Assault">Assault</option> <option value="Grenade">Grenade</option> <option value="Heavy">Heavy</option> <option value="Pistol">Pistol</option> <option value="Rapid Fire">Rapid Fire</option> <option value="Melee">Melee</option> A dropdown is not an input, it is a select, and needs a start and an end, so it should look like this         <select class='weapon' name="attr_weapontype">      <option value="Assault">Assault</option>      <option value="Grenade">Grenade</option>     <option value="Heavy">Heavy</option>      <option value="Pistol">Pistol</option>      <option value="Rapid Fire">Rapid Fire</option>     <option value="Melee">Melee</option>         </select> The indentation there isnt necessary, but helps keep things clear.

To give you something that will at least display right, notice that I am using the same grid twice.  Once for the label, closing that div, and then referencing it again in the repeating section.  Also, watch your widths.  Drop down selection lists are not something that seem to be readily alterable either (and mess with row height), so I cut them from my sheet.  It originally only had one anyway. <div class='stats-grid-container' > <h4 class='statlabel' >Name</h4> <h4 class='statlabel' >Move</h4> <h4 class='statlabel' >WS</h4> <h4 class='statlabel' >BS</h4> <h4 class='statlabel' >S</h4> <h4 class='statlabel' >T</h4> <h4 class='statlabel' >W</h4> <h4 class='statlabel' >A</h4> <h4 class='statlabel' >Ld</h4> <h4 class='statlabel' >Sv</h4> <input class='name' type='text' value='' name='attr_character_name' /> <input class='stats' type='text' value='0' name='attr_movement' /> <input class='stats' type='text' value='0' name='attr_weaponskill' /> <input class='stats' type='text' value='0' name='attr_ballisticskill' /> <input class='stats' type='text' value='0' name='attr_strength' /> <input class='stats' type='text' value='0' name='attr_toughness' /> <input class='stats' type='text' value='0' name='attr_wounds' /> <input class='stats' type='text' value='0' name='attr_attacks' /> <input class='stats' type='text' value='0' name='attr_leadership' /> <input class='stats' type='text' value='0' name='attr_save' /> </div> <br> <div class='weapon-panel' > <div class='weapon-grid-container' > <h4 class='statlabel' >Weapon</h4> <h4 class='statlabel' >Range</h4> <h4 class='statlabel' >Type</h4> <h4 class='statlabel' >S</h4> <h4 class='statlabel' >AP</h4> <h4 class='statlabel' >D</h4> <h4 class='statlabel' >Abilities</h4> </div> <fieldset class="repeating_weapon"> <div class='weapon-grid-container' > <input class='weapon-name' type='text' value='' name='attr_weaponname' /> <input class='weapon' type='text' value='0' name='attr_weaponrange' /> <select class='weapon-select' type='text' value='' name="attr_weapontype" > <option value="">Choose One</option> <option value="Assault">Assault</option> <option value="Grenade">Grenade</option> <option value="Heavy">Heavy</option> <option value="Pistol">Pistol</option> <option value="Rapid Fire">Rapid Fire</option> <option value="Melee">Melee</option> </select> <input class='weapon' type='text' value='0' name='attr_weaponstrength' /> <input class='weapon' type='text' value='0' name='attr_weaponap' /> <input class='weapon' type='text' value='0' name='attr_weapondamage' /> <input class='weapon' type='text' value='' name='attr_weaponability' /> </div> </fieldset> </div> .sheet-stats-grid-container{ display: grid; grid-template-columns: 213px 42px 42px 42px 42px 42px 42px 42px 42px 42px } .sheet-statlabel{ background: orange; text-align: center; font-family:courier; } .sheet-stats{ width: 40px; } .sheet-weapon-grid-container{ display: grid; grid-template-columns: 213px 42px 221px 42px 42px 42px 42px } .sheet-weapon{ width: 40px; } If you dump the drop down select and make your players type in something, you get the nice even row height again.  I'll also introduce you to the placeholder option. <div class='stats-grid-container' > <h4 class='statlabel' >Name</h4> <h4 class='statlabel' >Move</h4> <h4 class='statlabel' >WS</h4> <h4 class='statlabel' >BS</h4> <h4 class='statlabel' >S</h4> <h4 class='statlabel' >T</h4> <h4 class='statlabel' >W</h4> <h4 class='statlabel' >A</h4> <h4 class='statlabel' >Ld</h4> <h4 class='statlabel' >Sv</h4> <input class='name' type='text' value='' name='attr_character_name' /> <input class='stats' type='text' value='0' name='attr_movement' /> <input class='stats' type='text' value='0' name='attr_weaponskill' /> <input class='stats' type='text' value='0' name='attr_ballisticskill' /> <input class='stats' type='text' value='0' name='attr_strength' /> <input class='stats' type='text' value='0' name='attr_toughness' /> <input class='stats' type='text' value='0' name='attr_wounds' /> <input class='stats' type='text' value='0' name='attr_attacks' /> <input class='stats' type='text' value='0' name='attr_leadership' /> <input class='stats' type='text' value='0' name='attr_save' /> </div> <br> <div class='weapon-panel' > <div class='weapon-grid-container' > <h4 class='statlabel' >Weapon</h4> <h4 class='statlabel' >Range</h4> <h4 class='statlabel' >Type</h4> <h4 class='statlabel' >S</h4> <h4 class='statlabel' >AP</h4> <h4 class='statlabel' >D</h4> <h4 class='statlabel' >Abilities</h4> </div> <fieldset class="repeating_weapon"> <div class='weapon-grid-container' > <input class='weapon-name' type='text' value='' name='attr_weaponname' placeholder='Weapon Name' /> <input class='weapon' type='text' value='0' name='attr_weaponrange' /> <input class='weapon-type' type='text' value='' name="attr_weapontype" placeholder='Type of Weapon' /> <input class='weapon' type='text' value='0' name='attr_weaponstrength' /> <input class='weapon' type='text' value='0' name='attr_weaponap' /> <input class='weapon' type='text' value='0' name='attr_weapondamage' /> <input class='weapon' type='text' value='' name='attr_weaponability' /> </div> </fieldset> </div> .sheet-stats-grid-container{ display: grid; grid-template-columns: 213px 42px 42px 42px 42px 42px 42px 42px 42px 42px } .sheet-statlabel{ background: orange; text-align: center; font-family:courier; } .sheet-stats{ width: 40px; } .sheet-weapon-grid-container{ display: grid; grid-template-columns: 213px 42px 152px 42px 42px 42px 42px } .sheet-weapon{ width: 40px; } .sheet-weapon-type{ width: 150px; } I'm fairly sure you need the type of weapon box to be larger than just the number inputs, so I gave it a separate class to reference for css.  You may want to do something similar with abilities, so that it won't be hanging out of your background.  If abilities is going to have much info, you may want to consider dropping the abilities header (and the grid to 6 columns), changing the input to a text area on a second input row, using a placeholder to internally label it for abilities, and telling css to use all 6 columns for the text area.

Thanks kraynic and gigs for helping the baby take his first steps! this all makes way more sense to me now

You should be able to get dropdowns to line up, but they are tricky and do need a bit of finessing. Targeting them with specific css like select.sheet-weapon {      /* some stuff here */ } and fiddling with margins and other details can move them around. It hink on one sheet i t was easier to use input.sheet-weapon {      /* some stuff here */ } and fiddle with the inputs positions to get them to match the select. But selects are fiddly and i can understand not wanting to deal with them. But they are really convenient for players, and if the attribute is text and used in calculations or sheet workers, its much better to use a select to restrict players ability to mess things up with typos. If the attribute is just for display or reference, and isnt used in any calculations or sheet workers, you don't need them.

cool! finished the version 1 now just to playtest it in a few games to see how it runs, what tweaks need to be made. thanks again everyone!

oh, almost forgot...when you check the checkboxes for experience, wounds etc they disappear after reloading the page....is that an inherent property with that object, or do I need to add a lil something to keep checkboxes ticked between sessions?

It's hard to tell without seeing your code, but the most likely issue is you havent given the checkbox an attribute name to store its current state.   <input type="checkbox" name="attr_something" value="1"> Give it a name, which must start with attr_. The value is optional, but I prefer to use it. The value is what the attribute becomes when the box is checked; when its unchecked, it always equals zero.