How can I change the colour of my 'Buy Now' buttons?

  • 1
  • Question
  • Updated 3 years ago
  • Answered

I would like to change the horrible teal colour on my 'Buy Now' buttons to a colour that follows my house style, but can't figure out how to do it.  I know I need to change it in my CSS but how do I do that?

Any help (in very non-technical language) much appreciated

Thanks

A

Photo of A

A

  • 87 Posts
  • 1 Reply Like
  • frustrated

Posted 3 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi A,

It's nice to see you still around!

This will need some CSS to your Online Store as suspected. It is a bit complicated. This is code that needs to be altered:

html#ecwid_html body#sys_background button.ecwid-AccentedButton {
    background-color: #3A878B;
    background-image: -moz-linear-gradient(left center , #3B8A8B 0%, #3B8A8B 6%, rgba(59, 138, 139, 0) 13%), -moz-linear-gradient(right center , #3B8A8B 0%, #3B8A8B 6%, rgba(59, 138, 139, 0) 13%), -moz-linear-gradient(center bottom , #27B9BB 0%, #3A878B 17%, rgba(58, 135, 139, 0) 18%, rgba(58, 135, 139, 0) 73%, rgb(77, 152, 153) 73%, rgb(63, 146, 146) 100%);
    box-shadow: 0px 0px 0px 1px rgba(32, 85, 96, 0.7), 0px 1px 0px #4EB3B2 inset;
}

html#ecwid_html body#ecwid_body button.ecwid-AccentedButton:hover {
display:none;
}

You'd need to replace all instances of "#3A878B" with the color code you wish to use.

This code would not go into your Site CSS but rather into your Online Store's CSS:

  1. Go to the Online Store tab in your Sitebuilder.
  2. Click on System Settings > Design.
  3. Add the codes to an existing theme or create a new theme.
  4. Click Save.

Please let me know if you have any trouble with this.
Photo of A

A

  • 87 Posts
  • 1 Reply Like
Hi, thanks for getting back to me so quickly.  I have followed the steps in your reply to me, but the colour hasn't changed, I must be doing something wrong, but can't see what!  Any ideas?

Thanks

A
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Let me look into this and get back to you.

Thanks for your patience!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks so much for your patience.

I have spoken to our partner at Ecwid as I was also struggling to make this code work. Apparently, the code given was not the correct one.

I have added a new design theme to your Online Store called "CSS buttons". I've added the correct code which is:

.ecwid-BuyNow button {
    background: #B64F87 !important;
    box-shadow: none !important;
}.

You may want to update the color code number.

Let me know if you have further trouble with this.
Photo of A

A

  • 87 Posts
  • 1 Reply Like
Hi

This worked wonderfully well (after I figured out that you could only activate one change, so had to copy the code to the one tab where I had other CSS codes changed!).  I am now trying to change the Add to Bag button and the Shopping Bag colour, but it's not working.

I tried the code you gave me changing the name of the button etc, but no luck.  I know I'm not stupid, but this is making me feel that way :-(

I don't want to publish my site until I am happy that the house style is consistent.

Once again any help or advice would be greatly appreciated.

Many thanks for your ongoing patience and help

A
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
No, please don't feel stupid at all. This is pretty complicated stuff and I noticed in my code I messed up. There was a period there that shouldn't have been there. I have fixed this up in your code in the Online Store design. The buttons should be displaying properly.

As for the add to bag, please see How to change your "Add to Bag" button to find the code necessary to make this change. Copy this code and then, add to your design sheet.

Please note: After you've uploaded your image to your File Manager, please click republish your site. This will cache your image file onto the internet. The image file URL will be something like: http://yoursite.com/resources/yourimagefilename.jpg

Replace:

  • "yoursite.com" with your domain name.
  • "yourimagefilename.jpg" with the name of your image file.
Please let me know if you have any further trouble with this.
Photo of A

A

  • 87 Posts
  • 1 Reply Like
Woohoo!  Managed to get the shopping bag, checkout, add to bag and buy now buttons all changed to the colour I want.  Well proud of myself and huge thanks to Sanja for all her help and patience.

Jut one more thing that I can't find out how to do - The drop down menu on the navigation buttons on the nav bar is still the default blue colour which I want to change to the house-style colour.  I can't find the code in the CSS anywhere.  Any ideas?

Thanks again

A
(Edited)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello!

Well done on sorting this out. You're really doing so well with this!

Here are the codes for the flyover menu that should do the trick for you:

<style type="text/css">

/* Edit the background of your Flyover Menu box*/
.ys_submenu {
background: #ffffff !important;
}

/*Edit the color of your mouseover bar color*/
.ys_submenu ul li:hover {
background: none;
background: #99FF66 !important;
}

/*Edit the color of your text links*/
.ys_submenu ul li a {
color:#000000 !important;
font-family: Comic Sans MS !important;
font-size: 10px; }

/*Edit the color of your text links on mouseover*/
.ys_submenu ul li a:hover, .ys_submenu ul li:hover a {
color: #000000 !important;
font-family: Comic Sans MS !important;
font-size: 10px; }

</style>

Please note:

  • ".ys_submenu" refers to the background color of the Flyover Menu.
  • ".ys_submenu ul li:hover" refers to the hover color of the foreground when you mouseover the item in the Flyover Menu.
  • You would need to change all of the color codes (e.g. #ffffff) wherever you see "background-color" or "background". You can refer to this HTML Color Code Chart for the color codes.
  • ".ys_submenu ul li a" refers to the font color and type shown initially on the Flyover Menu.
  • ".ys_submenu ul li a:hover, .ys_submenu ul li:hover a" refers to the font color and type shown when you mouseover the item in the Flyover Menu.
  • You can change the color code "#000000" to your desired color. Please refer to the HTML Color Chart for color codes.
  • If you wish to change the font type, you would need to change the "Comic Sans MS" to your desired font. Please be mindful to use web-browser friendly fonts. You can find a list of them here: Website Browser Safe Fonts.
  • You can also adjust the font-size.

If you don't wish to change a particular part of the Flyover menu, simply remove the code specific to that element.

Please note: We may change the menu CSS at any time in the future as we develop and improve this feature and when we do so we cannot guarantee that your customizations will be unaffected.

Photo of A

A

  • 87 Posts
  • 1 Reply Like
Hi Sanja (again)

I have copied the code and made the changes to the colours that I want but it the drop down menu is still the teal/blue colour.

Unsure now what to do to find why it's not working

Any ideas?

Thanks yet again

A
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Where did you add the codes? What color were you wanting?
Photo of A

A

  • 87 Posts
  • 1 Reply Like
Hi Sanja

The changes that you made worked (thank you) but I realised that I left this piece of the code out

 /*Edit the color of your mouseover bar color*/
.ys_submenu ul li:hover {
background: none;
background: #99FF66 !important;
}<br>
as I would like the colour to change to #FAAECD so I went in and put this code in and changed the Hex colour to what I want, but this has now made the flyout revert to the original colours (even when I deleted the code it didn't pick up and use your new coding).  

I've also noticed that the shopping bag has also reverted to the original colour, despite the code still being in the CSS style sheet.

Sorry to have to come back to you and for reverting the work you did for me

A
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello,

I am going to follow up with you via email so that I don't let this fall through the cracks.