Add to Wishlist styling

[Richard47]

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

[Logan Rhodehamel]

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.

[Richard47]

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

[Logan Rhodehamel]

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>

[Richard47]

This worked great logan.
Thanks,
Richard