Cameleon web templates

Introduction

Ever wanted to give your website viewers an opportunity to customise the colour of your website? This article gives a solution for those using ASP.NET to build their sites. Here, we're using ASP.NET Master Pages, and the language of choice is C#.

Background

Sites such as msn.com and bbc.co.uk allow users to change the template colours of their sites. The idea may seem like a gimmick and a bit pointless, and is not needed by everyone or is to everyone's taste.

There is mileage in it some where though - MSN and the BBC are big organisations, and would have spent a lot of money on marketing research.

Using the code

First of all, let's look at the order of play and the files required. We start off with default.aspx - this fires up the domain/folder into life when requested (nothing new here). This calls up pc.master (the template file) and master.cs (the code-behind). In turn, the pc.master calls up central.aspx (the style sheet), and initially, the home control - home.ascx is called up. Now, the web page is loaded.

All the work is done in central.aspx and master.cs.

The first key point about this is, the style sheet is an ASPX file and not a CSS file. The central.aspx file is rendered as a CSS file because we declare the content type at the top of the document. The style sheet looks like this:

<%  Response.ContentType = "text/css";%>
<%@ Page Language="C#"%>

<% 
    string colormedium = null;
    string colorstrong = null;
    string colorweak = null;
    string logo = null;
    
    HttpCookie cookie = Request.Cookies["colorme"];

    if (cookie == null) {
        
        Random RandomClass = new Random();
        
        int RandomNumber = 0;
        RandomNumber = RandomClass.Next(1, 5);
        
        if (RandomNumber == 1) {

            colorstrong = "#55AAFB";// - strong blue
            colormedium = "#8FC8FD";// - medium blue
            colorweak = "#C9E5FF";// - weak blue
            logo = "url('images/picassocode-blue.jpg')";//- blue logo
        }
        
        else if (RandomNumber == 2) {

            colorstrong = "#AF51FF";// - strong purple
            colormedium = "#CB8DFF";// - medium purple
            colorweak = "#E6C9FF";// - weak purple
            logo = "url('images/picassocode-purple.jpg')";//- purple logo

        }
        
        else if (RandomNumber == 3) {

            colorstrong = "#FFBD4C";// - strong orange
            colormedium = "#FFD189";// - medium orange
            colorweak = "#FFE8C5";// - weak orange
            logo = "url('images/picassocode-orange.jpg')";//- orange logo

        }
        
        else if (RandomNumber == 4) {

            colorstrong = "#FF5489";// - strong pink
            colormedium = "#FF91B8";// - medium pink
            colorweak = "#FFCDE0";// - weak pink
            logo = "url('images/picassocode-pink.jpg')";//- pink logo

        }
        
        else if (RandomNumber == 5) {

            colorstrong = "#C3E473";// - strong green
            colormedium = "#DDEFA5";// - medium  green
            colorweak = "#F1F9D7";// - weak green
            logo = "url('images/picassocode-green.jpg')";//- green logo
        }

    }
    
    else if (cookie != null) {
        
        if (cookie.Value == "blue") {

            colorstrong = "#55AAFB";// - strong blue
            colormedium = "#8FC8FD";// - medium blue
            colorweak = "#C9E5FF";// - weak blue
            logo = "url('images/picassocode-blue.jpg')";//- blue logo
        }
        
        else if (cookie.Value == "purple") {

            colorstrong = "#AF51FF";// - strong purple
            colormedium = "#CB8DFF";// - medium purple
            colorweak = "#E6C9FF";// - weak purple
            logo = "url('images/picassocode-purple.jpg')";//- purple logo
        }
        else if (cookie.Value == "orange") {

            colorstrong = "#FFBD4C";// - strong orange
            colormedium = "#FFD189";// - medium orange
            colorweak = "#FFE8C5";// - weak orange
            logo = "url('images/picassocode-orange.jpg')";//- orange logo
        }
        

        else if (cookie.Value == "pink") {

            colorstrong = "#FF5489";// - strong pink
            colormedium = "#FF91B8";// - medium pink
            colorweak = "#FFCDE0";// - weak pink
            logo = "url('images/picassocode-pink.jpg')";//- pink logo
        }
        else if (cookie.Value == "green")
        {

            colorstrong = "#C3E473";// - strong green
            colormedium = "#DDEFA5";// - medium  green
            colorweak = "#F1F9D7";// - weak green
            logo = "url('images/picassocode-green.jpg')";//- green logo
        }

    }
%>

body { font-family: Tahoma,Verdana, 
       Arial;font-size:100%;padding:0;margin:0;
       background-color:#CFCFB8;color:#9a9a9a}
a{    color:<% = colorstrong %>
    text-decoration:none;
    }
a:hover{
text-decoration:underline
}    

table {
border-collapse : collapse; 
}
table td, table th {
padding : 0; 
}
.img_border{border:1px solid #000;margin:5px}
.logo{background-image:<% = logo%>}
.mediumback{background-color:<% = colormedium%>}
.mediumborder{border:solid 3px <% = colormedium%>}
.mediumtext{color:<% = colormedium%>}
.strongback{background-color:<% = colorstrong%>}
.strongborder{border:solid 3px <% = colorstrong%>}
.strongtext{color:<% = colorstrong%>}
.weakback{background-color:<% = colorweak%>}
.weakborder{border:solid 3px <% = colorweak%>}
.weaktext{color:<% = colorweak%>}

/* menu */
.mymenu{
margin: 5px 0;
padding: 0;
}
.mymenu a.menuitem{
background-color:<% =colorweak %>;
font-size:85%;
color: #000000;
display: block;
position: relative;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
border-bottom: 1px solid #9A9A9A;
text-align:left;

}
.mymenu a.menuitem:hover{
background-color:#ffffff;
}

When central.aspx loads, the server reads the C# ASPX content and then renders the rest as CSS to the browser. This is because we declare our content type as "text/css".

In central.aspx, we ask if there is a cookie called 'colorme'. If not, we set a random number between 1 and 5 and define four variables approriate to the random number. (The variables will set the logo that was brought in, a weak colour, medium colour, and a strong colour.) If there is a cookie called 'colorme', we set our four variables to the appropriate logo and colours. Once the four variables are set, the different CSS styles are assigned their relevant values.

The above happens as and when the page loads - colours are set.

Now, the user is given a choice of colours they can choose from. In our example, we have green, orange, pink, blue, and purple.

The hyperlinks beneath the coloured boxes look like this:

<table style="width:100%">
<tr>
<td></td>
<td style="text-align:right">Change colour</td>
  <td><a href="default.aspx?colour=green"><img src="images/square-green.jpg" 
           alt="Change to green" class="img_border" style="vertical-align:middle"/></a></td>
    <td><a href="default.aspx?colour=orange"><img src="images/square-orange.jpg" 
           alt="Change to orange" class="img_border" style="vertical-align:middle"/></a></td>
    <td><a href="default.aspx?colour=pink"><img src="images/square-pink.jpg" 
           alt="Change to pink" class="img_border" style="vertical-align:middle"/></a></td>
    <td><a href="default.aspx?colour=blue"><img src="images/square-blue.jpg" 
           alt="Change to blue" class="img_border" style="vertical-align:middle"/></a></td>
    <td><a href="default.aspx?colour=purple"><img src="images/square-purple.jpg" 
           alt="Change purple" class="img_border" style="vertical-align:middle"/></a></td>
</tr>
</table>

Upon clicking on any one of them, default.aspx is fired up, calling in master.cs and central.aspx. central.aspx will behave as explained above. master.cs is on the look out for the 'color' querystring in the URL.

master.cs looks like this:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    void Page_Load()
    {

        string getcolourcarry = Request.QueryString["colour"];
        string getid = Request.QueryString["id"];

        if (getcolourcarry != "")
        {
            changecolor(getcolourcarry);
        }

        if (getid == "control2")
        {
            mainblock.Controls.Clear();
            Control c1 = LoadControl("control2.ascx");
            mainblock.Controls.Add(c1);
        }
        else if (getid == "control3")
        {
            mainblock.Controls.Clear();
            Control c1 = LoadControl("control3.ascx");
            mainblock.Controls.Add(c1);
        }
        else
        {
            mainblock.Controls.Clear();
            Control c1 = LoadControl("home.ascx");
            mainblock.Controls.Add(c1);
        }
    }
    void changecolor(string getcolour)
    {
        HttpCookie cookie = new HttpCookie("colorme");

        if (getcolour == "green") {
    
            cookie.Value = "green";
            cookie.Expires = DateTime.Now.AddYears(1);
            cookie.Domain = "picassocode.net";
            Response.Cookies.Add(cookie);
        }
        else if (getcolour == "orange") {
           cookie.Value = "orange";
           cookie.Expires = DateTime.Now.AddYears(1);
           cookie.Domain = "picassocode.net";
           Response.Cookies.Add(cookie);
       }
       else if (getcolour == "pink") {
           cookie.Value = "pink";
           cookie.Expires = DateTime.Now.AddYears(1);
           cookie.Domain = "picassocode.net";
           Response.Cookies.Add(cookie);
       }
       else if (getcolour == "purple") {
           cookie.Value = "purple";
           cookie.Expires = DateTime.Now.AddYears(1);
           cookie.Domain = "picassocode.net";
           Response.Cookies.Add(cookie);
       }
       else if (getcolour == "blue")
       {
            cookie.Value = "blue";
            cookie.Expires = DateTime.Now.AddYears(1);
            cookie.Domain = "picassocode.net";
            Response.Cookies.Add(cookie);
       }
   }
}

On page load, we look for two things - the ID querystring and the colour querystring. The ID querystring simply directs us to the relevant page - in our case, we either load up control2.ascx, control3.ascx, and if the ID query is nothing, then home.ascx is loaded.

The 'colour' querystring is what we're after though. If it's not equal to null, we see if it's equal to one of our colours - green, orange etc. If so, then we simply create a cookie according to the colour chosen.

central.aspx is then fired, and goes through the process of seeing if we have a cookie by the name of 'colorme' and chooses the relevant style.

Points of interest

Note that you could allow your users to change any style if you set the style sheet up to do so.

The method is cookie driven. Most users have the ability to block and delete cookies - you may want to add a help page describing the ins and outs of this.

See a live working example here.