Asp.net skin file tutorial

Generally, Themes contain skins. A skin file contains style definitions for the individual server controls.

You can define skin settings for a control using similar markup which we use to add server controls to web page. Only difference you may find between skinned versions of control is that skinned version do not include ID attribute for control.

You should retain properties for which you want to configure through Themes. We create. We can also mix all server controls style definition in a single skin file. Make sure all style definition files like CSS, skin files, Image files and other resources are included in Themes folder in your application directory.

Default Skins: Control skin for which SkinID attribute is not set which means control skin is applied automatically for the controls of same type. For example: if you create a default skin for button then default button control skin will be applied for all the buttons on the page. The scope of default skin depends on where you define default skin. Named Skins do not apply for the controls by type. As we discussed in first few paragraphs, we can define Themes for entire site or for pages.

So based on scope, we can define Themes into two types:. Page Themes define themes for pages or for entire application. You can apply themes for single page using Theme attribute of Page directive as shown below.

We can define themes which apply for entire application by setting element in application configuration file as shown below. A global theme is a theme that you can apply to all websites on a server. They are much alike to Page themes except that their scope is set at server level. You can define property settings, style settings and much more in a global theme. Create a webpage with simple server controls including textbox, button and a calendar control.

When you run the page in the browser, you can observe all controls are displayed with default settings with no Themes applied. You can see below output listing. Output listing. In the preceding source code, we are assigning the existing ASP.

Net Skin automatically appears in the box after using the Themes property in the page header. Assigning the Skin to the ASP. Net source code, we used the skinId property of the control to assign the existing skin. Now run the application, it will appear as in the following: From the preceding example, we learned how to use skins. Advantages of ASP. You can apply a style to the specific control.

It easy to remind which skin is for which control because inside the skin file ASP. Net controls are directly used and in. Gives the same consistency to the multiple controls in the web application.

Note When you use an ASP. Net Skin you need to add a Skinfile. To create a skin for a control, right click on the 'default' folder and add new item. Select Skin from the list. Visual Studio will present a default skin which you should delete. We will start off by changing the look of the textbox control on the form. We can create a customised skin for the control by keying in a declaration for an asp textbox control, which is just the same as declaration of a server-side control in an ASPX, except that we don't set the ID or value properties in the skin.

The runtime will apply the property values and styles in this skin to all of the textbox controls on every page using the 'default' theme. This will automatically style every textbox on every page that uses this theme. I have also created a skin for the button and the calendar controls show below. Now, all we need to do is link our asp page to our default theme. Earlier in this tutorial we looked at applying a set of color attributes to the Menu control.

In this section we'll see how Skins work and how to apply them. Skin files define specific controls and the attributes that apply to them. That is, a. The Skin file's job is to preset the style properties for the control.

Skin files reside in named Theme folders for an application, accompanied by any necessary CSS files.