How to Use ASP themes In Your Web Project

Introduction

This guide is designed for developers and designers to assist them in using ASP themes into their ASP.Net 2.0 web projects.

There are 3 major steps in using an ASP theme in a web project, as outlined below:

STEP A	- Add the ASP themes to your web project
STEP B	- Apply the ASP theme to your website
STEP C	- Make custom modifications(Optional)

These steps are discussed in detail in the following pages, with practical instructions on how to accomplish each step.

Should you require more information on ASP themes and how to use them in your project, please visit the website at www.aspthemes.net, or send your emails to .

Step A - Add the ASP theme to your web project

The following outlines the process of adding an ASP theme to your ASP.Net 2.0 Web Project. An ASP theme must be added to the project before it can be used.

Add the ASP theme to your web project

Save the ASP theme file (a ZIP file) you have downloaded into a temporary folder of your choice.

Open the ZIP file. You should see the following files and folders:

File or Folder name	Type	Description
{theme}*	Folder	This folder contains the actual ASP theme, including a Skin file, a CSS file and an images folder.
userguide.pdf	PDF file	This file contains instructions on how to use your ASP theme in your web project.
{theme}.pdf*	PDF file	A quick overview of the theme, with visual examples to use as a quick reference.
additionalnotes.txt	Text file	This file contains special notes on the specific theme you have downloaded.

* {theme} is a placeholder for the actual name of the ASP theme (e.g. Spring Orange Trebuchet)

There is a folder in the ZIP file named according to the ASP theme you downloaded. Copy this folder into the ‘App_Themes’ folder of your web project.

The ‘App_Themes’ folder is located directly under the root folder of your project. If you do not have an ‘App_Themes’ folder in your project, then you will have to create the folder yourself.

For example, if you had a web project located in c:\SampleWebsite, you would follow these steps:

Create the ‘App_Themes’ folder under c:\SampleWebsite, if it does not already exists
Copy your themes folder from the zip file into the ‘App_Themes’ folder. Your ASP theme folder should now be located in the following path:

c:\SampleWebsite\App_Theme\{theme}

Where {theme} is the folder name of your theme

NOTE!You can have multiple folders in the ‘App_Themes’ folder, one for each theme. This allows you to apply different themes to your website.

Step B - Apply the ASP theme to your website

Once an ASP theme has been added to your project, your next step will be to apply the theme to your ASP.Net 2.0 web site. Applying the theme to the website allows the styling definitions, images and layout specified in the ASP theme to take effect on elements within the website.

Applying the ASP theme to your website

Open your project in Visual Studio or Visual Web Developer

If you’ve added the theme to your project, you should be able to see your themes folder in Solution Explorer (Please see screenshot).

Figure 1. The Spring Orange Trebuchet Theme in the Solution Explorer

You can apply your ASP theme to your ASP.Net Web Site in a number of ways. Select the option which works best for you and which you are most comfortable with.

Apply a theme by modifying web.config

A theme can be applied to a website by modifying the web.config file in your web project. Doing this will apply the theme to all the pages on your website. To do this, open your web.config file in the editor, and add the following snippet to the file.

If your project does not have a web.config file, you will need to create one yourself and add the below snippet into the new file.
```
<configuration>
    <system.web>
        <pages theme="{Theme}" />
    </system.web>
</configuration>
```
Where {Theme} in the snippet above is the folder name of your ASP theme.
Apply a theme in the page header

You can also apply a theme to individual pages by setting the ‘Theme’ attribute in the header of the ASPX file for that page. To do this, open the ASPX file (for which you would like to apply a theme) in the editor, and edit the page header using the format below.
```
<%@ Page Theme="{Theme}" Language="VB" %>
```
Where {Theme} in the snippet above is the folder name of your ASP theme.
Appy the theme programmatically

You can also programmatically apply a theme in the backend code on the Page_PreInit() event. To do this, add the relevant code below to your VB file, CS file or ASPX file (for which you would like to apply a theme) in the editor, using the format below.

VB.Net
```
Protected Sub Page_PreInit(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.PreInit    
    	
    Page.Theme = "{Theme}"

End Sub
```
C#
```
protected void Page_PreInit(object sender, EventArgs e)
{
    Page.Theme = "{Theme}";
}
```
Where {Theme} in the snippet above is the folder name of your ASP theme.

NOTE! A theme is referenced in the project according to its folder name under the ‘App_Themes’ folder of the project. If you change the folder name of the theme, then use the new folder name to reference the theme

Once the theme has been applied using any of the options listed above, you should be able to load up your website and see the styling changes take effect. The screenshots shows how the ‘Spring Orange Trebuchet’ ASP theme has been applied to a website to change the color and style of the site:

Figure 2. Website before theme is applied

Figure 3. Website after the Spring Orange Trebuchet theme has been applied.

NOTE! For ease of use, the ASP themes have been designed to override existing styles you may have already defined on your website. If you would like to retain styling for a particular element, please see the next section (STEP C - Make Custom Modifications)

Step C - Make Custom Modifications

The following shows the process for making custom modifications to the style and layout of a website once an ASP theme has been applied to it. The step is optional – you may not need or want to make any changes to the website once your ASP theme has applied its style and formatting to it.

Specify Custom Styling for Elements

Once an ASP theme has been applied to a website, there may be certain controls for which you would like to specify your own custom styling, or to have no styling specified at all. For these instances, you should specify an attribute of skinid=”nothing” for the ASP.Net controls. See the example below:

<asp:Login ID="Login1" skinid="nothing" _ 
    LoginButtonType=Button runat="server" />

For HTML elements, you will need to specify custom inline styles from within the control, using the !important keyword to override the CSS definition used in the ASP theme.

<a href="#" style="color: green !important">

Alternatively, if you are proficient in CSS, you have the option of directly modifying the skin and CSS files from within the themes folder.

Elements not automatically styled by ASP themes

There are a number of elements in your project which will not be automatically styled by the ASP theme after the theme has been applied to the website.

These elements are often used in website structural layouts and not as styled elements. These elements are therefore not styled automatically, but rather needs to be applied manually by you. The list of elements for which this applies are given below.

If you wish apply the ASP theme to one of these elements, specify the skinID (for ASP.Net controls) or class name (for HTML elements) for it in your HTML code using the reference table below.

Element		Skin ID/Class Name to specify
div		class="div1"
span		class="span1"
table		class="table1"
td		class="td1"
asp:Table		SkinID="aspTable1"

Table 1. List of controls and elements not automatically applied by ASP themes, and the syntax to manually specifying styles for them.

So for example, if you wanted to manually apply the ASP theme to a table on your website, you would edit the HTML as such:

<table class=”table1” width=100%”>

For some ASP themes, there are more than one alternative available for the manually themed elements listed above. In these instances, the next alternate class would be named div2, span2 and so forth.

Sometimes other controls and elements may have alternative styles available as well. If this is the case, then this will be specified in the additional_notes.txt document found in the ASP themes ZIP file.