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
Add to Wishlist styling
- Logan Rhodehamel
- Developer
- Posts: 4116
- Joined: Wed Dec 10, 2003 5:26 pm
Re: Add to Wishlist styling
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:
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:
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:
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.
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" />
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" />
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" />
Cheers,
Logan
.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.
Logan
.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.
Re: Add to Wishlist styling
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
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
- Developer
- Posts: 4116
- Joined: Wed Dec 10, 2003 5:26 pm
Re: Add to Wishlist styling
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:
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"></asp:Button>
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
.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.
Logan
.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.
Re: Add to Wishlist styling
This worked great logan.
Thanks,
Richard
Thanks,
Richard