Applying Skins to WebParts in ASP.NET

Introduction:

This article demonstrates on how to apply Skins to ASP.NET WebParts using the skin file. Before we begin let us first understand the concept of the skins in ASP.NET.



What is a Skin file?

A Skin enables us to modify any of the properties applied to the server controls in our ASP.NET page. Skins can work in conjunction with CSS files or images. To create a Theme we can use a single skin file in the Theme Folder. The skin file extension should be always .skin.


For more information about ASPNET Themes and Skins then have a look at the following link below:

ASP.NET Themes and Skins

STEP 1: Designing the WebPart page.

Note that for simplicity of this demo, I just set up the page markup like this:

STEP 2: Creating the Skin file.

The following are the steps on how to create a skin file in Visual studio:

First we need to check if the ASP.NET Theme folder exists in your project. If the Theme Folder is not in your project then you can add this by right clicking on the project name à Add ASP.NET folder à then select Theme. You will notice that the App_Themes folder is automatically added to your project.

Now let's add a new skin file under the App_Themes folder, to do this then just right click on the App_Themes folder à Select Add new item à Select Skin file. In this demo I named the skin file to WZSkin.

STEP 3: Setting the look and feel of the WebPartZones in the Skin file.

In .skin file we can create multiple definitions in respect of same server control. To create multiple definitions of a single element we can use the SkinID attribute to differentiate among the definitions. The value of SkinID can be anything.

For simplicity of this demo, I set up the look and feel of the WebPartZones like this at the WZSkin file:

Note that we set each WebZone with different SkinID to determine which skin set will be used based from the DropDownList value that was selected.


Also note that you can embed CSS to your Skin file.

Now, since we are done setting up our Skin file then we can proceed to the next step.

STEP 4: Setting the SkinID programmatically.

In this demo, I simply use Session variable to hold the current value that was selected in the DropDownlist. If you wan’t to retain the current SkinID that was selected when you visit the page next time then you can store the SkinID value to the database instead of storing it in Session.

Here are the code blocks below for setting the SkinID.

Note: Themes and Skins should be set at PreInit event because it is where all the controls are being initialized.


STEP 5: Setting the Theme name in the page.

In order to work this out then we need to set the attribute Theme with its value like this below in the page declaration.

That's it! Hope you will find this article useful!