The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 07-10-2013, 03:47 PM
fncuis's Avatar
fncuis is offline
Member
 
Join Date: Jan 2011
Posts: 43
Default

Change Missing Image Icons via CSS Not Working


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.

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

Code:
/* 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?
  #2  
Old 07-10-2013, 08:15 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Quote:
Originally Posted by fncuis View Post
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.

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

Code:
/* 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.
  #3  
Old 07-10-2013, 08:27 PM
fncuis's Avatar
fncuis fncuis is offline
Member
 
Join Date: Jan 2011
Posts: 43
Default

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
  #4  
Old 07-11-2013, 08:46 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Quote:
Originally Posted by fncuis View Post
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.
  #5  
Old 12-14-2015, 11:23 PM
maf-us's Avatar
maf-us maf-us is offline
 
Join Date: Oct 2015
Location: Nampa, ID
Posts: 1
Default

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:

Code:
background-size: contain;
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
change missing image, missing image

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:19 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.