Web Theme Templates Creator

Kevin Wollmann

2.67/5 (3 votes)

Jan 23, 2008

CPOL

1 min read

77243

2768

This is a way to make Website Theme templates automatically.

Introduction

Theme Template Creator is an application to generate Web application themes automatically. This project shows a way to quickly add a theme to a website theme template. The reason for this is that I was trying to make a web template that is very clean and has the look of a Windows Forms Application. Instead of cutting all these images with an image editor, I have made it so that it automatically cuts them for me.

Using the Code

First, we will draw the template with GDI and select all the color and image properties that we want to work with. If we have selected the color we want, we can now create the output files that we will need to make the template work. The output images that we make are cut from the main image and saved to a selected path. The output is as follows: folder (SteelBlue), folder (Images), files (SteelBlue.css, TableTemplate.txt). Copy the color-named folder into the themes folder in your web project. Add the table template text to the HTML body tags and the following code to MasterPage:

<link href="App_Themes/SteelBlue/SteelBlue.css" rel="stylesheet" type="text/css" />

Add this code to MasterPage within the body section to create the table layout for your theme images:

<table id="Template-Table">
    <tr>
        <td id="header-left"></td>
        <td id="header-logo"></td>
        <td id="header-center" colspan="2"></td>
        <td id="header-right" style="width: 5px"></td>
    </tr>
    <tr>
        <td id="title-left"></td>
        <td id="title-center" colspan="3"></td>
        <td id="title-right" style="width: 5px"></td>
    </tr>
    <tr>
        <td id="sidebar" colspan="2" rowspan="2">
        <td id="logincorner"></td>
        <td id="loginbar"></td>
        <td id="loginbar-right" style="width: 5px"></td>
    </tr> 
    <tr>
        <td id="ww" colspan="2"> add contentPlaceHolder to Here</td>
        <td id="sidebar-right" style="width: 5px"></td>
    </tr>
    <tr>
        <td id="status-left"></td>
        <td id="status-center" colspan="3"></td>
        <td id="status-right" style="width: 5px"></td>
    </tr>
    <tr>
        <td id="copyright-left"></td>
        <td id="copyright-center" colspan="3" ></td>
        <td id="copyright-right" style="width: 5px"></td>
    </tr>
< /table>

Add this key to the AppSettings in the web.config file:

<add key="DefaultThemeName" value="SteelBlue" />

You can also add this attribute to pages in web.config:

theme="SteelBlue"

History

This is only to prove a concept, so do as you please. If someone does use these templates for a website, send me a link so I can check it out.

23 January, 2008 -- Original version posted