Using skin file in SharePoint Project

Building many custom input form for SharePoint which use many control style/configure can be tedious work. Especially if you have many developer working on the same project. CSS can be used for this purpose, but it work for general and not specific to styling certain control. ASPX have skin file that can be used for theme in web application project and it is for specific control. I've experimented on how to add this skin file to SharePoint project and use that skin feature for our SharePoint visual web part. This is how I've done it to make our project use skin file for configuring and styling web control easier.

1. In your SharePoint Project, create folder "App_Themes"
2. Inside that folder create a sub folder with name "Default" (we use Default for skin name)
3. Add text file item into that folder and name it Default.skin (filename should be same with its folder)
   
4. Add control you want to skin, for this example I'll use TextBox with SkinID "DefaultInput"
   
   

   <asp:TextBox runat="server" SkinID="DefaultInput" Width="200px"></asp:TextBox>
   

   
   
5. As you can see I only add folder and not special SharePoint folder that will be packaged inside wsp file. This folder won't get deployed whenever we deploy this project and want to apply some skin, we need to get around with this problem.
6. Skin files need to be put under IIS root. We could copy it manually into SharePoint folder inside wwwroot but I prefer creating cmd files that will copy it.
7. Again add text file item and give it a name and add extension .cmd, I'll name it "DeploySkinFile.cmd"
   
8. Insert this dos command into that file, this command will copy all files under App_Themes folder to "C:\inetpub\wwwroot\wss\VirtualDirectories\80"
   
   

   SET ACTIVEDIR=%1
   SET TARGETASP=C:\inetpub\wwwroot\wss\VirtualDirectories\80
   cd %ACTIVEDIR%
   IF not exist %TARGETASP%\App_Themes ( md %TARGETASP%\App_Themes )
   xcopy App_Themes %TARGETASP%\App_Themes /E /G /Y
   

   
   
9. We need to run this automatically when we built this project. Right click on Project name -> Properties to open its properties window and head to "Build Events" tab
10. Add this command under "Post-build event command line"
    
    

    "$(ProjectDir)DeploySkinFile.cmd" "$(ProjectDir)"
    

    
    
11. We need to tell aspx to use this skin file, this can be done on page directive or on pages tag inside web.config. Since I'm using this for visual web part, I'm going to put it inside web.config. Open web.config under root folder of SharePoint, add this on the last tag pages
    
12. Let's create a visual web part with textbox control and SkinID="DefaultInput" to test this.
    
13. Now deploy the project and add that visual web part. Browse to it and view the source, the textbox will have width 200px as defined in skin file above
    

Download sample project here