Themes and Master Pages in ASP.NET 2.0 - A Perfect Combination
page 2 of 6
by Steven Swafford
Feedback
Average Rating: 
Views (Total / Last 10 Days): 35176/ 60

Create Your Theme

To add Themes to your web solution you will need to right click on you web solution, choose Add ASP.NET Folder and select Theme.  In this case I am creating a theme named Red.

Figure 1

The next step is to add the actual skin file to the theme we previously created.  To accomplish this, right click on the theme named Red and select Add New Item.

Figure 2

As you can see in listing 2 there are various file types you can choose from, in this case select Skin File and provide the name red.skin.  Once you accomplish this step your new skin provides the following example.

Listing 1

<%--
Default skin template. The following skins are provided as examples only.
 
1. Named control skin. The SkinId should be uniquely defined because
   duplicate SkinId's per control type are not allowed in the same theme.
 
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
   <AlternatingRowStyle BackColor="Blue" />
</asp:GridView>
 
2. Default skin. The SkinId is not defined. Only one default 
   control skin per control type is allowed in the same theme.
 
--%>

At this point you are ready to begin creating the skin for the various controls that you determined should have the ability to use a skin.  As an example, create a skin for a button control.  In order to accomplish this you need to add the following to the red.skin file.

Listing 2

<asp:Button runat="server" SkinId="Red" BackColor="red" ForeColor="black" />

Now you are ready to skin your button control back on your WebForm.  However, before you can do this you must first set the WebForm to use this theme.  This is accomplished by adding the theme attribute to the ASP.NET source code.

Listing 3

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
 Inherits="_Default" Theme="Red" %>

Finally, set the SkinId attribute of the button control.

Listing 4

<asp:Button ID="Button1" runat="server" Text="Red Skin Button" SkinID="Red" />

At this point you are ready to execute your application and view your work.  If all has worked as expected, you should see your button control skinned.

Figure 3


View Entire Article

User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2022 ASPAlliance.com  |  Page Processed at 2022-09-24 3:41:50 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search