[solved] Edit checkout button color and img?

[rialni]

Hi,

 

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 October 3, 2013 by rialni (see edit history)

[vekia]

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;
}

[rialni]

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? 

[rialni]

Found it in prestashop/modules/blockcart/img/icon - so all is solved. Thank you so much

[vekia]

glat to hear that i could help you a little in this case

can you share url to your store? im so curious, it looks very nice on the thumb that you attached above

[rialni]

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 October 3, 2013 by rialni (see edit history)