eBay New Stores Experience Promise

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!

Be Sociable, Share!

eBay Shop Design – Gallery Background Image

We looked at changing the gallery background using css but now we want to move on and replace it with an image.

The section is currently:
/* -------- Control Border on Gallery List -------- */
td.gallery
{
border:1px #FF00FF solid;
}
/* -------- End -------- */
/* -------- Control Background on Gallery List -------- */
td.gallery table td
{
background:#FFCCFF;
}
/* -------- End -------- */

Now we are going to replace it with:

td.gallery
{
width:360px;
height:130px;
background:url(http://www.kidsontalks.com/ebaybg.jpg) no-repeat !important;
}
/* making certain backgrounds transparent */
span.ebay table,
.pagecontainer table table table,
.pagecontainer table table tr,
.pagecontainer table td
{
background:transparent;
}

Notice that adding this section of code, the background to the promotion boxes/search box and the categories disappear (we shall deal with the promo boxes and search box in a later post) so to make sure you category background image stays in place replace:

td.category {
height:35px;
width:180px;
border-top:1px solid #FFCCFF;
background: url(http://www.kidsontalks.com/ebaybutton.jpg) no-repeat;
margin:5px;
}

with:

td.category {
height:35px;
width:180px;
border-top:1px solid #FFCCFF;
background: url(http://www.kidsontalks.com/ebaybutton.jpg) no-repeat !important;
margin:5px;
}

the !important tag tell eBay that your CSS change is WAY more important and should be obeyed at all costs.

I also added this nugget to add a nice border around my gallery:

table.ebItemlist
{
width:770px !important;
border-left:1px #FFCCFF solid;
border-right:1px #FFCCFF solid;
border-bottom:1px #FFCCFF solid;
}

Please as always read the disclaimer

Just to complete, the section now looks like:

/* -------- Control Gallery List -------- */
td.gallery
{
width:360px;
height:130px;
background:url(http://www.kidsontalks.com/ebaybg.jpg) no-repeat !important;
}
/* making certain backgrounds transparent */
span.ebay table,
.pagecontainer table table table,
.pagecontainer table table tr,
.pagecontainer table td
{
background:transparent;
}
/*Nice border around gallery*/
table.ebItemlist
{
width:770px !important;
border-left:1px #FFCCFF solid;
border-right:1px #FFCCFF solid;
border-bottom: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

Be Sociable, Share!

Placing a custom header in your eBay Shop

Lesson 5: Using a custom shop header.

You need to make sure you on on the ‘custom header only’ theme within eBay.
Go Back to wear you entered your style sheet information and place:

<img src="http://www.mysite.com/header.jpg" alt="eBay Header" />

You can put any kind of HTML in here to expand the header

Be Sociable, Share!

Controlling the page width of your eBay shop

Lesson Four: Controlling page width

Slip into your CSS file this code:

.pagecontainer
{
width:900px;
margin:10px auto 10px auto;
}

The margin section makes sure the shop is centred.

So, bet you are wondering what the css file looks like now? I didn’t want a coloured background to my store so this is what I have so far:

/* How to style your eBay shop using CSS by http://www.kidsontalks.com. This code is
totally free, why not check out the guide on my blog. Steal away, you can even sell it on
as there are no graphics involved.*/

/* -------- Control Page Width -------- */
.pagecontainer
{
width:900px;
margin:10px auto 10px auto;
}
/* -------- End -------- */

/* -------- Control Border on Gallery List -------- */
td.gallery
{
border:1px #FF00FF solid;
}
/* -------- End -------- */

/* -------- Control Background on Gallery List -------- */
td.gallery table td
{
background:#FFCCFF;
}
/* -------- End -------- */

Now your eBay store is starting to take shape. The next element to look at are controlling the header. Everyone loves a nice header for their eBay shop!

Be Sociable, Share!

eBay Shop Design – Playing with Nested Table Backgrounds

Lesson Three: Changing the backgrounds for the nested tables

Right now, let experiment to how many times we need to mention table, to get a coloured background in different sections! Try adding these snippets of code to your css file.


table
{
background:#C0C0C0;
}

Using table once just colours the entire background within your eBay shop, including outside your shop front. All the normal white background, all grey.


table table
{
background:#C0C0C0;
}

Using table twice, only fills the background of your eBay shop with colour, as well as the eBay header 🙁


table table table
{
background:#C0C0C0;
}

Ah! This now leaves out the eBay header, so just the shop elements are coloured. Nothing much happens for four ‘tables’ but with 5 mentions of table:


table table table table table
{
background:#C0C0C0;
}

the promotion boxes, shop page boxes and the background to the gallery is coloured.

Add a sixth table and only the promotion boxes are coloured.


table table table table table table
{
background:#C0C0C0;
}

Seven tables and only the top promotions boxes are coloured.


table table table table table table table
{
background:#C0C0C0;
}

That is as far as you can go!

The next post will be about centring your eBay shop and fixing the width to 800px.

Be Sociable, Share!

eBay Gallery View – Changing the background colours

Lesson Two: Changing the background colour of your gallery view.

eBay is designed using a series of nested tables, so in order to colour various bits of the design you need to make sure you have to mention the table or td definition the correct number of times to get the desired result. This is the snipet of CSS you can add to the previous file:

td.gallery table td
{
background:#FFCCFF;
}

This will generate the effect below:

ebaycss.jpg

 

 

Lesson three will look at more places to change the background colour in your ebay shop!

Be Sociable, Share!