Click here to Skip to main content
Click here to Skip to main content

Cameleon web templates

, 16 Dec 2009
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.

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.

Home page shot

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.

License

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
Follow on   Twitter

Comments and Discussions

 
GeneralComplimentary Article - Colour Washing Images PinmemberGavin Harriss21-Dec-09 23:19 
GeneralRe: Complimentary Article - Colour Washing Images PingroupJohn Bracey22-Dec-09 6:19 
GeneralxCss - a syntax-based approach PinmemberMemetican21-Dec-09 15:39 
GeneralRe: xCss - a syntax-based approach PingroupJohn Bracey22-Dec-09 6:14 
GeneralRe: xCss - a syntax-based approach [modified] PinmemberMemetican22-Dec-09 9:00 
GeneralRe: Hi, PingroupJohn Bracey17-Dec-09 9:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web04 | 2.8.140709.1 | Last Updated 16 Dec 2009
Article Copyright 2009 by John Bracey
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid