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 07-13-2016, 04:14 PM
Rob Waller's Avatar
Rob Waller is offline
 
Join Date: Jan 2016
Posts: 19
Default


Hello, I am looking to change the colors of the Continue button that appears on the shipping details page and the Place Order button.

I Tried:

HTML Code:
/****************************
Change Place Order Button Color
****************************
***************************/

.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder {
 background: black;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:hover {
 background: #fcd51c;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:focus,
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:focus:hover {
 border-color: #fcd51c;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:active,
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:focus:active {
 background: #fcd51c;
}

/****************************
Change Continue Button Color
****************************
***************************/

.ecwid-btn ecwid-btn--primary ecwid-btn--continue {
 background: black;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:hover {
 background: #fcd51c;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:focus,
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:focus:hover {
 border-color: #fcd51c;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:active,
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:active {
 background: #fcd51c;
}
Any help is appreciated. Thank you!

Still looking for help here if anyone has a solution.

Last edited by Daria L.; 07-25-2016 at 03:39 PM.
  #2  
Old 07-25-2016, 03:58 PM
Daria L.'s Avatar
Daria L. Daria L. is offline
Ecwid Team
 
Join Date: May 2015
Posts: 558
Default

Quote:
Originally Posted by Rob Waller View Post
Hello, I am looking to change the colors of the Continue button that appears on the shipping details page and the Place Order button.

I Tried:

HTML Code:
/****************************
Change Place Order Button Color
****************************
***************************/

.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder {
 background: black;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:hover {
 background: #fcd51c;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:focus,
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:focus:hover {
 border-color: #fcd51c;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:active,
.ecwid-btn ecwid-btn--primary ecwid-btn--placeOrder:focus:active {
 background: #fcd51c;
}

/****************************
Change Continue Button Color
****************************
***************************/

.ecwid-btn ecwid-btn--primary ecwid-btn--continue {
 background: black;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:hover {
 background: #fcd51c;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:focus,
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:focus:hover {
 border-color: #fcd51c;
}
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:active,
.ecwid-btn ecwid-btn--primary ecwid-btn--continue:active {
 background: #fcd51c;
}
Any help is appreciated. Thank you!

Still looking for help here if anyone has a solution.
Hello Rob!

Sorry for keeping you waiting for a reply so long.

In order to change "Continue" button on the shipping page, please add the following code to your active CSS theme in Ecwid control panel>Settings>Design:

Code:
.ecwid button.ecwid-btn--continue {
 background-color: black;
   border-color: black;
}
.ecwid button.ecwid-btn--continue:hover {
 background-color: #fcd51c;
   border-color: #fcd51c;
}
.ecwid button.ecwid-btn--continue:focus {
 background-color: #fcd51c;
   border-color: #fcd51c;
}
.ecwid button.ecwid-btn--continue:focus:active {
 background-color: #fcd51c;
   border-color: y#fcd51c;
}
.ecwid button.ecwid-btn--bcontinue:focus:hover {
background-color: #fcd51c;
   border-color: #fcd51c;
}
In order to change "Place order" button, please use this code:

Code:
.ecwid .ecwid-btn--placeOrder {
 background: black;
}
.ecwid .ecwid-btn--placeOrder:hover {
 background: #fcd51c;
}
.ecwid .ecwid-btn--placeOrder:focus,
.ecwid .ecwid-btn--placeOrder:focus:hover {
 border-color: #fcd51c;
}
.ecwid .ecwid-btn--placeOrder:active,
.ecwid .ecwid-btn--placeOrder:focus:active {
 background: #fcd51c;
}
Don't forget to save the changes.

I have noticed, that you use our Business subscription. We have the Live Chat support service that is available for Business plan users. The chat icon is shown in the Ecwid control panel in the right upper corner, so you may also contact us via chat.

We also provide our Business customers with Phone and email support. So you can choose these options as well.

If any questions appear, please, don’t hesitate to ask. We’re very glad to help you!
__________________
Daria L.
Customer Care
Ecwid Help Portal
Ecwid Knowlegde Base
 
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

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