Designing Master Pages Using Themes and CSS

Introduction to Themes

First, you start with the creation of a website. Then you add a folder called App_Themes. Inside this folder, a second folder called Blue Theme is added. This folder is where the whole design required for the web site is stored. The folder can be named Green Theme or My Theme, whatever you think is appropriate. After this, add a master page.

Add the Blue Theme as a theme in web.config. For this process, add stylesheet="Blue Theme" in the page node, which already exists. After this, any CSS file in the Blue_Theme folder will be linked in and applied automatically.

Nothing is to be done to the master page. In the design view, the look of the master page can be viewed after applying the CSS. Multiple CSS files can be added and applied automatically.

Using print.css file in particular

For the print.css file the procedure is different. Rename the print.css as BlueTheme_print.css. In the master page, you need to include a link to this CSS file.

For the code snippet to work, the head tag may include runat="server".

And OnPageLoad() must have the Page.Header.DataBind() property.

In code you must use <%# %> instead of <%= %> that is use # instead of =.

The techniques described here are not the only one way to implement themes and CSS. Other techniques have their own advantages and disadvantages. Adding your own tweaks and modifications to suit your preferences is the ultimate goal. This is just a simple example so you have a place to start.