Tuesday, 26 February 2013

ASP.NET Themes: How to define in web.config


How to: Define ASP.NET Themes:

  1. In the solution explorer select the project-->
    • Right click and point to ASP.NET folder-->Then select Theme
  2. Select the newly created theme folder-->
    • Right click and you can add .css file or .skin file using add new item option
Note: Sometimes it does not work. Then
  1. Rename the current theme
  2. Create a new theme and rename as you want.
  3. Now run the program and it will work without error.
In the web.config file:

<!--theme settings-->
    <pages theme="DefaultTheme"/>


In order to change theme dynamically add the following code in the class file:


protected void Page_PreInit(object sender, EventArgs e)
{
string theme = "BlueSkin"; // setting the value to none
if (Page.Request.Form.Count > 0)
{
// "Themes" is the ID of dropdownlist
theme = Request["themes"].ToString();
 }
Page.Theme = theme; // applying themes to the overall page
}





.NET Framework 3.0
21 out of 26 rated this helpful Rate this topic
You can define your own page or global themes. Themes consist of several supporting files, including style sheets for page appearance, control skins to decorate server controls, and any other supporting images or files that make up the theme.

To create a page theme

  1. Create a new folder named App_Themes in your Web site.
    NoteNote
    The folder must be named App_Themes.
  2. Create a new subfolder of the App_Themes folder to hold your theme files. The name of the subfolder is the name of the theme. For example, to create a theme named BlueTheme, create a folder named \App_Themes\BlueTheme.
  3. Add files to your new folder for skins, style sheets, and images that make up the theme.

To create a global theme

  1. Create a Themes folder using this path:
    iisdefaultroot\aspnet_client\system_web\version\Themes
    
    For example, if the default Web root folder is in C:\Inetpub\wwwroot on the Web server, the new Themes folder might be this:
    C:\Inetpub\wwwroot\aspnet_client\system_web\version\Themes
    
    NoteNote
    The folder name for global themes is Themes, not App_Themes, as it is for page themes.
  2. Create a theme folder as a subfolder of the Themes folder. The name of the subfolder is the name of the theme. For example, to create a global theme named BlueTheme, create a folder named ...\Themes\BlueTheme.
  3. Add files to your new folder for skins, style sheets, and images that make up the theme.

To create a skin

  1. Create a new text file in your theme subfolder with a .skin extension.
    The typical convention is to create one .skin file per control, such as Button.skin or Calendar.skin. However, you can create as many or as few .skin files as you need; skin files can hold multiple skin definitions.
  2. In the .skin file, add a normal control definition (using declarative syntax), but include only the properties you want to set for the theme and do not include an IDattribute. The control definition must include the runat="server" attribute.
    The following example shows a default control skin for a Button control, defining the color and font for all Button controls in the theme:
    <asp:Button runat="server" 
      BackColor="Red" 
      ForeColor="White" 
      Font-Name="Arial" 
      Font-Size="9px" />
    
    NoteNote
    A convenient way to create a skin is to add the control to a page and configure it so that it has the look you want. For example, you might add a Calendar control to a page and set its day header, selected date, and other properties. Then, you can copy the control definition from the page to a skin file, and then remove the IDattribute.
  3. Repeat Steps 2 and 3 for each control skin you want to create.
    NoteNote
    You can define only one default skin per control. Use the SkinID attribute in the skin's control declaration to create a named skin that you can apply to specific instances of a control.

No comments:

Post a Comment