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?

Luralurch

Answer 1

Here you forgot to give skinid to your button. It should be like this -

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

and then set your theme folder which is in App_Themes to your page directive like this -

<%@ Page Language="C#" Theme="ThemeFolderName" AutoEventWireup="true" .. %>

Or if you don't want to repeat this code in every page then set it into web.config like this -

<system.web>
    <pages styleSheetTheme="ThemeFolderName"></pages>
</system.web>

and apply it to button like this -

<asp:Button ID="btnUsers" runat="server" SkinID="btnSkin">

Unvalued

Have you set the theme in your page directive ?? – Unvalued

You have to enable it from Visual studio option settings. Just Go thru this link - #4277311 – Unvalued

Answer 2

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

Opinionated

Answer 3

Was having same problem intellisense and usage of skinfile just worked for me as far as its not working for you is because you are not using buttons from standards option in toolbox.

Argentite