Kryptronic Software Support Forum

I did make some adjustments (margins, border spacing, padding, background colors, etc) to the indicated table categories but nothing changed. I did the changes in td.cptbl_cat and then in table.cptbl_cat but I had no luck. I changed the background color to gray (#333333 i think). What I'd like to see is a gray space in between the 4 cells of the table. So the cells itself containing the category photo and the category description should remain black, but the space in between them - gray (like the background of the site)

This is what I have currently in all.css ( I did not save the changes - this is the original code including the product display section). Any ideas?

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Category List Display Tables        | */
/* +------------------------------------------------------------+ */

table.cptbl_cat {
     color: inherit;
     background-color: #000000;
     margin: 0px 0px 10px 0px;
     border-spacing: 3px;
     width: 100%;
     }

tr.cptbl_cat {
     color: inherit;
     background-color: inherit;
     }

td.cptbl_cat {
     color: inherit;
     background-color: inherit;
     padding: 4px 4px 2px 4px;
/*     border: 1px solid #36586F; */
     vertical-align: top;
     }

td.cptbl_cat_blank {
     color: inherit;
     background-color: inherit;
     display: none;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Product List Display Tables         | */
/* +------------------------------------------------------------+ */

table.cptbl_prod {
     color: inherit;
     background-color: inherit;
     margin: 0px;
     border-spacing: 1px;
     width: 100%;
     }

tr.cptbl_prod {
     color: inherit;
     background-color: inherit;
     }

td.cptbl_prod {
     color: inherit;
     background-color: #000000;
     padding: 4px 3px 4px 4px;
     vertical-align: top;
     border-bottom: 1px dotted #999999;
     }

/* --- ZIPSKINS we add an 'a' class to control the title size and colour -- */

td.cptbl_prod a {
     color: #CCCCCC;
     font-size: 14px;
     }

td.cptbl_prod_blank {
     color: inherit;
     background-color: inherit;
     display: none;
     }

Last edited by OutcastGirls (09-14-2009 09:20:04)

I figured it out although this is not what I had in mind... this only places a gray border around the cell.

First, I used what you suggested and added a few things:

#skin_content .cptbl_cat .cptbl_cat {
color: inherit;
background-color: inherit;
border: 2px solid #333333;
padding: 8px 4px 0px 8px;
margin: 0px 0px 0px 0px;

}


That works fine but then when I looked at the " td.cptbl_cat" noticed that there is already a border color but for some reason didn't show in the page:


td.cptbl_cat {
     color: inherit;
     background-color: inherit;
     padding: 0px 0px 0px 0px;
/*     border: 1px solid #333333; */
     vertical-align: top;
     }

And then I got rid of the */ /* which obviously is used to hide things so I got the border... but again, this is not what I wanted but I guess it's close enough...

Thanks!

P.S. And keep in mind that I'm not a website developer and I know nothing about CSS or html

Last edited by OutcastGirls (09-15-2009 13:59:48)