Using an ASP.Net Master Page with theme and CSS

Using an ASP.Net master page with a theme and CSS can be tricky.  Themes and master pages came out in 2005.  There were hundreds of articles written about them at the time.  Since then, however, the way we do web development has changed a great deal.  It's time to readdress the subject.  In this article, we'll cover the basics.  Then we'll add stylesheets for printing and for Internet Explorer only.
The Problem
Suppose I want to make a website without .Net, one that's nothing but HTML and CSS.   My HTML head might look something like this:
image002.jpg

Notice I'm linking in three CSS stylesheets, style.css, print.css and ie.css. 
Style.css, is the main CSS file for my website.   The "media" attribute indicates that this CSS applies when my page is displayed on a computer screen or projector.
The media attribute for my second CSS file, print.css, indicates that this file contains special CSS which only applies when someone is printing my page.  I can add CSS here that will hide the header, footer, advertisements, etc., when the page is being printed.  I can define different fonts and font colors for printing.
The last CSS file, ie.css, contains CSS which only applies when my page is being viewed in Internet Explorer.   The link to the CSS file is contained within a comment block.   Internet Explorer will include this extra CSS file.  Other browsers will ignore it.  The file will contain special CSS hacks necessary to make my page display correctly in Internet Explorer.
So my issue is this:  I want a Master Page that will apply style.css as the primary CSS.  I also want to include ie.css when I'm using Internet Explorer.  I want to use print.css when I'm printing.  Going further, when I'm in Visual Studio looking at a page in designer view, I want the Studio to apply style.css, so I can get some idea how my page is going to look when it's done.
The Basics
I'm going to go through the basics very quickly.  There are hundreds of articles out there about how to create a master page and theme.   I'm only going to make a few points here.
First I created a website.  I added a folder called App_Themes.  Within this, I added a second folder called BlueTheme.  That's my theme for this site.  If I wanted to add other themes, I could add other folders, GreenTheme, ModernTheme, etc.  I have also added a Master Page called Basic.Master.
1.gif

In my Web.config file, I have specified that I want to use BlueTheme as my theme for this website.  The pages node was already in the Web.config file.  All I did was add the attribute, styleSheetTheme=BlueTheme.

2.gif

Note that I could have said theme=BlueTheme instead of styleSheetTheme =BlueTheme.  The main difference between these is whether the style from the theme applies first and then the styles added to a particular page can override these, or the opposite.  
Adding Style.css
Including style.css is simple.  I just place the file inside the BlueTheme folder.  Now that I've specified in the Web.config file that I want to use BlueTheme, any CSS files I put in the BlueTheme folder will be linked in and applied automatically.  I don't need to do anything to the Master Page. 

3.gif
Now, when I look at the Master Page in Visual Studio in designer view, it shows me (approximately) what my page looks like after applying style.css.
4.gif

I could include multiple CSS files this way just by adding them to the BlueTheme folder.  All the CSS files in the BlueTheme folder will be linked in and applied automatically.
CSS For Printing
I can't just put my print.css file in the BlueTheme folder.  All the CSS files in the BlueTheme folder will be linked in and applied, even if I'm not printing.  I only want the print.css file to be applied when I'm printing.  I need to  put my CSS file somewhere else.
I have added a new folder to my project, Css.  Inside this folder, I've added my print CSS file.  I renamed my file from print.css to BlueTheme_print.css so that I won't get confused if I add additional themes later.

5.gif

Now in my Master Page, I need to include a link to this CSS file: 

6.gif

Notice I didn't hard code the address for the CSS file.  Instead, I used to link in the file at run time.   To make this work, the head tag must include runat="server."  Finally, in the code behind for the Master Page, I add one line of code, Page.Header.DataBind(); .



See full details: http://www.c-sharpcorner.com/UploadFile/afenster/2351/

Comments

Post a Comment

Popular posts from this blog

Asynchronous Socket Programming in C#

Image
Objective The objective of this article is to demonstrate a socket-based client/server application that will allow two-way asynchronous communication between a server and multiple client applications. Because this example uses asynchronous methods, the server application does not use threads to communicate to multiple clients (although internally the asynchronous communication mechanism uses threads at the OS level). The Difference Between Synchronous and Asynchronous Communication in Network Programming The key difference between synchronous and asynchronous communication can be explained with an example. Consider a server application that is listening on a specific port to get data from clients. In synchronous receiving, while the server is waiting to receive data from a client, if the stream is empty the main thread will block until the request for data is satisfied. Hence, the server cannot do anything else until it receives data from the client. If another clien
Read more

Url Routing MVC TUTORIAL

Image
This tutorial covers an introduction to the MVC pattern using Visual Basic. It also includes a brief overview of the URL routing assumptions that are a foundation to the implementation of the pattern. A sample application is created to demonstrate the fundamentals of this new web-application model. Implementing business rules and testing is also covered. Finally, the use of two alternative view engines, Silverlight and XML Literals, is coverd.
Read more

WCF Chat Sample

Image
The Chat sample demonstrates how to implement a multiparty chat application by using PeerChannel. Messages sent by any instance of a chat application are received by all other instances. To get samples and instructions for installing them Do one or more of the following: On the Help menu, click Samples . The Readme displays information about samples. Visit the Visual Studio 2008 Samples Web site. The most recent versions of samples are available there. Locate samples on the computer on which Visual Studio is installed. By default, samples and a Readme file are installed in drive :\Program Files\Microsoft Visual Studio 9.0\Samples\ lcid . For Express editions of Visual Studio, all samples are located online. For more information, see Locating Sample Files . Security Note: This sample code is intended to illustrate a concept, and it shows only the code that is relevant to that concept. It may not meet the security requirements for a specific environment, a
Read more