Done my new eBay design mock ups!

OK, so I was a bit ambitious with exactly how much time I was going to be able to spend on the coding bit, but I got the designs done!

eBay Shop frame

eBay Listing Template Design

The actual coding part will come, I am slicing it up and coding it as we speak so hopefully I will get the time to play with the new stores experience soon and fill you all in on how to do it yourself within eBay guidelines and policies. As you can see I am not the ‘best designer’ in the world, but I will do for my small projects and illustrations.

Just updating on my series of eBay store/shop css to customise 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

Lesson 6: Shop Categories

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 -------- */

Lesson 7: 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;
}

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 -------- */

Watch out for site interference policy breaches in an eBay design techniques you use! You can keep up to date with the entire file at: http://kidsontalks.com/ebay-design/

They are lower, and you loose less to eBay:

Price From	Price To	Auction Listing Fee	Final Value Fee	Gallery Fee	Paypal %	Total Cost	Percentage Lost
£0.01	£0.99	£0.10	£0.07	£0.15	£0.23	£0.56	56.4%
£1.00	£1.99	£0.15	£0.15	£0.15	£0.27	£0.72	36.0%
£2.00	£2.99	£0.15	£0.22	£0.15	£0.30	£0.83	27.6%
£3.00	£3.99	£0.15	£0.30	£0.15	£0.34	£0.93	23.4%
£4.00	£4.99	£0.15	£0.37	£0.15	£0.37	£1.04	20.9%
£5.00	£5.99	£0.25	£0.45	£0.15	£0.40	£1.25	20.9%
£6.00	£6.99	£0.25	£0.52	£0.15	£0.44	£1.36	19.5%
£7.00	£7.99	£0.25	£0.60	£0.15	£0.47	£1.47	18.4%
£8.00	£8.99	£0.25	£0.67	£0.15	£0.51	£1.58	17.6%
£9.00	£9.99	£0.25	£0.75	£0.15	£0.54	£1.69	16.9%
£10.00	£10.99	£0.25	£0.82	£0.15	£0.57	£1.80	16.4%
£11.00	£11.99	£0.25	£0.90	£0.15	£0.61	£1.91	15.9%
£12.00	£12.99	£0.25	£0.97	£0.15	£0.64	£2.02	15.5%
£13.00	£13.99	£0.25	£1.05	£0.15	£0.68	£2.12	15.2%
£14.00	£14.99	£0.25	£1.12	£0.15	£0.71	£2.23	14.9%
£15.00	£15.99	£0.50	£1.20	£0.15	£0.74	£2.59	16.2%
£16.00	£16.99	£0.50	£1.27	£0.15	£0.78	£2.70	15.9%
£17.00	£17.99	£0.50	£1.35	£0.15	£0.81	£2.81	15.6%
£18.00	£18.99	£0.50	£1.42	£0.15	£0.85	£2.92	15.4%
£19.00	£19.99	£0.50	£1.50	£0.15	£0.88	£3.03	15.2%
£20.00	£20.99	£0.50	£1.57	£0.15	£0.91	£3.14	14.9%
£21.00	£21.99	£0.50	£1.65	£0.15	£0.95	£3.25	14.8%
£22.00	£22.99	£0.50	£1.72	£0.15	£0.98	£3.36	14.6%
£23.00	£23.99	£0.50	£1.80	£0.15	£1.02	£3.46	14.4%
£24.00	£24.99	£0.50	£1.87	£0.15	£1.05	£3.57	14.3%
£25.00	£25.99	£0.50	£1.95	£0.15	£1.08	£3.68	14.2%
£26.00	£26.99	£0.50	£2.02	£0.15	£1.12	£3.79	14.0%
£27.00	£27.99	£0.50	£2.10	£0.15	£1.15	£3.90	13.9%
£28.00	£28.99	£0.50	£2.17	£0.15	£1.19	£4.01	13.8%
£29.00	£29.99	£0.50	£2.25	£0.15	£1.22	£4.12	13.7%
£30.00	£30.99	£1.00	£2.30	£0.15	£1.25	£4.70	15.2%

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!

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:

 

 

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