Changing the default "Proceed to Checkout" button help

[JR123]

Hi all,

I'm attempting to change the default Proceed to Checkout button in the View Cart page to a button that I made where it has a regular image, then a brightened mouseover image.

When searching for an answer on the forum, I found a helpful article by fellow 3D Cart user Mondo from back in May last year where he details how he changed the buttons on his site.

In particular, I believe it's where he explains this:


"TOP CHECKOUT BUTTON:

<input type="button" onclick="window.location='checkout.asp?step=1'" value="[viewcart_checkout-button]" class="btn" onMouseOver="this.className='btn_over'" onMouseOut="this.className='btn'">

TO:
<input type="image" onclick="window.location='checkout.asp?step=1'" src="assets/images/default/btnbegincheckout3.png" border="0" alt="Continue shopping">"


And this:

BOTTOM CART CHECKOUT BUTTON:

<td valign="top"><input type="button" onclick="window.location='checkout.asp?step=1'" value="[viewcart_checkout-button]" class="btn" onMouseOver="this.className='btn_over'" onMouseOut="this.className='btn'" id="Button7" name="Button7"></td>

TO:
<a onclick="window.location.href='checkout.asp?step=1 '" id="Button7" name="Button7" style="pic"href="#""><img src="assets/images/default/btnbegincheckout.png" border="0" alt="Begin checkout"></a>



My question is, when I'm trying to do this, I don't know how to implement it with the mouseover image involved. I tried something and it didn't work out so well, and also wouldn't let me go back to the View_Cart.asp page once I hit the button and went to the the Checkout_1 page.

Am I correct that the file I'm trying to change is "View_Cart.html"? And also, any advice on how to blend Mondo's suggestion with a mouseover image?

Thank you in advance for any assistance, suggestions, or advice!
-James

[Go Live]

You should be able to change the btn class in the CSS located at
settings>design>themes & styles

[JR123]

Thanks for the advice Go Live. I went in to the View_Cart.html template, but I'm still having a problem getting the mouseOver to work correctly.

When changing the "Proceed to Checkout" button (Button 7, I believe), I went from this (default 3D Cart code):

<td valign="top"><input type="button" onclick="window.location='checkout.asp?step=1'" value="[viewcart_checkout-button]" class="btn" onMouseOver="this.className='btn_over'" onMouseOut="this.className='btn'" id="Button7" name="Button7"></td>

To this (new code that I can't figure out where I'm going wrong):

<td valign="top"><a onclick="window.location.href='checkout.asp?step=1 '" id="Button7" name="Button7" style="pic"href="#""><img src="assets/images/BeginCheckout.png" onMouseOver="assets/images/BeginCheckoutMouseOver.png" onMouseOut="assets/images/BeginCheckout.png" border="0" alt="Begin checkout"></a> </td>

It shows the button, but I can't get the mouseOver to show the "brightened" image (BeginCheckoutMouseOver.png). I know something is wrong with the way I've tried coding it, but I can't figure out what...unfortunately, I suck at html! I'll try some more, but if anyone has a suggestion, I'd greatly appreciate it!

Thanks,
James

[Go Live]

Sorry we left our buttons as default. You probably have a big fat juicy button your working with.

Here is a sample of my btn classes we used

/*btn:: Controls the buttons, (ONLY if it is not using and image).*/ 
.btn {
	border: 1px solid #c8d98b;
	background: #FFF url(images/BG_btn.gif) repeat-x;
	font-weight: normal;
	font-size: 12px;
	color: #50564a;
	cursor: pointer;
	margin:1px;
	padding: 2px 6px;
}
/*btn_over:: Controls the buttons when a user mouses over them, (ONLY if it is not using and image).*/ 
.btn_over {
	border: 1px solid #c8d98b;
	background: #c8d98b url(images/BG_btn1.gif) repeat-x;
	font-weight: normal;
	font-size: 12px;
	color: #50564a;
	cursor: pointer;
	margin:1px;
	padding: 2px 6px;
}

You may need to rewrite some classes or use JS
Good Luck

[JR123]

Thanks Go Live. I'll give it a shot with the CSS template and see if it works. Fun weekend project. I have a feeling that I'll need some design service as there's a bunch of things I want to change all over the cart that I just don't know enough about. Thanks again and have a great weekend!
-James

[Go Live]

The easiest way would be to add a class to your CSS and put the original code back in the view cart page with the new class name.

such as "btnptc" and "btnptc_over"

The reason for a new class name is because all buttons use the btn class and you want a special image button for just the proceed to cart button.

Now if you use a full size image then remove the repeat-x from the CSS

Have Fun