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 12-01-2015, 02:43 AM
joe jeczen1's Avatar
joe jeczen1 is offline
 
Join Date: Nov 2015
Posts: 7
Default

Continue Shopping Button CSS not working?


Hi,

I'm using the standard CSS provided here https://help.ecwid.com/customer/port...hopping-button

I've added the CSS to the standard CSS copy.

It doesn't seem to work at all, can anyone tell me what I'm missing?https://sunglassespeople.com


Thanks,
~Joe
  #2  
Old 12-01-2015, 05:02 PM
Daria Sh.'s Avatar
Daria Sh. Daria Sh. is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 767
Default

Quote:
Originally Posted by joe jeczen1 View Post
Hi,

I'm using the standard CSS provided here https://help.ecwid.com/customer/port...hopping-button

I've added the CSS to the standard CSS copy.

It doesn't seem to work at all, can anyone tell me what I'm missing?https://sunglassespeople.com


Thanks,
~Joe
Hi Joe,

Thank you for contacting us.

I have checked the code you added to the CSS Theme of your store. The code doesn't work because you haven't replaced this part: (icons/continue_shopping.png) with the real absolute path to the new image for "Continue shopping" button.

If you want to change "Continue shopping" button with your own custom one, you should first upload them somewhere so that they could be accessed at the direct link and then put the link instead of (icons/continue_shopping.png) The link may look like this http://www.example.com/images/my_cus...e_shopping.png

Also, I'm glad to let you know that we have recently released new buttons! You can enable them in Control panel > Settings > What's new > Improved appearance of storefront buttons. Click "Enable" and the new buttons will appear in your storefront. You can also see the new buttons in our demo store here http://www.ecwid.com/demo

If you need any further help, feel free to write back.
__________________
Daria
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 12-01-2015, 08:44 PM
joe jeczen1's Avatar
joe jeczen1 joe jeczen1 is offline
 
Join Date: Nov 2015
Posts: 7
Default

Thanks Daria,

Can't believe I missed that! I fixed it up, but it still isn't responding. I double checked my link by copy and pasting it. Here's the link to the button https://www.sunglassespeople.com/continue_shopping.png

Also, I love the new buttons! Would definitely like to change the colors though, and an extra space between where the bag graphic is and where it says "in the bag".
  #4  
Old 12-03-2015, 02:17 PM
Daria Sh.'s Avatar
Daria Sh. Daria Sh. is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 767
Default

Quote:
Originally Posted by joe jeczen1 View Post
Thanks Daria,

Can't believe I missed that! I fixed it up, but it still isn't responding. I double checked my link by copy and pasting it. Here's the link to the button https://www.sunglassespeople.com/continue_shopping.png

Also, I love the new buttons! Would definitely like to change the colors though, and an extra space between where the bag graphic is and where it says "in the bag".
Hi Joe,

Thank you for writing back.

The code you are using is applied to the big "Continue shopping" button that is displayed on the Product details page after you add a product to bag. I checked your website and the button is changed:



We are also glad to hear that you like the new buttons! Can you please explain where exactly you want to add an extra space? Do you mean it for the new or for the old buttons which you have in your store now?

If you mean the new buttons, you can move "In the bag" text to the right with the help of the following CSS code:

Code:
div.ecwid-productBrowser-details-inTheBag div {
    position: relative;
    left: 50px;
}
Add it to Ecwid Control panel > Settings > Design > CSS Themes > your active CSS Theme.

If you use the old buttons, change 50px to 70px or more. You can change the amount of pixels up to your liking.

If you have any questions left, feel free to write back. I'll be glad to help.
__________________
Daria
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
  #5  
Old 12-07-2015, 08:28 PM
joe jeczen1's Avatar
joe jeczen1 joe jeczen1 is offline
 
Join Date: Nov 2015
Posts: 7
Default

Hi,

I checked it out and it's still not changed. It's supposed to look like this https://www.sunglassespeople.com/continue_shopping.png

I'm not too worried about that spacing thingy, but I attached a screen shot of what I mean.

In the end I just want to change the colors with a css code or something.

~Joe
Attached Images
File Type: jpg touching.jpg (36.3 KB, 112 views)
  #6  
Old 12-09-2015, 02:02 PM
Daria Sh.'s Avatar
Daria Sh. Daria Sh. is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 767
Default

Quote:
Originally Posted by joe jeczen1 View Post
Hi,

I checked it out and it's still not changed. It's supposed to look like this https://www.sunglassespeople.com/continue_shopping.png

I'm not too worried about that spacing thingy, but I attached a screen shot of what I mean.

In the end I just want to change the colors with a css code or something.

~Joe
Hi,

I completely missed that the color was so different! Sorry about that.

I tried your code in my test store and it looked that yellow as in your images, please see the screenshot http://take.ms/40TT7 I checked your website again and I see that there is a rule in the CSS Theme of your website, which changes the button color to this one https://d3fpg94ia2uqz2.cloudfront.ne...e_shopping.png That rule overrides the rules from your Ecwid CSS Theme.

To make your buttons yellow, you have 2 options:

1. The preferred option – remove the rules for "Continue shopping" button from the CSS Theme of your website



2. Add "!important" to the rules in your Ecwid CSS Theme. Than such rules will override the CSS rules of your website. The ready code should look like this:

Code:
/* The "Continue Shopping" button in up state */
div.ecwid-ContinueShoppingButton-up, div.ecwid-ContinueShoppingButton-up-hovering, div.ecwid-ContinueShoppingButton-ie6-up, div.ecwid-ContinueShoppingButton-ie6-up-hovering {
background: transparent url(https://www.sunglassespeople.com/continue_shopping.png) no-repeat top center !important;
}
/* The "Continue Shopping" button in down state */
div.ecwid-ContinueShoppingButton-down, div.ecwid-ContinueShoppingButton-down-hovering, div.ecwid-ContinueShoppingButton-ie6-down, div.ecwid-ContinueShoppingButton-ie6-down-hovering {
background: transparent url(https://www.sunglassespeople.com/continue_shopping.png) no-repeat bottom center !important;
}
If you enable the new CSS buttons, you can change the color of "Continue shopping" button with the help of the following CSS rules:

Code:
.ecwid button.ecwid-btn--continueShopping {
  background-color: COLOR;
}
.ecwid button.ecwid-btn--continueShopping:hover {
  background-color: COLOR;
}
.ecwid button.ecwid-btn--continueShopping:focus {
  background-color: COLOR;
}
.ecwid button.ecwid-btn--continueShopping:focus:active {
  background-color: COLOR;
}
replace "COLOR" with the name of real colors. You can find color names here http://www.w3schools.com/tags/ref_colorpicker.asp

Enable the new buttons in Control panel > Settings > What's new > Improved appearance of storefront buttons.

Quote:
I'm not too worried about that spacing thingy, but I attached a screen shot of what I mean.
I looked at the screenshot and see that "In the bag" text stands very close to the image of the shopping bag. I opened your website in Chrome and Firefox and I do not see it reproduced on your live website. Can you please specify in which browser you see this issue? Did you try applying the CSS code I sent you:

Code:
div.ecwid-productBrowser-details-inTheBag div {
    position: relative;
    left: 50px;
}
Hope to hear from you. Thanks.
__________________
Daria
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
  #7  
Old 12-10-2015, 02:11 AM
joe jeczen1's Avatar
joe jeczen1 joe jeczen1 is offline
 
Join Date: Nov 2015
Posts: 7
Default

Awesome Daria!

I'll be changing some colors with the new buttons as it's a bit easier.

The browser I'm using is Chrome in case you guys wanna duplicate the spacing thing.

I've been combing through all this css, going to the knowledge base, but I'm not sure what the other syntax would be to change the "add to bag, continue, and checkout" buttons.

Can you share the css for that too?

Or better yet, maybe let me in on what color controls the chameleon skin for the buttons too? I really like these two new options together.

Last edited by Daria Sh.; 12-10-2015 at 04:27 PM.
  #8  
Old 12-15-2015, 02:13 PM
Daria Sh.'s Avatar
Daria Sh. Daria Sh. is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 767
Default

Quote:
Originally Posted by joe jeczen1 View Post
Awesome Daria!

I'll be changing some colors with the new buttons as it's a bit easier.

The browser I'm using is Chrome in case you guys wanna duplicate the spacing thing.

I've been combing through all this css, going to the knowledge base, but I'm not sure what the other syntax would be to change the "add to bag, continue, and checkout" buttons.

Can you share the css for that too?

Or better yet, maybe let me in on what color controls the chameleon skin for the buttons too? I really like these two new options together.
Hi Joe,

Now I see on your website that "In the bag" text stands very close to the image of the bag.

I checked your store settings and I see that you use Theme Designer in Ecwid Control panel and also Chameleon for our WordPress plugin.

Chameleon skin adapts the design of your Ecwid store to the design of the WordPress website where you add Ecwid. If you want to make any changes in your design, you can edit your current Ecwid Theme. Yet in this case we recommend to disable Chameleon. Otherwise, there may be a conflict between CSS rules. Check more here https://help.ecwid.com/customer/port...#Chameleonskin

Also, you use Theme Designer that is a third-party app that also affects your store design. According to the developer's warning, when using Theme Designer you should use Ecwid Standard theme with no changes in it.

To sum up, I'd recommend you to use one source for the design of your Ecwid store. That should either be Ecwid CSS Theme, Theme designer or Chameleon. If you enable all of them at once, it is most likely that they will conflict with each other and that may harm your design. Like in your store now: you have enabled the new buttons, yet some of the buttons are still displayed as the old.

If you want to change the colors in Chameleon skin, you should go to your WordPress editor > in the browser address add this part: options.php after wp-admin/ Find there ecwid_chameleon_primary and define the color in the field next to it.

If you are going to make the changes in your Ecwid CSS Theme, you can change buttons' colors with CSS. Buttons has several states: normal, hover, focus and focus:active. To change all the buttons in your store, use the following code:

Code:
.ecwid .ecwid-btn--primary:hover {
	background-color: COLOR;
}

.ecwid .ecwid-btn--primary {
	background-color: COLOR;
}

.ecwid button.ecwid-btn--primary:focus {
  background-color: COLOR;
}

.ecwid button.ecwid-btn--primary:focus:active {
  background-color: COLOR;
}
Replace COLOR with the desired color name add it to Ecwid Control panel > Settings > Design > CSS Themes > your active CSS Theme. You can select a color here http://www.w3schools.com/cssref/css_colors.asp

If you want to change the color of certain buttons, you should create codes for each button separately, for all 4 states. For example, the code to change only "Continue shopping" button will look like this:

Code:
.ecwid button.ecwid-btn--continueShopping {
  background-color: COLOR;
}
.ecwid button.ecwid-btn--continueShopping:hover {
  background-color: COLOR;
}
.ecwid button.ecwid-btn--continueShopping:focus {
  background-color: COLOR;
}
.ecwid button.ecwid-btn--continueShopping:focus:active {
  background-color: COLOR;
}
Create similar codes for other buttons if you prefer this method and then add to your Ecwid active CSS Theme.

Let me know if you have any questions left.
__________________
Daria
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
  #9  
Old 12-15-2015, 10:32 PM
joe jeczen1's Avatar
joe jeczen1 joe jeczen1 is offline
 
Join Date: Nov 2015
Posts: 7
Default

Daria,

Many thanks, I can't believe I've caused this much trouble!

Yes, I played around with the theme designer, but quickly uninstalled it in the very beginning a long time ago.

I looked in the knowledge base and all it says is that to reset the CSS you just need to activate the standard css.

I activated it a few posts ago in this thread.

I wish I could just hit the reset button whilst keeping all of my products in tact.
  #10  
Old 12-15-2015, 10:36 PM
joe jeczen1's Avatar
joe jeczen1 joe jeczen1 is offline
 
Join Date: Nov 2015
Posts: 7
Default

Ah, I just realized I had to scroll further down and tell the theme designer to stop being used too.

I turned a diff CSS on then off and reactivated the Standard One. Hope that fixes it.
 
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:08 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.