Post by lfreem2 » Sat Sep 21, 2013 4:39 am

I am on latest version of OC 1.5.6. Default theme.

I am simply looking to change the color of the ADD TO CART and CHECKOUT buttons from the standard blue to a hot pink. I have fiddled around with stylesheet.css, but can't seem to find the spot to change the color of the buttons and the corresponding hover.

Secondly, I would like to remove the CONTINUE button since it only sends everyone to the home page again. Despite reading several ways to do this, nothing has worked.

Please advise.

New member

Posts

Joined
Mon Jun 18, 2012 12:42 am

Post by Cue4cheap » Sat Sep 21, 2013 5:07 am

Look in stylesheet.css for this section.
a.button, input.button
All the info for the buttons are there. The background blue is an image
background: url('../image/button.png') repeat-x;

This affect all of the button backgrounds. You would need to create an image with the color you wish.

The continue button would take me a bit longer to find since I have never had to search for that in OpenCart.

cue4cheap not cheap quality


Expert Member

Posts

Joined
Fri Sep 20, 2013 4:45 am

Post by 1975bloom » Sun Oct 20, 2013 4:12 pm

Cue4cheap wrote:Look in stylesheet.css for this section.
a.button, input.button
All the info for the buttons are there. The background blue is an image
background: url('../image/button.png') repeat-x;

This affect all of the button backgrounds. You would need to create an image with the color you wish.

The continue button would take me a bit longer to find since I have never had to search for that in OpenCart.
I have being trying to change the add to colour too, where do I upload the colour image and what size should the image be?
Thank you.

New member

Posts

Joined
Wed Apr 10, 2013 10:42 pm

Post by V1P3R » Sun Oct 20, 2013 4:24 pm

If I'm not mistaken, the Add to Cart button is a two tone image in:
catalog/view/theme/default/image/button.png

Just open it in your favourite paint program and change it :)
Last edited by V1P3R on Sun Oct 20, 2013 6:19 pm, edited 1 time in total.

Newbie

Posts

Joined
Tue Oct 15, 2013 11:35 am

Post by 1975bloom » Sun Oct 20, 2013 5:19 pm

V1P3R wrote:If I'm not mistaken, the Add to Cart button is a two tone image in:
catalog/view/theme/default/image/button.png

Just open it in your favourite pain program and change it :)
I don't understand, what is a "pain program"? I am new to all this.

New member

Posts

Joined
Wed Apr 10, 2013 10:42 pm

Post by V1P3R » Sun Oct 20, 2013 6:24 pm

1975bloom wrote:I don't understand, what is a "pain program"? I am new to all this.
Spelling mistake ;) lol

I meant paint program. i.e. Photoshop, Gimp etc etc

The Add to Cart button you want to change the colour of is just a .png image file.

Look at your website and after the .com (or whatever you have) add
/catalog/view/theme/default/image/button.png

That is your Add to Cart image.

If you have OpenCart donwnloaded on to your PC, just edit the file and ftp it back up.

if not, right click the image and 'save as' then edit and ftp it back up. :)

Newbie

Posts

Joined
Tue Oct 15, 2013 11:35 am

Post by 1975bloom » Sun Oct 20, 2013 6:41 pm

V1P3R wrote:
1975bloom wrote:I don't understand, what is a "pain program"? I am new to all this.
Spelling mistake ;) lol

I meant paint program. i.e. Photoshop, Gimp etc etc

The Add to Cart button you want to change the colour of is just a .png image file.

Look at your website and after the .com (or whatever you have) add
/catalog/view/theme/default/image/button.png

That is your Add to Cart image.

If you have OpenCart donwnloaded on to your PC, just edit the file and ftp it back up.

if not, right click the image and 'save as' then edit and ftp it back up. :)
Thanks for replying, in which folder do I upload it when using ftp?

New member

Posts

Joined
Wed Apr 10, 2013 10:42 pm

Post by 1975bloom » Sun Oct 20, 2013 8:04 pm

Thank you i did it though my server.

New member

Posts

Joined
Wed Apr 10, 2013 10:42 pm

Post by azoreaxe » Wed Jan 25, 2023 7:34 pm

Hi,

Try Admin > Design > Theme Editor > Product TWIG > and look for:

<button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn btn-primary btn-lg btn-block">{{ button_cart }}</button>

Change: blink]btn-primary to btn-success

I hope this helps. I am using OC 3.0.3.8

Newbie

Posts

Joined
Fri Dec 02, 2022 10:34 am
Who is online

Users browsing this forum: No registered users and 31 guests