[Doc]

hi,
i'm back with, maybe, simple bud noising problem with mini cart. i read a lot here in forum and that is testing result




i use this code in page:
<div style="background-image: url(/userfiles/image/bt-carrello.png); height: 57px; width: 230px;">
<script type="text/javascript" src="http://app.ecwid.com/script.js?217308"></script><script type="text/javascript">xMinicart("style=","layout=Mini"); </script></div>

and this css mod:

div.ecwid-minicart-mini {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
white-space: nowrap;
width: 230px;
height: 57px;
padding: 4px 9px;
left: 30px;
top: 10px;
}

div.ecwid-minicart-mini-rollover {
z-index: 20;
border: solid 1px #dae1e7;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
white-space: nowrap;
padding: 4px 9px;
left: 0px;
top: 0px;
background: transparent;
}


Idea?

[Kess]

Could you possibly provide the URL of the page I could reproduce the issue on?

Please also clarify what exactly result you would like to achieve. The picture provided displays two states of the Minicart icon - the empty one and the non-empty one. What exactly issue do you face with it?

[Doc]

Hi Kess,
the upper image are photoshopped. on top with hover image and below hover

here's website

http://www.tovagliette-alimentari.it/r/test

i need also to have cart embedded into page not in pop-up, i read knowledge but i didn't understand how do this

can you help me?

[Kess]

Do you mean you need Ecwid store embedded into the home page instead of the pop-up? If so, you need to add Product Browser widget to your home page. Please refer to the following article in our knowledge base for instructions:
http://kb.ecwid.com/w/page/15853260/...

If you would like the store to open on some other page (not the home page), you are welcome to use the following solution:
http://kb.ecwid.com/w/page/15853260/...

Please also clarify what is the expected cart icon behavior. What issue with it do you want to fix? It is the text overlapping? If so, what should be the correct look of the hovered icon?

[Doc]

Hi Kess,
mine issue is overlapping text. can i fix via custom css?

[Kess]

The origin of this problem is the transparent background or the rollover element. If you would have made its background color the same as the icon background color, there would have been no overlapping.

To correct the problem please try adding the following rules to the end of your custom CSS theme (Ecwid control panel -> ‘System settings’ tab -> Design -> CSS themes):

div.ecwid-minicart-mini-rollover {
background: white;
height: 30px;
border: 0 none;
}

#Minicart-1 {
position: relative;
}

div.ecwid-minicart-mini {
left: 10px;
top: 10px;
position: absolute;
}

Click "Save (Ctrl+S)".

The first rule sets the white background, that lest you place the rollover image above the inactive state of the cart image. It also sets the height, that fits the image size, and removes the border of the element displayed on rollover.

The second rule sets the element (Minicart-1) , the position of the minicart icon should be defined according to.

The third rule sets the absolute position of the minicart link.