[Naal Souq]

I can't change shopping bag icon to a shopping cart icon that i want. I have already tried all the css codes in various thread and guides that I have read. Please help me out, I am looking to change to something like this



css codes that I have tried:

div.ecwid-minicart {
background: transparent url(PATH_TO_YOUR_IMAGE) no-repeat;
}

div.ecwid-minicart-clickArea {
background: url('PATH_TO_YOUR_IMAGE')no-repeat;
​}

.ecwid div.ecwid-minicart-clickArea:after {
display: block;
height: 50px;
width: 50px;
position: absolute;
top: 5px;
left: 6px;
font-size: 1px;
background: url('PATH_TO_YOUR_IMAGE') no-repeat;
}

div.ecwid-minicart {
background-image: url('PATH_TO_YOUR_IMAGE');
}

Image Address: http://www.naalsouq.com/upload/cart.png

http://naalsouq.wixsite.com/jyot

[river]

Originally Posted by Naal Souq

I can't change shopping bag icon to a shopping cart icon that i want. I have already tried all the css codes in various thread and guides that I have read. Please help me out, I am looking to change to something like this



css codes that I have tried:

div.ecwid-minicart {
background: transparent url(PATH_TO_YOUR_IMAGE) no-repeat;
}

div.ecwid-minicart-clickArea {
background: url('PATH_TO_YOUR_IMAGE')no-repeat;
​}

.ecwid div.ecwid-minicart-clickArea:after {
display: block;
height: 50px;
width: 50px;
position: absolute;
top: 5px;
left: 6px;
font-size: 1px;
background: url('PATH_TO_YOUR_IMAGE') no-repeat;
}

div.ecwid-minicart {
background-image: url('PATH_TO_YOUR_IMAGE');
}

Image Address: http://www.naalsouq.com/upload/cart.png

http://naalsouq.wixsite.com/jyot

Hi Naal,

Ecwid Customer Care team here. Thanks for your post. I see that you also sent us an email with the same request, you can find a solution in my reply to that one.

For everyone else who might also struggle with the same thing, here are the codes that basically allow to change the Minicart widget anyhow by adding or changing parameters in them:

.ecwid-minicart {
 background: url("http://lamps.ecwid.com/~river/cartimage.png") no-repeat !important;
 background-size: 100px 100px !important;
 border: none !important;
}
.ecwid-minicart-caption {
    display: none
}
.ecwid-minicart-link {
    display: none;
}
.ecwid-minicart-clickArea {
    background: none !important;
    top: 0px !important;
    left: 0px !important;
    width: 150px !important;
    height: 150px !important
}
div.ecwid-minicart-counter {
    font-size: 34px !important;
    width: 50px !important;
    color: #FFF !important;
    margin-top: -10px !important;
    height: 40px !important;
    margin-left: 40px !important;
    padding-top: 11px !important;
    border-radius: 50px !important;
    background: rgba(130, 93, 35, 1) !important;
}

These codes would make the Minicart widget look like this:



A little explanation to the codes' functions:

.ecwid-minicart {
 background: url("http://lamps.ecwid.com/~river/cartimage.png") no-repeat !important;
 background-size: 100px 100px !important;
 border: none !important;
}

Relpaces the original white background with an image, sets the size for that image and removes the border around it.

.ecwid-minicart-caption {
    display: none
}
.ecwid-minicart-link {
    display: none;
}

These two hide the "Shopping Bag" title and "Open bag" link from the widget.

.ecwid-minicart-clickArea {
    background: none !important;
    top: 0px !important;
    left: 0px !important;
    width: 150px !important;
    height: 150px !important
}

Removes the original bag image. That image is set as a background for the clickable area of the Minicart.

It also makes the clickable area larger and makes it cover the whole widget.

div.ecwid-minicart-counter {
    font-size: 34px !important;
    width: 50px !important;
    color: #FFF !important;
    margin-top: -10px !important;
    height: 40px !important;
    margin-left: 40px !important;
    padding-top: 11px !important;
    border-radius: 50px !important;
    background: rgba(130, 93, 35, 1) !important;
}

This is to change the Counter in the Minicart, moving it to the right from the image and adjusting its looks.

Hope this helps. Feel free to ask if any more questions appear.

[iDistribute]

Hi, what does this last part of the code mean and how do I interpret it? I assume it's the colour of the minicart counter? How do I change it to a different colour? I have the code, but the brackets are confusing me

- background: rgba(130, 93, 35, 1)

[Wendy]

Originally Posted by iDistribute

Hi, what does this last part of the code mean and how do I interpret it? I assume it's the colour of the minicart counter? How do I change it to a different colour? I have the code, but the brackets are confusing me

- background: rgba(130, 93, 35, 1)

Hello!

This is Wendy from Ecwid team. Thanks a lot for getting in touch with us!

background: rgba(130, 93, 35, 1)

This line of code is responsible for the background color of the minicart counter.

rgba(130, 93, 35, 1) is a color code. If you'd like to change this color, you should update the color code. You will find a new color code here: http://www.color-hex.com/

For example, you'd like to apply this color:



In order to do it, you should update this line like this:

background: #7C9EE1

I hope you will find this helpful.

If you have other concerns, please feel free to write me back and it will be my pleasure to assist you further. Have a wonderful day!