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 12-19-2013, 04:57 PM
Tancredi Leone's Avatar
Tancredi Leone is offline
Member
 
Join Date: Dec 2013
Posts: 34
Default

edit minicart icon + drag drop target area??


Hi,

just wanted to customize my cart and found plenty of documentation on how to change the image icon, however can't quite harness how to edit the size of the target area behind it, since my image is now smaller the drag drop area should reduce accordingly, I've been trying some different solutions, but it all seem to point towards the base css theme, any tips on how to sort this out?

I've enclosed a screenshot so you can see what I mean. My image is now 220X50px however the area behind it is still the same sizes specified in the main css.
Attached Images
File Type: png Screen Shot 2013-12-19 at 6.59.44 PM.png (522.4 KB, 206 views)
  #2  
Old 12-19-2013, 05:49 PM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by Tancredi Leone View Post
Hi,

just wanted to customize my cart and found plenty of documentation on how to change the image icon, however can't quite harness how to edit the size of the target area behind it, since my image is now smaller the drag drop area should reduce accordingly, I've been trying some different solutions, but it all seem to point towards the base css theme, any tips on how to sort this out?

I've enclosed a screenshot so you can see what I mean. My image is now 220X50px however the area behind it is still the same sizes specified in the main css.
Hello,

You can change the click area of the minicart by adding this code at the end of your custom CSS theme:

Code:
div.ecwid-minicart-clickArea {
  left: 60px;
  width: 40px;
  top: 35px;
  height: 40px;
}
Feel free to change the values as you need.
__________________
Liza P.
Customer Care
Ecwid Help Portal
  #3  
Old 12-21-2013, 11:03 AM
Tancredi Leone's Avatar
Tancredi Leone Tancredi Leone is offline
Member
 
Join Date: Dec 2013
Posts: 34
Default

thanks for replying, I've tried your solution but it doesn't seem to work for me, the target area still is the same sizes and i can't figure out how to make it fit in the right top corner.
  #4  
Old 12-24-2013, 09:32 AM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by Tancredi Leone View Post
thanks for replying, I've tried your solution but it doesn't seem to work for me, the target area still is the same sizes and i can't figure out how to make it fit in the right top corner.
Hello,

I've checked your store and as far as I can see you've changed the width and the height of the click area to 40px. In order to to change the position of the click area for it to match the red shopping bag icon, please, find the following code and add the values I marked green to it:

Code:
div.ecwid-minicart-clickArea {
  width: 40px;
  height: 40px;
  left: 20px;
  top: 7px;
}
Please, note that you can change these values to achieve exactly what you want.
__________________
Liza P.
Customer Care
Ecwid Help Portal
  #5  
Old 12-28-2013, 11:25 AM
Tancredi Leone's Avatar
Tancredi Leone Tancredi Leone is offline
Member
 
Join Date: Dec 2013
Posts: 34
Exclamation

Quote:
Originally Posted by Liza Savelyeva View Post
Hello,

I've checked your store and as far as I can see you've changed the width and the height of the click area to 40px. In order to to change the position of the click area for it to match the red shopping bag icon, please, find the following code and add the values I marked green to it:

Code:
div.ecwid-minicart-clickArea {
  width: 40px;
  height: 40px;
  left: 20px;
  top: 7px;
}
Please, note that you can change these values to achieve exactly what you want.


tried to add those properties to no avail, also having positions problems, perhaps this is also due to the image sizes since I want it to fit in the top right corner next to the menu items.

I've added this for the position Right top corner:



div.ecwid-minicart {
right: 0px !important;

top: 0px !important;

}

the bag is still on the left and also the click area is still same sizes, my actual shopping bag image size is 221x50 px, merry xmas to you!
  #6  
Old 02-07-2014, 02:05 PM
Tancredi Leone's Avatar
Tancredi Leone Tancredi Leone is offline
Member
 
Join Date: Dec 2013
Posts: 34
Default

After some messing with the above code I managed to get it in the wanted position, although the drag and drop feature does not work as it the bag seems hidden behind some other element, any suggestions? I wouldn't want to play around with the positioning again as right now is basically where I need it to be...
  #7  
Old 02-11-2014, 05:54 PM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by Tancredi Leone View Post
After some messing with the above code I managed to get it in the wanted position, although the drag and drop feature does not work as it the bag seems hidden behind some other element, any suggestions? I wouldn't want to play around with the positioning again as right now is basically where I need it to be...
Hello,

Please, post here the URL of the page where your Ecwid store is located and where you are applying these changes. Thank you in advance.
__________________
Liza P.
Customer Care
Ecwid Help Portal
  #8  
Old 02-12-2014, 10:12 AM
Tancredi Leone's Avatar
Tancredi Leone Tancredi Leone is offline
Member
 
Join Date: Dec 2013
Posts: 34
Exclamation shopping bag positioning + click area sizes

Quote:
Originally Posted by Liza Savelyeva View Post
Hello,

Please, post here the URL of the page where your Ecwid store is located and where you are applying these changes. Thank you in advance.
I'm working in development mode here, locally on my cpu however I've uploaded a demo version of the shop here

Thank you so much for your assistance, right now I tried again changing the click area to no avail.

Please let me know if you need further infos, the wanted features are the bag should be integrating inside the semi-transparent white bar on top right of the layout,(next to navigation items) right now as you can see the click area is warping the bar and creating the unwanted effect also the drag drop & shoppping bag caption should be inserted and aligned possibly horizontally together with the bag.

I also noticed that the shopping bag is not responsive is it possible to fix that?

Last edited by Tancredi Leone; 02-12-2014 at 10:27 AM.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
drag & drop, minicart widget, shopping bag

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