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 04-22-2015, 05:00 AM
Revisia Tanyadjaja's Avatar
Revisia Tanyadjaja is offline
 
Join Date: Mar 2015
Posts: 11
Default

Continue Button Color (Shipping/Payment Details Pages) + Checkout Timeline Color


I'd like to change the color of my continue buttons, the one in my Shipping Details and Payment Details page. I also want to change the color of my Checkout timeline.

Screenshot for better understanding:



As you can see the items circled in red all off and do not match the rest of my CSS. Tried most of the existing solutions in the forums but nothing worked.

Website: http://sewnwithstyle.com
  #2  
Old 04-22-2015, 09:07 AM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by Revisia Tanyadjaja View Post
I'd like to change the color of my continue buttons, the one in my Shipping Details and Payment Details page. I also want to change the color of my Checkout timeline.

Screenshot for better understanding:



As you can see the items circled in red all off and do not match the rest of my CSS. Tried most of the existing solutions in the forums but nothing worked.

Website: http://sewnwithstyle.com
Hi,

There are various ways needed to customize Ecwid design. For some CSS rules you may only change one parameter to make it look perfect and sometimes a little more is needed.

Let me answer to you step-by-step so that you could achieve the desired result.

1. In order to change the “Continue” button on Checkout along with the “Buy now” buttons in Ecwid, you need to apply the following CSS rule to your currently active CSS theme in the Control Panel -> System Settings -> Design:

Code:
html#ecwid_html body#ecwid_body button.ecwid-AccentedButton {
  background-color: #efafcf;
  background-image: -webkit-linear-gradient(left, rgb(255, 178, 230) 0%, rgb(255, 189, 232) 4%, rgba(193, 147, 73, 0) 13%), -webkit-linear-gradient(right, rgb(249, 195, 244) 0%, rgb(249, 186, 245) 4%, rgba(193, 147, 73, 0) 13%), -webkit-linear-gradient(bottom, rgb(253, 172, 246) 0%, rgb(247, 190, 249) 17%, rgb(243, 204, 244) 18%, rgb(247, 173, 240) 73%, rgba(242, 190, 241, 0.8) 73%, rgba(252, 210, 251, 0.8) 100%) !important;
  box-shadow: 0 0 0 1px rgba(242, 102, 245, 0.7), 0 1px 0 rgb(247, 176, 249) inset !important;
}
As you may see, I have already made some changes so that it looked more suitable for your current customized theme making it pink like that:



However, you may always change the color parameters like this one: rgb(255, 178, 230) to match your website. You may find the necessary numbers to change the ones in brackets all across the web (here, for example: https://web.njit.edu/~kevin/rgb.txt.html)

2. Security lock icon.

Changing that icon would take a little more than just changing some parameters in a CSS code. If you want to have it in a different color you need to:
- Download the icon using the link which may be found using the “Inspect element” tool in Google Chrome, FireBug in Firefox and others
- Then you need to edit it in any image editor (Photoshop, GIMP, Paint.Net or else)
- Upload the image which you edited to any image hosting like Monosnap
- Copy the link to the image from Monosnap to this CSS rule and add it to your currently active custom CSS theme:

Code:
div.ecwid-AddressForm-secureLockIcon {
  background: rgba(255, 255, 255, 0) url(https://monosnap.com/file/XC3S0VUrIL53rCyo6KLQr3QZbueU6b.png);
}
To give a good example I have already changed the icon to make it pink as well and added the link to the rule above. So, when you apply this particular code to your CSS theme in Ecwid, you will see it like this:



3. Checkout breadcrumbs icons and links.

The round breadcrumbs icons require going through the same method as above (downloading and editing). The rule is the following:

Code:
div.ecwid-Checkout-BreadCrumbs-point-current {
  background-image: url(http://d3fi9i0jj23cau.cloudfront.net/gz/17.9-555-g8cf1668/icons_beige/checkout_point_current.png);
}
Download the image using the link in brackets, alter the image in an editor, upload the result to a file hosting and copy-paste the link from there back to the rule.

And to change the colors of the links there are three rules: the first is for the visited links, the second for the currently active link and the third is to change the links that are not yet visited:

Code:
div.ecwid-Checkout-BreadCrumbs-link-visited {
  color: #F720CA;
}

div.ecwid-Checkout-BreadCrumbs-link-current {
  color: #FDA1FC;
  border-bottom-color: #FAB2FF;
}

div.ecwid-Checkout-BreadCrumbs-link {
  color: #FFB0EF;
}
The color: parameter may be changed to get the color you want.

Try all that and feel free to ask if you have any more questions. We are always glad to help.
__________________
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
  #3  
Old 04-22-2015, 11:02 AM
Revisia Tanyadjaja's Avatar
Revisia Tanyadjaja Revisia Tanyadjaja is offline
 
Join Date: Mar 2015
Posts: 11
Default

This works perfectly. Thank you SO much!

One last question: How do I change the "My billing address is the same as shipping" portion?

  #4  
Old 04-22-2015, 11:02 AM
Revisia Tanyadjaja's Avatar
Revisia Tanyadjaja Revisia Tanyadjaja is offline
 
Join Date: Mar 2015
Posts: 11
Default

This works perfectly. Thank you SO much!

One last question: How do I change the "My billing address is the same as shipping" portion?

  #5  
Old 04-22-2015, 12:03 PM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by Revisia Tanyadjaja View Post
This works perfectly. Thank you SO much!

One last question: How do I change the "My billing address is the same as shipping" portion?

You are always welcome! Glad that it helped.

To change the "My billing address in the same as shipping" pseudo-button, apply this CSS rule to your active CSS theme as well:

Code:
.ecwid-responsive div.ecwid-PseudoButton {
border-color: #FF67E0;
background: linear-gradient(to bottom, #FF94E9 0%,#F8ACFD 100%);
}
In this rule I made it pink again like that:

__________________
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
checkout pages, checkout timeline, continue button, payment details, shipping details

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