[fncuis]

Hi,

I'm trying to change the default missing image icon by modifying the following default CSS lines. I created a new custom CSS theme, dumped the two declarations into, changed the path of the URL, activated it, and saved it.

/* Placeholders for missing product or category images */
div.ecwid-noimage {
	background: transparent url(icons/noimage.gif) no-repeat scroll 0 0;
	height: 100px;
	width: 100px;
	margin: 0 auto;
}
div.ecwid-noimage-small {
	background: transparent url(icons/noimage-small.gif) no-repeat;
	height: 80px;
	width: 80px;
	margin: 0 auto;
}

With:

/* Placeholders for missing product or category images */
div.ecwid-noimage {
	background: transparent url(my/custom/image.gif) no-repeat scroll 0 0;
	height: 100px;
	width: 100px;
	margin: 0 auto;
}
div.ecwid-noimage-small {
	background: transparent url(my/custom/image-small.gif) no-repeat;
	height: 80px;
	width: 80px;
	margin: 0 auto;
}

But it is not working. I still see the path to the CDN http://images-cdn.ecwid.com/images/1.../126010738.jpg

Can someone assist?

[Eugene Rimmer]

Originally Posted by fncuis

Hi,

I'm trying to change the default missing image icon by modifying the following default CSS lines. I created a new custom CSS theme, dumped the two declarations into, changed the path of the URL, activated it, and saved it.

/* Placeholders for missing product or category images */
div.ecwid-noimage {
	background: transparent url(icons/noimage.gif) no-repeat scroll 0 0;
	height: 100px;
	width: 100px;
	margin: 0 auto;
}
div.ecwid-noimage-small {
	background: transparent url(icons/noimage-small.gif) no-repeat;
	height: 80px;
	width: 80px;
	margin: 0 auto;
}

With:

/* Placeholders for missing product or category images */
div.ecwid-noimage {
	background: transparent url(my/custom/image.gif) no-repeat scroll 0 0;
	height: 100px;
	width: 100px;
	margin: 0 auto;
}
div.ecwid-noimage-small {
	background: transparent url(my/custom/image-small.gif) no-repeat;
	height: 80px;
	width: 80px;
	margin: 0 auto;
}

But it is not working. I still see the path to the CDN http://images-cdn.ecwid.com/images/1.../126010738.jpg

Can someone assist?

The paths in CSS are relative to the location of the CSS file itself, not to the URL of your page. So with your code, browser tries to look for an image at my/custom/image.gif on our CDN server, and may not find it there of course, since you have no way to upload your custom images to our server.

You need to use full URLs in your CSS rules.

[fncuis]

Actually, I am using a fully qualified URL, as I did take that into consideration. I just didn't want to post the URL here in the forum.

My ECWID Id: 1373152

[Eugene Rimmer]

Originally Posted by fncuis

Actually, I am using a fully qualified URL, as I did take that into consideration. I just didn't want to post the URL here in the forum.

My ECWID Id: 1373152

As far as I can see, it's there in the store, perfectly working:



The only problem is that the actual image you are using is bigger than 100×100 or 80×80, so it just crops off, as it always happens with the backgrounds in CSS. So, you can either change the sizes of your image or change the sizing in the CSS to accomodate the actual image now.

[maf-us]

This might also be helpful if you don't want to do multiple sized images, you can use this CSS property to contain the background image:

background-size: contain;