Click here to Skip to main content
12,244,049 members (47,799 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked

Cameleon web templates

, 16 Dec 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Changing the colour of an ASP.NET Master Page web template using C# to change the CSS.


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#.


Sites such as and 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";%>

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.

Home page shot

The hyperlinks beneath the coloured boxes look like this:

<table style="width:100%">
<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>

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 != "")

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

        if (getcolour == "green") {
            cookie.Value = "green";
            cookie.Expires = DateTime.Now.AddYears(1);
            cookie.Domain = "";
        else if (getcolour == "orange") {
           cookie.Value = "orange";
           cookie.Expires = DateTime.Now.AddYears(1);
           cookie.Domain = "";
       else if (getcolour == "pink") {
           cookie.Value = "pink";
           cookie.Expires = DateTime.Now.AddYears(1);
           cookie.Domain = "";
       else if (getcolour == "purple") {
           cookie.Value = "purple";
           cookie.Expires = DateTime.Now.AddYears(1);
           cookie.Domain = "";
       else if (getcolour == "blue")
            cookie.Value = "blue";
            cookie.Expires = DateTime.Now.AddYears(1);
            cookie.Domain = "";

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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

John Bracey
Software Developer
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralComplimentary Article - Colour Washing Images Pin
Gavin Harriss22-Dec-09 0:19
memberGavin Harriss22-Dec-09 0:19 
GeneralRe: Complimentary Article - Colour Washing Images Pin
John Bracey22-Dec-09 7:19
groupJohn Bracey22-Dec-09 7:19 
GeneralxCss - a syntax-based approach Pin
Memetican21-Dec-09 16:39
memberMemetican21-Dec-09 16:39 
GeneralRe: xCss - a syntax-based approach Pin
John Bracey22-Dec-09 7:14
groupJohn Bracey22-Dec-09 7:14 
GeneralRe: xCss - a syntax-based approach [modified] Pin
Memetican22-Dec-09 10:00
memberMemetican22-Dec-09 10:00 
GeneralRe: Hi, Pin
John Bracey17-Dec-09 10:05
groupJohn Bracey17-Dec-09 10:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160426.1 | Last Updated 16 Dec 2009
Article Copyright 2009 by John Bracey
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid