Applying skin file for button in ASP.net

Question

I am very new to ASP.net and trying to apply styles to button in my webform I have done the following

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="TestingStyles.Index" Theme="button" %>
<asp:Button  runat="server" Text="Button" Width="221px" SkinID="btnskin" />

above is my index.aspx and below is my button.skin

 <asp:Button runat="server" 
  BackColor="Red" 
  ForeColor="White" 
  Font-Name="Arial" 
  Font-Size="9px"
  SkinID="btnskin"
/>

above is my test.skin file I have added it's reference in the webform page theme directive. I am having two problems

1) Buttins in my webforms are not getting styled according to skin file? 2)Intellisense is not working in skin file?

Answer 1

It should be like this

STEP 1

In your App_Themes folder you will have to add your skin file

STEP 2

Add the customizations you want in the skin file.

Don't forget to add the SkinId attribute

<asp:Button runat="server" ForeColor="Black" BackColor="White" SkinId="WideBlackSkin"  Width="80px" Font-Bold="true" />
<asp:Button runat="server" ForeColor="Green" SkinId="Help" Font-Bold="true"/>

STEP 3

In the page that you want to use this skin add Theme attribute containing the skin file name

<%@ Page Language="C#" AutoEventWireup="true" Theme="SKINFILENAME" CodeBehind="Home.aspx.cs" Inherits="Skin_File.Home" %>

STEP 4

In the elements you want to apply the style add the SkinID attribute

<asp:Button SkinID="WideBlackSkin"  runat="server" Text="First"  />
<asp:Button ID="Button1" SkinID="WideBlackSkin"  runat="server" Text="First"  />
<asp:Button ID="Button2" SkinID="WideBlackSkin"  runat="server" Text="First"  />
<asp:Button ID="Button4" SkinID="WideBlackSkin"   runat="server" Text="First"  />
<asp:Button ID="Button3" SkinID="Help"  runat="server" Text="First"  />

I got this output following the above steps

For adding intellisense

Try this: Tools -> Options -> Text editor -> File extensions. Now type skin in the extension textbox and select User Control Editor from the dropdownlist. Click Add. Source