Jump to content

[solved] Edit checkout button color and img?


Recommended Posts



Following the great advise of this forum, I am almost about to hand in my first completed Prestashop. However, I have just today run into my first real challenge that I can't seem to be able to solve with any current threads.


I wish to edit the color and image of the checkoutbutton that appears when you scroll the mouse over the cart. I used Vekias tutorial to change the color and size of 'add to cart' button, but I can't localize the 'checkout' button to do the same.


I hope someone can help me localize the code for this?


Thanks in advance :)


(take a look at the image, to see what I mean)


Edited by rialni (see edit history)

Share this post

Link to post
Share on other sites

to edit this checkout button you need to define new styes for it.

it's because this button is based on styles used by other buttons too.

it mean that if you will change original code - other buttons will have the same new style.


global.css line 145:

input.button_mini, input.button_small, input.button, input.button_large, input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled, input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.button_mini, a.button_small, a.button, a.button_large, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.button_mini, span.button_small, span.button, span.button_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large, span.exclusive_large_disabled {
position: relative;
display: inline-block;
padding: 5px 7px;
border: 1px solid #cc9900;
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
border-radius: 3px !important;
font-weight: bold;
color: #000;
background: url(../img/bg_bt.gif) repeat-x 0 0 #f4b61b;
cursor: pointer;

Share this post

Link to post
Share on other sites

Thank you, thank you, thank you. I can't believe how fast you are :) That solved everything - I was also looking for the code for the rest of the ugly yellow buttons ;)


The only thing missing now is the image. I changed the image file for the add to cart button (the same image) but it doesn't change for the 'checkout' button. The file 'pict_add_cart' in the mytheme/img/icon folder doesn't point here and I can't find that image anywhere else. So where does the checkout-button take the image from? 

Share this post

Link to post
Share on other sites

Thank you. Yes, of course you can have a look. However, you can't really see anything before logging in, so the categories are hidden. The url is byboysen_dot_dk. I will set up a consumer site soon with the same products at - bellashave_dot_com.


I'm very close to launching it but I still can't solve the pixelated logo in Ie, I think I will just have to live with that. It seems to be an Ie issue - looks fine in other browsers :)

Edited by rialni (see edit history)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More