How do I replace the standard buttons with my own buttons?

mystore · Post by **mystore** » Tue Nov 13, 2007 1:28 pm

Does anyone know how to replace the standard buttons with something different? For instance, in the "GreenRacer" theme, I'd like to replace these buttons...

...with a different look.

I don't think these are stored images b/c it's not listed in the "Images" under theme. I've also checked the .css files and .skin files, and also no luck.

Post by **Shopping Cart Admin** » Tue Nov 13, 2007 2:15 pm

Hello,

That is all controlled by the CSS sheet.

From green racer style.css

Code: Select all

/* style for buttons */
input.button, a.button
{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	background-color: #636363;
	font-size: 9px;
	text-transform: uppercase;
	color: #FFFFFF !important;
	padding: 2px 5px 2px 5px;
	border: 1px solid #000000;
	font-weight: bold;
	cursor:hand;
	margin: 0;
	text-align:center;
	text-decoration:none;
	vertical-align: middle;
	/*background:url(images/go_btn.gif) no-repeat middle right;
	height:20px;
	width:22px;*/
	/*float:right;
	margin-left:2px;*/
}

/* style for button hover state 
input.button:hover, a.button:hover
{
	color: #FFFFFF; text-decoration:none;
}*/

mystore · Post by **mystore** » Tue Nov 13, 2007 2:41 pm

Thanks, that's a good place to start.

However, is there a way for me to replace the buttons with an actual image file? For instance, I'd like to replace the "Add to Basket" button with this..

I know how to change the image for the "Checkout" button b/c it's listed in the Images folder (i.e. Checkout_now.gif...and oddly enough "Add to Cart" is cart_btn.gif, but that only changes the image in the category page and not the product page).

Post by **Shopping Cart Admin** » Tue Nov 13, 2007 3:20 pm

Hello,

You'd need to edit BuyProductDialog.ascx and change it to an image instead of a link. Which isn't possible on the demo store since we cannot allow code editing. But it's an easy enough change if you have the full product.

mystore · Post by **mystore** » Thu Nov 15, 2007 4:35 pm

which folder is BuyProductDialog.ascx located at?

What program do I use to edit .ascx files?

Post by **Shopping Cart Admin** » Thu Nov 15, 2007 4:40 pm

Hello,

It's in the /ConLib (control library) directory. Be sure if you modify a control that you move it to the /custom directory so on upgrades we don't overwrite your changes.

You can use notepad or any popular editor to modify the file.

The customization guide is a good reference.

ftp://ftp.ablecommerce.com/AC7_Docs/Abl ... 0Guide.pdf

mystore · Post by **mystore** » Thu Nov 15, 2007 6:45 pm

Thanks Mike. How do I change it so it shows up as an ImageButton instead of a LinkButton?

I thought by following the same logic as the one found in style.css, it would work but it doesn't.

For instance, I tried to replace this:

Code: Select all

<asp:LinkButton ID="AddToBasketButton" runat="server" SkinID="Button" Visible="true" 

OnClick="AddToBasketButton_Click" Text="Add to Cart" EnableViewState="false" 

ValidationGroup="AddToBasket"></asp:LinkButton>

with this...

Code: Select all

<asp:ImageButton ID="AddToBasketButton" runat="server" SkinID="Button" ImageUrl="images/cart_btn.gif" Visible="true" 

OnClick="AddToBasketButton_Click" Text="Add to Cart" EnableViewState="false" 

ValidationGroup="AddToBasket"></asp:ImageButton>

But as you've guessed it, I might as well have typed in "asldfuh3lhwwer" and it would have produced the same result.