Friday 29 June 2012

Using THEME and SKINS Asp.net

n this article we will discuss about how to create website with the help of using SKIN & THEME.
1. Create a new web site


2. In solution explorer right click the Web site as shown in the below screen & select “ADD ASP.NET folder” - Theme










































3. Add Theme say Blue as shown in above screen.

4. Right click on Blue theme - Add New Item - Select SKIN file - Name it as “Blue.skin”

5. Right click on Blue theme - Add New Item - Select CSS file - Name it as “Blue.CSS”

6. Repeat steps 3, 4, 5 for Red themes

7. Open Blue.CSS & paste this code
body {background-image:url('../../Images/blue.jpg'); }

8. Open Blue.SKIN & paste this code

9. Open Red.CSS & paste this code
body {background-image:url('../../Images/red.jpg'); }

10. Open Red.SKIN & paste this code


11. Now add THEME.ASPX to the web site: right click website - Add New Item - Select Web Form - Name it as Theme.aspx & paste this code


12. To see the above effect we can do at page level or Site level
a. Page Level : We need to either go to each page directive & add the Theme name that we want to use as shown below
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Theme.aspx.cs" Theme="Blue" Inherits="Theme" %>

b. Site Level : Go to web.config & look for Page Tag under System.Web tag & add the below code


13. Execute the page & see the impact by changing the theme in web.config or at page level

14. We can also override above setting by using Profiling. Go to web.config & add the below code under System.Web tag

15. Now got to Theme.aspx.cs file & add the below code in Page_PreInit event
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = Profile.MyTheme.ToString();
}

16. When you execute the page after adding above code you can see Blue theme is overwritten by Red theme.

No comments:

Post a Comment