Topic: Adding Themes to Web App for different Browsers
Description: This tutorial will show you how to add themes to a web application to manage different browsers with CSS
Notes: (none)
Open your web application and perform the following steps
- Right click on the Web Application Project in the Solution Explorer and select "Add ASP.Net Folder > Theme" and call the folder anything you would like (E.g. "InternetExplorer") Notice that the "App_Theme" folder will be created automatically. This theme will be your default for Internet Explorer.
- Repeat the steps above for each browser you would like to create a different theme for. (E.g. "Firefox", "Safari", "Opera", etc...)
- Under each folder, add a CSS file to each. This will be the CSS file that will be used for each individual theme.
In order for the different themes to take affect, you will need to add some code to the PreInit method of each page. This code will allow each page to get the browser type and set each theme, which, in turn, allows the different CSS files to be used.
- First Create your "Internet Explorer" theme
- Copy that CSS to the other theme folders and then modify the CSS as needed to give you the layout you desire
protected void Page_PreInit(object sender, EventArgs e)
{
try
{
string BrowserType = Request.Browser.Browser;
if (BrowserType == "Firefox")
{
Page.Theme = "Firefox";
}
else if (BrowserType == "IE")
{
Page.Theme = "InternetExplorer";
}
else if (BrowserType == "Opera")
{
Page.Theme = "Opera";
}
else if (BrowserType.Contains("Safari"))
{
Page.Theme = "Safari";
}
else
{
Page.Theme = "Firefox";
}
}
catch (Exception ex)
{
// This is my Exception Class, use your own Exception Catching, as needed
ExceptionManagement.Publish("AlbumManager.aspx.cs - Page_PreInit. " + ex.Message + " " + ex.InnerException);
}
}