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
