 |
Web Development »
ASP.NET »
Howto
Beginner
License: The Code Project Open License (CPOL)
A Simple Way to Dynamically Change Style of Web for Each BrowserBy mheidariThis is a simple ASP.NET web application that can determine how users can view a single page with single content in the many browsers with custom presentation and styling |
C# (C# 2.0, C# 3.0), Javascript, CSS, HTML, XHTML, .NET (.NET 3.5), ASP.NET, WebForms, Architect
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
One of the most popular ways of styling a web application is by using general theme tools in ASP.NET and Visual Studio IDE and building one or more themes for each web pages or web site presentation. Another way is using style sheets without themes; this is the oldest technique which the web developers used before. But ASP.NET serves a new method of styling web application to performing a nice means of presentation of the page. This new tool is using Themes in your pages because the themes have a better feature than classic style sheets.
ASP.NET provides HttpLink class that can be useful for creating a dynamical link tag and then adding them to the header of the page.
Link tag is one of the most useful tags for linking the external resource to the page such as CSS (Cascading Style Sheet) for example:
<HTML>
<HEAD>
<TITLE>Welcome To My Web Site</TITLE>
<LINK href="mystyle.css" type="text/css" rel="Stylesheet" />
</HEAD>
<BODY>
.
.
.
</BODY>
</HTML>
In this example, a CSS file "mystyle.css" is attached to the page statically.
Now, I declare an instance of the HtmlLink class and then fill the attributes of the object and then add this control to the header of the page dynamically.
protected void Page_Load(object sender, EventArgs e)
{
//A link tag to external CSS file
HtmlLink linkCss = new HtmlLink();
//Defining attributes and values of the link tag
linkCss.Attributes.Add("href", "AppStyles/StyleSheet.css");
linkCss.Attributes.Add("type", "text/css");
linkCss.Attributes.Add("rel", "Stylesheet");
//Add HtmlLink instance to the header of the current page
Page.Header.Controls.Add(linkCss);
}
Now when the ASP page is loaded, the link tag is dynamically added to the page and style can be rendered.
In this example, I create a CSS file in the directory of the AppStyles and name it to StyleSheet.css and then dynamically create an HTML control (HtmlLink) and define attributes of the link tag and then add them to the header of the page in the load event of the page.
This technique usually works, but sometimes in different browsers with different versions, it can have some problems which are difficult to solve.
The next technique is using the ASP Themes for the pages and solving these types of discord:
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "MyThemeName";
}
As you see in this example, using the theme property of the Page is simple and useful. Now I will solve a repugnance of the different browser CSS rendering by using this technique. I make three types of different CSS files in the three themes of the page and then detect users browser and then apply and fit them to the page.
Now look at the CSS style that is defined just for the Internet Explorer:
body
{
background-color:Fuchsia;
font-family:'Times New Roman';
font-size:medium;
font-weight:normal;
margin:0px;
}
#mainContent
{
padding-top:10px;
padding-left:20px;
padding-bottom:10px;
background-color:Orange;
}
#header
{
float:none;
background-color:Silver;
font-style:normal;
font-size:large;
margin:20px;
padding:10px;
}
#info
{
background-color:#fc4322;
font-size:small;
float:left;
color:Black;
width:500px;
height:100px;
padding:10px;
margin:10px;
}
I will change some of the color values and font sizes and the position of some of the tags to change the face of the page in Internet Explorer. This style sheet is appended to the page when the user request is sent from Internet Explorer browser.
If the browser is Firefox or Chrome, another CSS file will be attached to the page and the view of the page is fully changed.
Thereupon client views your page in different styles with different browsers.
For example, you can see the different body selectors in the CSS files of each theme.
body
{
background-color:White;
font-family:'Times New Roman';
font-size:medium;
font-weight:normal;
margin:0px;
}
body
{
background-color:Maroon;
font-family:Tahoma;
font-size:small;
font-weight:bold;
margin:0px;
}
body
{
background-color:Fuchsia;
font-family:'Times New Roman';
font-size:medium;
font-weight:normal;
margin:0px;
}
You can view the difference between the face of the simple page with single content by using this technique of styling the presentation.
Therefore ASP.NET must know the browser types of the user client for changing the style of the page. So I write a snippet code for detecting the browser and then append a fit style to the page and then the user can view requester page nicely.
protected void Page_PreInit(object sender, EventArgs e)
{
if (Request.Browser.Browser.Equals("Firefox"))
Page.Theme = "Firefox";
else if (Request.Browser.Browser.Equals("IE"))
Page.Theme = "IE";
else if (Request.Browser.Browser.Equals("AppleMAC-Safari"))
Page.Theme = "Chrome";
}
You must set the Theme property of the Page in the PreInit Event of each page for which you have to change the style.
| You must Sign In to use this message board. | |||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 6 Jul 2009 Editor: Deeksha Shenoy |
Copyright 2009 by mheidari Everything else Copyright © CodeProject, 1999-2009 Web18 | Advertise on the Code Project |
