[TonyasDynamicDesigns.com]

Hi everyone,

I am custom designing an Ecwid Shopping Cart for 1 of my clients
at Paradise Water Fountains. Everything is going great.

However, I need to know how can I customize the
following as shown in the screenshot below:

1) How do I change the color of the NUMBER on the shopping cart icon to be in black?

2) How do I change the LINK COLOR from light blue to another color?

3) How do I change the SMALL SHOPPING BAG ICON on the far right hand side?

4) When I click on the links on the cart, the font is changing to another font.
How do I make the font to stop changing when you click on a link?

5) How do I change the color of the CHECK MARK when items are added to the cart?

6) I also want to know how can I change the LEFT and RIGHT ARROWS that you
can click on to view more products on the far right hand side?

7) How do I change the BACKGROUND COLOR on the POP UP BOX on the "YOUR SHOPPING CART" page that is in light blue?

8) How do I change the LIGHT GREY TEXT on the "YOUR SHOPPING CART" page?

9) How do I change the LIGHT BLUE TEXT and GREY TEXT on the "CHECKOUT" page?

Please refer to the screen shot below as to what I need help with.


Thank you so much
for your help,
Tonya

[Maya]

Originally Posted by Tonya Becker-Haddadeen

Hi everyone,

I am custom designing an Ecwid Shopping Cart for 1 of my clients
at Paradise Water Fountains. Everything is going great.

However, I need to know how can I customize the
following as shown in the screenshot below:

1) How do I change the color of the NUMBER on the shopping cart icon to be in black?

You should use following code in your custom CSS theme:

div.ecwid-minicart-counter { 
  color: #000000;
}

2) How do I change the LINK COLOR from light blue to another color?

You should use following code in your custom CSS theme:

.ecwid a, 
.ecwid a:active, 
.ecwid a:visited,
.ecwid a:hover { 
  color: #000000 !important;
}

Change #000000 to another as you needed.

3) How do I change the SMALL SHOPPING BAG ICON on the far right hand side?

You should use following code in your custom CSS theme:

div.ecwid-productBrowser-details-inTheBag {
    background: url("http://yoursite.com/icons/bag.png") no-repeat scroll left center transparent;

change http://yoursite.com/icons/bag.png to the real absolute path, where new icon is stored.

4) When I click on the links on the cart, the font is changing to another font.
How do I make the font to stop changing when you click on a link?

You should use following code in your custom CSS theme:

tr.ecwid-productBrowser-cart-itemsTable-row-selected,
/* workaround for IE7: the background-color does not work properly for TR */
td.ecwid-productBrowser-cart-itemsTable-cell-selected {
    background-color: transparent;
}

5) How do I change the color of the CHECK MARK when items are added to the cart?

You should use following code in your custom CSS theme:

div.ecwid-productBrowser-productsGrid-productTopFragment-inTheBag div.ecwid-productBrowser-productsGrid-inTheBagTick {
    background: url("http://yoursite.com/icons/tick.png") no-repeat scroll center center transparent;
}

change http://yoursite.com/icons/tick.png to the real absolute path, where new icon is stored.

6) I also want to know how can I change the LEFT and RIGHT ARROWS that you
can click on to view more products on the far right hand side?

Please, refer to this article for details: http://kb.ecwid.com/w/page/51403894/...e%20storefront

7) How do I change the BACKGROUND COLOR on the POP UP BOX on the "YOUR SHOPPING CART" page that is in light blue?

Could you show me on the screenshot what exactly do you want to change?

8) How do I change the LIGHT GREY TEXT on the "YOUR SHOPPING CART" page?

You should use this code:

div.ecwid-productBrowser-cart-hint,
td.ecwid-productBrowser-cart-itemsTable-headerCell {
  color: #000000 
}

9) How do I change the LIGHT BLUE TEXT and GREY TEXT on the "CHECKOUT" page?

You should use this code in your theme:

div.ecwid-Checkout-blockTitle, 
table.ecwid-Checkout-blockTitle div.gwt-Label, 
table.ecwid-Checkout-blockTitle div.gwt-HTML {
  color: #000000;
}

This code will help you to change font color for text below "Create password" title:

div.ecwid-Checkout-PasswordBlock-tip {
    color: #000000;
}

Also, please, refer to this page for details how to customize your Ecwid store and how to find the element, which should be change: http://kb.ecwid.com/w/page/15853257/CSS%20Faq

[TonyasDynamicDesigns.com]

Thank you Maya for all of your help and time.
The website shopping cart that I am customizing
is located at the link http://www.paradisewaterfountains.com/
I am using the latest version of Google Chrome.

Some of the css code that you gave me in my
previous post does not work such as the following:

/* Change the shopping bag icon on the far right hand side */
div.ecwid-productBrowser-details-inTheBag {
background: url("http://www.paradisewaterfountains.com/images/small-website-shopping-cart.png") no-repeat scroll left center transparent;


/* How to make the links stop changing when you click on them */
tr.ecwid-productBrowser-cart-itemsTable-row-selected,
/* workaround for IE7: the background-color does not work properly for TR */
td.ecwid-productBrowser-cart-itemsTable-cell-selected {
background-color: transparent;
}

/* Change the checkmark */
div.ecwid-productBrowser-productsGrid-productTopFragment-inTheBag div.ecwid-productBrowser-productsGrid-inTheBagTick {
background: url("http://yoursite.com/icons/tick.png") no-repeat scroll center center transparent;
}

When I tried to change the checkmark and shopping cart image, the background color changed back to the default blue color instead of the light brown color that I have on the cart.


There are also some more changes that I would like to make to the cart such as the following
listed below: (Please refer to the screen shot shown below.)

1. I want to change the color of the text for "Shopping Cart" to be in black.

2. I want to change the blue default background color to be a different color.
I also want to change the actual price and quantity to be in ARIAL.
I also want to change the cart's text "price, qty, subtotal" to be in ARIAL.

3. I want the link to be in ARIAL.
Right now, the link is changing to the default font when I click on the link.

4. I want the text link to be in the ARIAL font.

5. I want to know how to change the color of the bar and also how to make
the bar to disappear if I do not want it to show.

6. I want to change the color of the text links.

7. I want to change the color of the text links.

8. On the TABLE VIEW, I want to change the background color of the table.

9. On the TABLE VIEW, I want to change the color and font for all of the text links.

10. I want to change the font to ARIAL.

11. I want to change the font to ARIAL.

[TonyasDynamicDesigns.com]

I would greatly appreciate someone's help to my previous post.

Thank you so much,
Tonya

[Maya]

Originally Posted by Tonya Becker-Haddadeen

/* Change the shopping bag icon on the far right hand side */
div.ecwid-productBrowser-details-inTheBag {
background: url("http://www.paradisewaterfountains.com/images/small-website-shopping-cart.png") no-repeat scroll left center transparent;

Please, try to use this code instead:

div.ecwid-productBrowser-details-inTheBag {
background: url("http://www.paradisewaterfountains.com/images/small-website-shopping-cart.png") no-repeat scroll left center transparent;
}
tr.ecwid-productBrowser-cart-itemsTable-row-selected,
/* workaround for IE7: the background-color does not work properly for TR */
td.ecwid-productBrowser-cart-itemsTable-cell-selected {
background-color: transparent;
}

/* Change the checkmark */
div.ecwid-productBrowser-productsGrid-productTopFragment-inTheBag div.ecwid-productBrowser-productsGrid-inTheBagTick {
background: url("http://yoursite.com/icons/tick.png") no-repeat scroll center center transparent;
}

When I tried to change the checkmark and shopping cart image, the background color changed back to the default blue color instead of the light brown color that I have on the cart.

I'm sorry for this. Most probably, it has been caused by the error in the first code. The thing is that I have forgotten to put "}" symbol in the end of the first code:

div.ecwid-productBrowser-details-inTheBag {
background: url("http://www.paradisewaterfountains.com/images/small-website-shopping-cart.png") no-repeat scroll left center transparent;

and as a result, all CSS rules placed below doesn't work at all. Please, try to use the code, which I have provided now. It should solve the problem.

I want to change the color of the text for "Shopping Cart" to be in black.

Please, use following code:

div.ecwid-minicart-caption {
   color: #000000;
}

Please, refer to this article for detailed descripton how to customize your Ecwid store: http://kb.ecwid.com/w/page/15853257/CSS%20Faq

[BobC]

@Tonya, I would strongly recommend that you use Firebug which is an addon for Firefox which is available from http://getfirebug.com. It will help you to see what CSS rules are being used for any element on your page and enable you to try changes on-the fly. It is one of the 3 or 4 web development tools that I would never want to be without. It would have answered most if not all of your questions.

[TonyasDynamicDesigns.com]

Thanks everyone for your posts. I greatly appreciate it.

I use Google Chome to inspect the CSS and it works just great for me.
I do not think that Fire Bug can answer every single question that I asked
because Ecwid named their own CSS Code and sometimes it is just better
to ask them for help with their css code than trying to guess at it.

[Eugene Rimmer]

Originally Posted by Tonya Becker-Haddadeen

Thanks everyone for your posts. I greatly appreciate it.

I use Google Chome to inspect the CSS and it works just great for me.
I do not think that Fire Bug can answer every single question that I asked
because Ecwid named their own CSS Code and sometimes it is just better
to ask them for help with their css code than trying to guess at it.

You will be surprised, but we don't know the class names by heart and just use the very same advised tools.

[TonyasDynamicDesigns.com]

Yes, I am not surprised at all because another Ecwid staff
recommended Google Chrome to inspect the CSS code
and that is why I only use Google Chrome and also recommend it.
It is the easiest to use because there is nothing to download.

When I am stumped on something, I always ask someone at Ecwid
because you all are the most knowledgeable about your own CSS code
just like I am the most knowledgeable about the CSS code that I write
if you know what I mean. =)

[BobC]

"Ecwid named their own CSS Code and sometimes it is just better
to ask them for help with their css code than trying to guess at it. "

With Firebug there is no guessing involved. The whole point of a tool like Firebug is that you don't have to guess what the CSS rules are. It shows exactly what rules, properties and values that are being used together with their names, and it allows you to try changes on the fly. It really is very useful.