A Look at Themes

The theme of this article is Themes. I will show you that what Themes are used for and how you can make you own Themes quickly and easily. This is a multi series article so stay tuned for the rest of the series.

Introduction:

What's up with Themes?

Hey! we got CSS (Cascading Style Sheets) so why do we need Themes? The thing about CSS is that it only exposes some fixed style properties which we can use. If we want to change some property like AlternatingItemStyle of the GridView control we will not be able to do this by using simple CSS. Themes allow you to change the control properties. This mean you can change most of the properties exposed by any server control in ASP.NET 2.0.

Gettting Started With Themes:

Let's get started with Themes. The first thing that you need to do is to add a skin file. Once you try to add a new skin file ASP.NET will make a folder called App_Themes in which all Themes will be placed. After the App_Themes folder has been created you can simply add .skin files inside the App_Themes folder. You can name the Theme files according to their action. Like if you are adding a Theme which makes the appearance of your page orange you can name is [YourSideName]_Orange_Theme. You can name it anything you want from orange Theme to "Yellow Banana" Theme.

What is in that Skin?

Skin files contains the definition of the server controls on which the Themes will be applied. Here is my Skin file called "Red" whose purpose is to make the GridView red.

<asp:GridView runat="server" BackColor="White" BorderColor="#CC9966"

BorderStyle="None" BorderWidth="1px" CellPadding="4">

</asp:GridView>

As, you might have already noticed that the GridView definition does not contain the ID attribute. That is because this Theme is applied to all the GridViews on the page. There are couple of ways that you can apply different Themes for the same server control.

Applying Themes:

There are various ways to apply the Theme to the page. The simplest one of them is to use the Page directive to apply the Theme to the current page.

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

The above will apply the Theme to the current page. If you wish to apply the same Theme to all the pages of your website then it is a better idea to define the Themes in the configuration file.

<system.web>

</pages>

</system.web>

You can also apply Themes dynamically using the Page.Theme property. The thing to remember about applying the Themes programmatically is that you can only apply it inside the Page_PreInit event. Check out the code below which applies the Theme at runtime.

protected void Page_PreInit(object sender, EventArgs e)

{

Page.Theme = "Green";

}

One thing that you need to remember is that when you set the Theme at different stages the Theme that is set dynamically takes precedence over the Page directive and Web.config. This means that if you have define your Theme to be "Blue" in Web.config and "Green" is Page directive and "Red" dynamically then the Theme set for the page will be set "Red".

There is much more to cover in Themes which will be covered in later articles.

hope you liked this article, happy coding

If you are one of the thousands that visit GridViewGuy for your .NET articles and resources, you might be interested in making a donation. Extra cash helps pay for the hosting services and speed things up around here, and makes this website possible.

Make a Donation

Once, again thank you very much and remember its because of you FINE people that this website is up and running.

Export Button is a custom control that let's you export your DataGrid or TextBox data to several different formats. The control is extremely easy to use and also exposes design time features. In this article I will discuss some of the features of the Export Button and how it benefits the developer.

BUY IT NOW