Add to Wishlist styling

For general questions and discussions specific to the AbleCommerce GOLD ASP.Net shopping cart software.
Post Reply
Richard47
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 47
Joined: Thu Nov 04, 2010 1:15 pm

Add to Wishlist styling

Post by Richard47 » Fri Feb 08, 2013 2:33 pm

using gold R3...I would like to change the styling on the Add to Wishlist Button but I cannot find the code where I need to make the change. It seems as though all the buttons are using the same style .button. Anyone have any ideas on how or where to change the style???

TIA
Richard

User avatar
Logan Rhodehamel
Developer
Developer
Posts: 4116
Joined: Wed Dec 10, 2003 5:26 pm

Re: Add to Wishlist styling

Post by Logan Rhodehamel » Fri Feb 08, 2013 3:47 pm

For some controls (like buttons) we may use a feature of ASP.NET themes called skins. If you look in folder for the active theme in your store, you will find a file named style.skin. So for example, ~/App_Themes/Computer/style.skin.

You can open this file in an editor and the top will look like this:

Code: Select all

<asp:Button runat="server" CssClass="button" />
<asp:Button SkinId="Button" runat="server" CssClass="button" />
The first line above creates a default style for asp:Button elements. That means anything not given a more specific skin will take the css class of button. You want to avoid that. So the first step to creating a custom style for wishlist buttons is probably to create a new skin id and point it to a new css class like so:

Code: Select all

<asp:Button runat="server" CssClass="button" />
<asp:Button SkinId="Button" runat="server" CssClass="button" />
<asp:Button SkinId="WishlistButton" runat="server" CssClass="wishlistButton" />
Then you could go to the style.css for your theme and define the css code for wishlistButton to be as you wish. Another alternative if you want to keep most of the current style but only override a few properties, you could define multiple css classes for your skin:

Code: Select all

<asp:Button runat="server" CssClass="button" />
<asp:Button SkinId="Button" runat="server" CssClass="button" />
<asp:Button SkinId="WishlistButton" runat="server" CssClass="button wishlistButton" />
Now you can define wishlistButton at the bottom of your css file and it will add to or modify the css properties set by but button class.
Cheers,
Logan
Image.com

If I do not respond to an unsolicited private message, it's not because I'm ignoring you. It's because the answer to your question is valuable to others. Try the new topic button.

Richard47
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 47
Joined: Thu Nov 04, 2010 1:15 pm

Re: Add to Wishlist styling

Post by Richard47 » Mon Feb 11, 2013 9:43 am

I couldn't get this to work. What I did was
1. Went into Website > App_Themes > MY Theme > style.skin and added <asp:Button SkinId="AddToWishlistButton" runat="server" CssClass="wishlistButton" />
( the first four lines
<asp:Button runat="server" CssClass="button" />
<asp:Button SkinId="Button" runat="server" CssClass="button" />
<asp:Button SkinId="AddToWishlistButton" runat="server" CssClass="wishlistButton" />
<asp:HyperLink SkinId="Button" runat="server" CssClass="button" />
<asp:LinkButton SkinId="Button" runat="server" CssClass="button" /> )

2. Then I went into the same folder to > style.css and added this
.wishlistButton{
background:#229b73 url(images/button2_bg.jpg) repeat-x top;
margin:0 0 4px 4px;
padding:0 10px;
cursor:pointer;
white-space:nowrap;
border-radius:5px; border:1px solid #229b73;}

No matter what I do nothing works. I am using the wsp version of code.

Thanks Richard

User avatar
Logan Rhodehamel
Developer
Developer
Posts: 4116
Joined: Wed Dec 10, 2003 5:26 pm

Re: Add to Wishlist styling

Post by Logan Rhodehamel » Tue Feb 12, 2013 9:20 pm

Sorry, I left out the third step. The first two things you write are great. The last piece is that you have to go find the asp:Button entry for the wishlist and change the SkinId to your new one. So for example in the file ConLib\BuyProductDialog.ascx, around line 169 there is this button code:

Code: Select all

            <asp:Button ID="AddToWishlistButton" runat="server" Visible="true" OnClick="AddToWishlistButton_Click" Text="Add to Wishlist" EnableViewState="false" ValidationGroup="AddToBasket"></asp:Button>
You can update it to use the new skin:

Code: Select all

            <asp:Button ID="AddToWishlistButton" runat="server" Visible="true" OnClick="AddToWishlistButton_Click" Text="Add to Wishlist" EnableViewState="false" ValidationGroup="AddToBasket" SkinID="AddToWishlistButton"></asp:Button>
Cheers,
Logan
Image.com

If I do not respond to an unsolicited private message, it's not because I'm ignoring you. It's because the answer to your question is valuable to others. Try the new topic button.

Richard47
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 47
Joined: Thu Nov 04, 2010 1:15 pm

Re: Add to Wishlist styling

Post by Richard47 » Thu Feb 14, 2013 11:06 pm

This worked great logan.
Thanks,
Richard

Post Reply