images for buttons

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
13 years ago
Hello
I am using the nop classic theme.  My question is I would like to change the add to cart and wish list buttons on the detail page to actual image buttons. Can this be done and if so how?

Thanks in advance
Richard
13 years ago
the class used for the add to cart is: productgridaddtocartbutton

You can do something like this in the styles.css located in the app_themes/themename/ dir:


.productgridaddtocartbutton{
display: block;
position: relative;
background: #86be40;
padding: 3px;
margin: 5px;
color: #fff;
text-decoration: none;
cursor: pointer;
text-align:center;
border:1px solid green;
font-weight:bold;
background-image: url('/app_themes/themename/images/button_transparent_overlay.png');
background-position: bottom;
}

.productgridaddtocartbutton:hover{
background-color:#5b8148;
}



The button overlay you can get here. You may use it if you want

Below are the  class names for all buttons:

.productlistaddtocartbutton, .productgridaddtocartbutton, .productemailafriendbutton,
.productaddtocomparelistbutton, .productvariantaddtowishlistbutton, .editaddressbutton,
.deleteaddressbutton, .cancelrecurringorderbutton, .orderdetailsbutton, .orderdetailsprintbutton,
.updatewishlistbutton, .applycouponcodebutton, .updatecartbutton, .continueshoppingbutton,
.orderprocessedcontinuebutton, .submitpollvotebutton, .cancelforumtopicbutton, .forumsearchbutton,
.forumsearchboxbutton, .cancelpmbutton, .deletepmbutton, .backpmbutton{ }

.searchbutton, .contactusbutton, .newsitemaddcommentbutton, .blogpostaddcommentbutton,
.productvariantaddtocartbutton, .productwritereviewbutton, .loginbutton, .registerbutton,
.checkoutasguestbutton, .savecustomerinfobutton, .addbillingaddressbutton, .addshippingaddressbutton,
.changepasswordbutton, .registernextstepbutton, .completeregistrationbutton, .passwordrecoverybutton,
.newpasswordbutton, .saveaddressbutton, .sendemailafriendbutton, .checkoutbutton, .selectshippingaddressbutton,
.newaddressnextstepbutton, .selectbillingaddressbutton, .sameasshippingaddressbutton,  
.shippingmethodnextstepbutton, .paymentmethodnextstepbutton, .paymentinfonextstepbutton,
.confirmordernextstepbutton, .submitforumtopicbutton, .submitpmbutton, .replypmbutton,
.deleteselectedpmbutton, .reorderbutton, .minicartcheckoutbutton, .newsletterbox-subscribebutton, .useragreementbutton, .productgridproductdetailbutton, .productlistproductdetailbutton{ }

13 years ago
Thanks for the reply I will give this a shot.

Richard
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.