ASP.NET 2.0 Theme Creation using ITracker

When I started working with ASP.NET 2.0 a few months back I also started in parallel changing my design methods for UI to CSS based table-less designs. I have scoured the web getting information on techniques using CSS along with ASP.NET to find a good way to build sites that are easy to change and maintain. I found a great book that helped me tremendously with my CSS layout and understanding of the how and why of CSS. Sitepoint published a book titled HTML Utopia: Designing Without Tables Using CSS. Sitepoint also has an informative web site with some of the best forums on design available. I have not abandoned tables completely in my pursuit of better design techniques. For instance, I still use the tables for form layout when a form needs multiple columns. However, for the most part I am a believer in CSS based design and layout. Just look at some of the inspiration on www.csszengarden.com to gain a full understanding of what CSS can do for your designs.

ASP.NET 2.0’s new features enable a great way to apply a design to a site using Master pages and Themes which I will cover as the article progresses. I have always used Dreamweaver for my site design because Visual Studio was just not suited for visual design. With Visual Studio 2005, Microsoft has improved this deficiency quite a bit. Microsoft is also abandoning Front Page and working on a much better product in this author’s opinion with Expression Web, not to mention this product has support for master pages whereas Dreamweaver does not.

On to the meat of the article:

When I approached Curt Christiansen about skinning his ITracker project I really had no good idea of my approach to workflow. For instance, this is the 4th CSS based site that I have created and the First using master pages and themes in ASP.NET 2.0. After a few tries I have found the following approach worked for me. I am always open to workflow ideas so please forward me any that you may have.

Workflow

1. Design the mockup in Photoshop.
2. Get Curt (Client) to approve the design.
3. Cut the image elements from my mockup.
4. Using Expression Web or Dreamweaver (or any other program that you see fit to use) build the design using a single HTML file.
5. Create a new master page and if needed a theme folder.
6. Test Test Test.

Ok now that we have the workflow hammered out, let me try to explain each in better detail. If you are only interested in the ASP.NET 2.0 portions of this article, skip down to part 5. Otherwise, read on:

Design Phase

I am only going to skim the surface of this because this article is not about how to design a mockup or use Photoshop. There are far better designers than I that can give you details of design and how to use Photoshop. One book that I will recommend on this subject is The Photoshop Anthology by Sitepoint. What I wanted for ITracker was a clean design that would allow the focus to stay on the content of the site. The intended use for this site is internal to a company. This means that the public will not use the site and we do not have to work as hard holding the visitors attention with a compelling design. I also decided on a fixed width design (control freak alert). I just like the way a fixed width works and looks if there is not a good reason to go with fluid. In this instance, I think a fluid design will not add anything to the site of great importance. Now with all that said if more information is needed on the page and you needed more space then a fluid design would be the way to go.

Approval

Simply put get the client’s opinion on the design and make the changes that are going to come down the pipe. I have only had one client that went with my first design and did not request one change. I have had clients that requested five or more changes to the design before final approval. This phase causes the greatest delay in any web project. Just do not proceed until you have final approval from the client in writing.

Gather Required Elements

Ok the client has approved the design and you will need to cut the images out and ready them for the web. Again, I am not going into the details of how to do this (see link to The Photoshop Anthology).

Build a Design Page

This is where I will create a temporary html page and start the process of putting my design from mockup to code. I create all of my CSS in this same file unless the CSS is getting unmanageable and too much scrolling is required to view it all. A couple of things to keep in mind here: Test early and often on each browser that you want the application to work with. If you are having layout troubles for any element check the margins and padding of that element and the elements around that one. What I will do is what Rachel Andrew recommends, build each section and test it before moving on to the next section when you are learning how to put together a CSS page.

Create a Web Site or Project in Visual Studio 2005

Now we are ready to put all of our work into a working design. Either create a new web site or project or modify an existing project or web site to handle a theme. If you need to add theme support to a project, follow the steps outlined below:

1. Create a Theme folder in your application. Right click on your project and select, Add>New ASP.NET Folder>Theme. Visual Studio will create a folder named App_Themes in your project.
2. Create a folder to hold your theme. Now that you have the App_Themes folder you will need to create another folder for each of your themes. Right click on the App_Themes folder and add another ASP.NET theme folder.
3. In this new folder that you created in step 2 create an images folder.
4. Create a new CSS file and add all of your CSS from the design you created from the design html page. Save this file in your individual theme folder.
5. Create a skin file. Right click on your individual theme folder and add a new skin file to the theme. Your project should look like this. I created the Theme3 for the ITracker project.
   
6. Add a new master page to the project. Right click on the project in your solution explorer and choose add item. Then select the master page item and name it what ever you want. I tried to keep the same convention that Curt used. Just make sure the extension is .Master.
7. Copy your html into your master page and make sure that the content holder(s) are intact.
8. In the web.config file add the following lines of code. Use the web.config file included in the download for examples of where these lines should go.
9. <pages theme="dfs.ITracker.Theme3">
10. <add key="MasterPageName" value="~/ITracker3.Master" />
11. You can change these based on the template that you want to use.
12. Modify the skin file. If you want to use the skin file to skin certain elements such as the GridView.

13. <asp:GridView runat="server" width="97%" AutoGenerateColumns="false" CssClass="ITrackerGridView" CellPadding="3">     <HeaderStyle BackColor="#FFFFCC" ForeColor="#000000" Font-Bold="true" Font-Size="10px" />     <RowStyle BackColor="#C6B255" ForeColor="#000000" Font-Size="9px" />     <AlternatingRowStyle BackColor="#FFFFCC" ForeColor="#C6B255" Font-Size="9px" /> </asp:GridView>

14. Notice there is no ID in this description. Search Google for ASP.NET 2.0 skinning for more information on using this file. My preference is to use the CSS for almost everything that needs a style but you may prefer the other method. I included both in this article.

Test, Test, Test

Now we need to test the pages to make sure everything looks right and there are no viewing problems. For ITracker you may want to optimize for only one specific browser type or make sure that the system works for all browsers. For any public facing web site you will need to make sure it works for all browsers.

Brian Simmons

Back to Articles Main