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 08-24-2011, 02:06 PM
Helena Hulten's Avatar
Helena Hulten is offline
Junior Member
 
Join Date: Aug 2011
Posts: 15
Default

Custom CSS image treatment won't work properly


Hey!

I want to have some help from you if it is possible.

My site has a image treatment that is like this:
HTML Code:
   border: 1px solid #555555; 
   padding: 3px;
   -moz-box-shadow: #999999 2px 2px 2px;
   -webkit-box-shadow: #999999 2px 2px 2px;
   margin: 3px 3px 3px 3px;
(example can be seen here: http://www.funnybunny.se/resource/em...-buying-guide/ )

I have tried to add it to the css to the shop, like this:

HTML Code:
.ecwid-productBrowser-productsGrid-productTopFragment img, 
.ecwid-productBrowser-details-thumbnail img, 
.ecwid-productBrowser-subcategories-mainTable img, 
div.ecwid-noimage {
 border: 1px solid #555555;  !important;
 padding: 3px; !important;
 -moz-box-shadow: #999999 2px 2px 2px; !important;
 -webkit-box-shadow: #999999 2px 2px 2px; !important;
 margin: 3px 3px 3px 3px; !important;
}
(I got the suggestion of the identifiers from this forum)

But it is not working properly everywhere.

On the product page it looks "best" out of them all. But the border of one side is hidden.
http://www.funnybunny.se/store/#ecwi...roduct=6106898
But the small thumbnails on same page is no good, only the shadow, no padding ,no border .

On the category thumbnails page:
http://www.funnybunny.se/store/#ecwi...=addedTimeDesc
It looks like the padding is ok, the shadow is ok but there's no black border. :/

If you have help to fix these I would be happy!
I tried to follow the suggestions here http://www.ecwid.com/forums/showthread.php?t=5238 but it did not help me so much.

(I am working with the css now so nevermind the odd ugliness of other stuff)

Thank you for reading!

Last edited by Qetzal; 08-26-2011 at 02:22 PM.
  #2  
Old 08-25-2011, 02:45 AM
Maristany's Avatar
Maristany Maristany is offline
Senior Member
 
Join Date: Dec 2009
Posts: 419
Default

Hi Helena,
There's a syntax error in your code:
Code:
border: 1px solid #555555; !important;
Some clues:
Code:
.ecwid-productBrowser-productsGrid-productTopFragment img, 
.ecwid-productBrowser-details-thumbnail img, 
.ecwid-productBrowser-subcategories-mainTable img, 
div.ecwid-noimage {
    border: 1px solid #555 !important;
    padding: 3px;
    -moz-box-shadow: #999999 2px 2px 2px;
    -webkit-box-shadow: #999999 2px 2px 2px;
    margin:  3px;
}
div.ecwid-productBrowser-details-GalleryPanel-imageContainer {
    border: none;
    margin: 6px; 
}
div.ecwid-productBrowser-details-GalleryPanel-imageContainer img {
    border: 1px solid #555;
    padding: 3px; 
}
Hope this helps
  #3  
Old 08-25-2011, 11:48 AM
Helena Hulten's Avatar
Helena Hulten Helena Hulten is offline
Junior Member
 
Join Date: Aug 2011
Posts: 15
Default

Maristany,

Thank you so much for your help. So helpful.
I had to add the !important here, wanted to tell so if someone else want to use this solution. Have to add the important because the page itself use a css code that overrides. The code should be like this instead.

HTML Code:
div.ecwid-productBrowser-details-GalleryPanel-imageContainer {
    border: none;
    margin: 6px [I]!important[/I]; 
}
I only have one small problem now, that is the right side border is hidden off on the product page. If you can help me with this one I will be very very thankful!

Thank you again, I am happy there are so helpful people here!

Last edited by Qetzal; 08-26-2011 at 02:23 PM.
  #4  
Old 08-26-2011, 12:47 AM
Maristany's Avatar
Maristany Maristany is offline
Senior Member
 
Join Date: Dec 2009
Posts: 419
Default

Glad to help.
Quote:
Have to add the important because the page itself use a css code that overrides.
Uhmm, just noticed that you have duplicated the base theme and added your custom code mostly on top of this copy. Problem is that, as the custom theme is like an addition to the base theme and, say, the last instruction is followed, now your store css file looks like:

1/3. Base margin: 2px;
2/3. Your code (custom theme) margin: 6px !important;
3/3. Base copy (custom theme) margin: 2px;

To fix that you could add your code to the bottom of the custom theme, or replace with it the code that already exist (3/3), or better, create a custom theme and add only your code.

For the border, try this code:
Code:
.ecwid-productBrowser-details-thumbnail img {
    margin: 0;
}
Or, to show all the shadow and if your images will be always the same size:
Code:
.ecwid-productBrowser-details-thumbnail img {
    height: 320px !important;
    width: 320px !important;
}

Last edited by Maristany; 08-26-2011 at 10:20 AM.
  #5  
Old 08-26-2011, 05:27 AM
Helena Hulten's Avatar
Helena Hulten Helena Hulten is offline
Junior Member
 
Join Date: Aug 2011
Posts: 15
Default

Of course that's no good..
I duplicated the code to make things easier for me when editing... but of course not best idea... I thought of this in yesterday and said to myself that I will purge the code of repeats after I am done. But now I have done the purge.

However I still have the problem with missing right border on the big picture. :/
http://www.funnybunny.se/store/#ecwi...roduct=6106898
  #6  
Old 08-26-2011, 12:02 PM
Maristany's Avatar
Maristany Maristany is offline
Senior Member
 
Join Date: Dec 2009
Posts: 419
Default

Quote:
Originally Posted by Helena Hultén View Post
I duplicated the code to make things easier for me when editing...
Yes, that's what I thought. I did the same months ago and until now can find bits of that code in my theme lol. It's still a mess...

Quote:
However I still have the problem with missing right border on the big picture. :/
http://www.funnybunny.se/store/#ecwi...roduct=6106898
Sorry I wrote margin:none by mistake in the code I suggested. Amended. The margin:0 might help and the fixed image size looks better but, well, it fixes your images to 1 size. If the code doesn't work, keep it in your theme and I'll try to find what's wrong.
  #7  
Old 08-26-2011, 07:32 PM
Helena Hulten's Avatar
Helena Hulten Helena Hulten is offline
Junior Member
 
Join Date: Aug 2011
Posts: 15
Default

Quote:
Originally Posted by Maristany View Post
Yes, that's what I thought. I did the same months ago and until now can find bits of that code in my theme lol. It's still a mess...
Replying quick here now. I used a file comparison and compared two files. So I deleted everything (but of course still keeping the code language/formatting proper) that is same. (used WinMerge software)
Kind of opposite of the software's markings but still a way.

I think I will use the unmerged back again until I am finished just as planned.. Because it is easier after all. haha!

Thank you so much for your help btw. I will come back later with the result. Just came home from the cinema now.

EDIT: back again, and the first code snipped worked. Good! THANK YOU!!!!

Last edited by Helena Hultén; 08-26-2011 at 10:10 PM.
  #8  
Old 08-28-2011, 01:29 AM
Maristany's Avatar
Maristany Maristany is offline
Senior Member
 
Join Date: Dec 2009
Posts: 419
Default

Great! You're very welcome
Quote:
I used a file comparison and compared two files.
That sounds good... I'll give a try. Thank you! And nice site and stuff btw. I really like that kind of things that have been given much attention to detail.
  #9  
Old 08-29-2011, 03:53 AM
Lareieli's Avatar
Lareieli Lareieli is offline
Junior Member
 
Join Date: Aug 2011
Posts: 13
Default

Beautiful site Helena!
  #10  
Old 08-29-2011, 11:29 AM
Helena Hulten's Avatar
Helena Hulten Helena Hulten is offline
Junior Member
 
Join Date: Aug 2011
Posts: 15
Default

Thank you!
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
css image border problem

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 11:14 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.