This is my journey as an E-commerce Consultant
Archive for April, 2008
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
Note on CSS eBay Store Design and eBay Site Interference Policy
Use of CSS to control your eBay shop might convene this policy, so always use with care.
Interference or attempted interference with eBay’s web site and/or operations using any software programme, routine or activity is a serious offence and is not permitted.
Members using the eBay web site may only modify or add content in those areas specifically designated for member use. All content must also abide by all other eBay policies. Designated member areas are:
- the description area of the View Item page.
- the reply box on the eBay discussion, chat and help boards.
- the members’ About Me page.
- the feedback comments area of the Feedback Forum.
- the bid box.
- the eBay email forwarding system text box (e.g. Ask Seller a Question, Contact eBay Member).
In no case may a member block, obscure, overwrite or modify any eBay-generated content or pages. All other site locations or components of eBay pages are strictly for eBay use.
Breaches of this policy may result in a range of actions, including:
- Listing cancellation
- Limits on account privileges
- Account suspension
- Forfeit of eBay fees on cancelled listings
- Loss of PowerSeller status
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!
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.
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:
Lesson three will look at more places to change the background colour in your ebay shop!
