Promising full store compliance lets look at the key rules broken in the last store design:

Externalised CSS

Oh yes, I am guilty so all the css will now be held within the design pages, which is a right pain if you have to update your css as every page would need to be changed. A step back in coding evolution from eBay…

Using eBay’s own ID or class based rules

OK, so again I manipulated eBays css id’s and classes. Changing them is their prerogative and I will steer clear and make up my own funky names for things. Prepare for the ridiculous.

Basically, the new store will be a nice HTML based frame with the eBay gunk in the middle. I will bust my buttons to make sure the category pages also have this frame so the design is not splash-psge-esq. If I have to jump backwards and not externalise CSS I’m not taking another giant leap backwards by splash paging.

I’ll leave the splash pages to marketing freaks.

I am going to go backwards on this one a little, providing the full code up front then working backwards and breaking it down step by step. I know there are hungry bunnies out there wanting their next eBay design project fix and my time is limited so I want to concentrate on the bulk of the task in hand.

I will update on Saturday with how far I have got. As always the code and crappy images I create will be all free free free, and I won’t even ask you to link back or credit. I would just like see your eBay shop for your take on the framework!

First list on the agenda was to get rid of those crazy ‘corner’ images for the promo boxes:

table#PromoListView table table img {
display: none;
}

but that also kills the promo box images (and the slider) so now I have to put back the bits I want:

table#PromoListView table table#Table3 img {
display: inline;
}

I still don’t have anything defined, and the default text of the box titles is just too pale, so I am going to pink it up:

#PromoListView tr td font
{
color:#FF00FF;
font-size:18px;
}

and I am going to make the item links in these promo boxes hot pink:

table#PromoListView a {
color:#FF00FF;
text-decoration:none;
}

then I shall encase each box with a border:
table#PromoListView {
border:1px #FFCCFF solid;
}

We have not changes the width or dimensions of the promo boxes but you would do this from the table#PromoListView section and using the !important tag. You can also add in backgrounds, images etc that have not been explored here.

Please as always read the disclaimer

The entire section looks like this:

/*Promo Boxes*/
/*hide ebay corner images*/
table#PromoListView table table img {
display: none;
}
/*correct the fact that the above kills the main image too*/
table#PromoListView table table#Table3 img {
display: inline;
}
/*item links*/
table#PromoListView a {
color:#FF00FF;
text-decoration:none;
}
/*box title text*/
#PromoListView tr td font
{
color:#FF00FF;
font-size:18px;
}
/*promo box border*/
table#PromoListView {
border:1px #FFCCFF solid;
}
/* -------- End -------- */

You can see the full css file here: eBay Store Design with CSS and to see the changes to my eBay store as we go along visit : http://stores.ebay.co.uk/Hairfreax

Next I shall sort out the shop search section, once I have found which table it corresponds too. Its seems to be avoiding me!

See what others have done with this information and while your at it buy from them!
http://stores.ebay.com/J-L-OUTDOOR-SUPPLY
http://stores.ebay.co.uk/Betterlifehealthcare
http://stores.ebay.it/TM-bazar

Edited to add:

If you want a background image for your store try the #paging id. This effects the background elements of your store. I will be getting down and dirty with the new compliance rules soon…