Friday, May 28, 2010

How to add Skin File and theme in project



In the skin file, you just need to add the exact definitions of the web controls with all the visual attributes you want. You need to add the runat=”server” attribute but beware of adding the ID attribute because that will cause an error. For example, I have a skin file with the following contents

And this file is placed in the App_Themes/DallasTheme folder. Remember that the theme is identified by the theme folder name, in this case, DallasTheme.


After you’ve placed the skin file you need to set a web page to use this Theme. You can enable a Theme for the entire page by setting the Theme attribute of the page equal to the name of the Theme. In this case, it would be

1) <%@ Page Language="VB" Theme="DallasTheme" %>

2)

protected void Page_PreInit(object sender, EventArgs e)
{
    // Applying theme to a particular page

    Page.Theme = "SmokeAndGlass";
}
3) Themes can also be stored in the web.config file which will be applied to the overall application. Themes declared in this file are therefore not required to be declared in any other file under the @Page tag.
<configuration>
<system.web>

 <pages theme=�SmokeAndGlass� />
</system.web>
</configuration>
------------------------------------------------------------------------------------------

Named skins

Skins without SkindID's are called default skins while skins with SkindID's are known as Named skins. Named skins define different layouts for two or more server controls with unique ID's. IDs can be defined in the same file or you can make different files with different ID's, it all depends on your personal approach and likings. SkinID can be referenced to call named skins. Here is an example:

<asp:Label runat="server" ForeColor="#585880" 
   Font-Size="0.9em" Font-Names="Verdana" SkinID="LabelHeader" />


<asp:Label runat="server" ForeColor="#585980" Font-Size="0.8em" 
                       Font-Names="Arial" SkinID="LabelFooter" />

------------------------
<asp:Label id="Header" runat="server" SkinID="LabelHeader" />


<asp:Label id="Header" runat="server" SkinID="LabelFooter" />

--------------

Dynamically applying themes


protected void Page_PreInit(object sender, EventArgs e)
{ 
    string theme = ""; // setting the value to none

    if (Page.Request.Form.Count > 0) 
    {
        // "Themes" is the ID of dropdownlist

        theme = Page.Request["Themes"].ToString(); 
        if (theme == "Default")
        {
            theme = "";
        }
    }
this.Theme = theme; // applying themes to the overall page.

For More Details visit to this link