eBay Shop and Listing Template Design

Love eBay design but stuck when it comes to doing it yourself? Checkout the next generation of eBay Design as provided by moi :)

This is a page to track where we are in our eBay Design series:

*NEW 2013 Responsive FREE eBay Item Template Design Series in progress*

Basic eBay Design Series 2013 Part 1
Basic eBay Design Series 2013 Part 2 – Code
Basic eBay Design Series 2013 Part 3 – Responsive design and eBay
Basic eBay Design Series 2013 Part 4 – Responsive Images

Please be patient as I have to mix in this series with PAID work!

Previous series:

This is where the CSS file is at the moment, copy and paste into notepad and rename ebay.css.

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

/* --------Category Section -------- */

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

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

td.category {
height:35px;
border-top:1px solid #FFCCFF;
background: url(http://www.kidsontalks.com/ebaybutton.jpg) no-repeat !important;
margin:5px;
}
/* -------- End -------- */
/* --------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 -------- */

The list of Lessons:

  1. eBay Shop Design for Beginners
  2. eBay Gallery View – Changing the background colours
  3. eBay Shop Design – Playing with Nested Table Backgrounds
  4. Controlling the page width of your eBay shop
  5. Placing a custom header in your eBay Shop
  6. eBay Shop Category Control with CSS
  7. eBay Shop Design – Gallery Background Image
  8. eBay Shop Design – Promotion Boxes

and our disclaimer : Use of CSS to control your eBay shop might convene the site interference policy , so always use with care.

 

Be Sociable, Share!

6 comments

Go to Top