Posts tagged free ebay design

eBay New Stores Experience Promise

1161 days
by in eBay

Right then, so my mind is in tip top condition for Catalyst with respects to the latest and greatest developments in eBay store design I am finally this weekend going to convert that Hairfreax PSD into a matching store frame on the new stores experience.

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!

eBay Shop Design Lesson 8 – Promotion Boxes

1423 days
by in eBay, Web Mastering

As I rubbished the promo boxes with the last CSS changes I thought I should get back to them ASAP.

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…

Lesson 6: eBay Shop Category Control with CSS

1441 days
by in eBay, Web Mastering

OK, I did promise ebay javascript, but I wanted to do a little more on eBay Shop CSS.

So I want to give my store categories a pink background:

table#StoreCategories {
background-color:#FFCCFF;
}

and say then, I want to have the links in a different pink:

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

then I want to space out the categories and give them a pink line spacing:

td.category {
height:35px;
border-top:1px solid #FF00FF;
}

then I feel silly about only having borders at the top and change it to:

td.category {
height:35px;
border:1px solid #FF00FF;
}

These eBay shop design series are just to illustrate what CSS elements you can manipulate in your eBay shop front. We will move onto adding graphics to replace your eBay shop categories soon enough.

Ok, ok…just slip this code in so the whole section looks like this:


/*Category Section*/
table#StoreCategories {
background-color:#FFCCFF;
}

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

td.category {
height:35px;
border-top:1px solid #FF00FF;
/*New Bit*/
background: url(http://www.kidsontalks.com/ebaybutton.jpg) no-repeat;
}
/* -------- End -------- */

Site Interference Policy Disclaimer

Go to Top