Page 1 of 1
How do I replace the standard buttons with my own buttons?
Posted: Tue Nov 13, 2007 1:28 pm
by mystore
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.
Posted: Tue Nov 13, 2007 2:15 pm
by Shopping Cart Admin
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;
}*/
Posted: Tue Nov 13, 2007 2:41 pm
by mystore
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).
Posted: Tue Nov 13, 2007 3:20 pm
by Shopping Cart Admin
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.
Posted: Thu Nov 15, 2007 4:35 pm
by mystore
which folder is BuyProductDialog.ascx located at?
What program do I use to edit .ascx files?
Posted: Thu Nov 15, 2007 4:40 pm
by Shopping Cart Admin
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
Posted: Thu Nov 15, 2007 6:45 pm
by mystore
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.