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-06-2012, 10:57 PM
TonyasDynamicDesigns.com's Avatar
TonyasDynamicDesigns.com is offline
Webpartner
 
Join Date: May 2012
Location: Stafford, VA near Washington, DC, USA
Posts: 22
Thumbs up

***How can I make these CSS changes to the Ecwid Shopping Cart?***


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

Last edited by Tonya Becker-Haddadeen; 08-06-2012 at 11:35 PM.
  #2  
Old 08-08-2012, 10:29 AM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by Tonya Becker-Haddadeen View Post
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:
Code:
div.ecwid-minicart-counter { 
  color: #000000;
}
Quote:
2) How do I change the LINK COLOR from light blue to another color?
You should use following code in your custom CSS theme:
Code:
.ecwid a, 
.ecwid a:active, 
.ecwid a:visited,
.ecwid a:hover { 
  color: #000000 !important;
}
Change #000000 to another as you needed.

Quote:
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:
Code:
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.

Quote:
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:
Code:
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;
}
Quote:
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:
Code:
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.

Quote:
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

Quote:
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?

Quote:
8) How do I change the LIGHT GREY TEXT on the "YOUR SHOPPING CART" page?
You should use this code:
Code:
div.ecwid-productBrowser-cart-hint,
td.ecwid-productBrowser-cart-itemsTable-headerCell {
  color: #000000 
}
Quote:
9) How do I change the LIGHT BLUE TEXT and GREY TEXT on the "CHECKOUT" page?
You should use this code in your theme:
Code:
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:
Code:
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
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
The Following 3 Users Say Thank You to Maya For This Useful Post:
Cara Gordley (05-31-2015), Tactical Surveillance (09-03-2012), TonyasDynamicDesigns.com (08-29-2012)
  #3  
Old 08-29-2012, 07:56 PM
TonyasDynamicDesigns.com's Avatar
TonyasDynamicDesigns.com TonyasDynamicDesigns.com is offline
Webpartner
 
Join Date: May 2012
Location: Stafford, VA near Washington, DC, USA
Posts: 22
Exclamation Some of the css code did not work.

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.


Last edited by Tonya Becker-Haddadeen; 08-29-2012 at 08:23 PM.
  #4  
Old 09-02-2012, 07:11 AM
TonyasDynamicDesigns.com's Avatar
TonyasDynamicDesigns.com TonyasDynamicDesigns.com is offline
Webpartner
 
Join Date: May 2012
Location: Stafford, VA near Washington, DC, USA
Posts: 22
Default

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

Thank you so much,
Tonya
  #5  
Old 10-04-2012, 01:01 PM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by Tonya Becker-Haddadeen View Post
/* 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:
Code:
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;
}
Quote:
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:
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.

Quote:
I want to change the color of the text for "Shopping Cart" to be in black.
Please, use following code:
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
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
The Following User Says Thank You to Maya For This Useful Post:
  #6  
Old 10-04-2012, 09:01 PM
BobC's Avatar
BobC BobC is offline
Senior Member
 
Join Date: May 2012
Location: Strathpeffer, Scotland
Posts: 163
Default

@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.
The Following User Says Thank You to BobC For This Useful Post:
Qetzal (10-08-2012)
  #7  
Old 10-08-2012, 05:01 AM
TonyasDynamicDesigns.com's Avatar
TonyasDynamicDesigns.com TonyasDynamicDesigns.com is offline
Webpartner
 
Join Date: May 2012
Location: Stafford, VA near Washington, DC, USA
Posts: 22
Default

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.
__________________
(I am the Website Designer at TonyasDynamicDesigns.)

Last edited by Tonya Becker-Haddadeen; 10-08-2012 at 05:16 AM.
  #8  
Old 10-08-2012, 06:11 AM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Quote:
Originally Posted by Tonya Becker-Haddadeen View Post
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.
  #9  
Old 10-08-2012, 10:01 AM
TonyasDynamicDesigns.com's Avatar
TonyasDynamicDesigns.com TonyasDynamicDesigns.com is offline
Webpartner
 
Join Date: May 2012
Location: Stafford, VA near Washington, DC, USA
Posts: 22
Smile

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. =)
__________________
(I am the Website Designer at TonyasDynamicDesigns.)
  #10  
Old 10-08-2012, 05:31 PM
BobC's Avatar
BobC BobC is offline
Senior Member
 
Join Date: May 2012
Location: Strathpeffer, Scotland
Posts: 163
Default

"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.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
change cart, change cart image, change color, change font

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