Changing site color scheme
By: Mark Aplet

Change Site Color Scheme.


I found it wasn?t to difficult to give users the ability to select a color scheme for their site. This is done by using the application.cfm to hold the variables to be used throughout the pages.

This is really easy to set up for basic functionality, you may want to add some additional error checking and security if you wanted to use this on a full blown website. But for now I'll just stick to the basics to get you started.

This page will use four CFM pages and one database. 

  • application.cfm
  • page1.cfm
  • color_maint.cfm
  • color_maint_action.cfm
  • database.mdb

First thing first, Lets set up a database. 

  1. Create a new database or add a table to an existing one. Save the table as "ColorScheme" and create an ODBC Connection to your DB.

    Here are the fields:
    Fieldname         Value
    ---------------------
    Color_ID              1
    PageColor           blue

  2. The next thing to do is create the application.cfm. It's in here that we will define all Color Scheme variables to be used throughout the site.
    application.cfm
    ============================
    <!--- Checking for the user defined color scheme --->
    <CFQUERY NAME="GetPageColor" DATASOURCE="MyDSN">
        SELECT PageColor
        FROM ColorScheme
    </CFQUERY>


    <!--- Begin checking for color scheme --->
    <CFIF GetPageColor.ColorScheme IS "blue">
       <CFSCRIPT>
           BG_CLR = "##FFFFFF"; // Sets the color of the page background to white
           TBL_CLR1 = "##000099"; // Sets table colors to dark blue
           TBL_CLR2 = "##99CCFF"; // Sets table color to light blue
        </CFSCRIPT>
    <CFELSEIF GetPageColor.ColorScheme IS     "green">
       <CFSCRIPT>
          BG_CLR = "##FFFFFF"; // Sets the color of the page background to white
          TBL_CLR1 = "##339900"; // Sets table colors to dark green
          TBL_CLR2 = "##99CC33"; // Sets table color to light green
       </CFSCRIPT>
    <CFELSEIF GetPageColor.ColorScheme IS     "orange">
       <CFSCRIPT>
          BG_CLR = "##FFFFFF"; // Sets the color of the page background to white
          TBL_CLR1 = "##FF6600"; // Sets table colors to dark orange
          TBL_CLR2 = "##FFCC00"; // Sets table color to light orange
       </CFSCRIPT>
    </CFIF>
  3. ==========================
    Next we need to set up page1.cfm to use the color schemes in the application.cfm. 
    NOTE THE COLOR VALUES ARE INCLUDED DYNAMICLY FROM THE APPLICATION.CFM
    page1.cfm
    ==========================
    <html>
      <head>
         <title>    Color Scheme</title>
       </head>

    <body>
      <table width="500" height="200" border="0" cellpadding="0" cellspacing="0">
         <tr>
            <CFOUTPUT><td bgcolor="#TBL_CLR1#"></CFOUTPUT>
                <table width="500" height="200" border="0"cellpadding="5" cellspacing="1">
                     <tr>
                        <CFOUTPUT><td height="10" bgcolor="#TBL_CLR2#"></CFOUTPUT><strong>Page header goes here</strong></td>
                     </tr>
                     <tr>
                        <CFOUTPUT><td valign="top" bgcolor="#BG_CLR#"></CFOUTPUT>Additional page stuff goes here.<br>
                        <a href="color_maint.cfm">Click here</a> to change color scheme</td>
                    </tr>
                    <tr>
                        <td height=    "10"></td>
                    </tr>
               </table></td>
         </tr>
    </table>

    </body>
    </html>
  4. ========================
    Now we need a page that we can administer the color scheme from. I'll call it color_maint.cfm
    In this page we will build out a select box for the color schemes.

    Note: the hidden fields. The first one has a value of "1" and is used in the color_maint_action.cfm to determine what record needs to be updated. The second hidden field is the Opperation to be preformed. in this case it's "u" for update.

    color_maint.cfm
    =========================

    <html>
      <head>
        <title>    Color Maint</title>
      </head>

    <body>
      <form name="form1" method="post" action="color_maint_action.cfm">
        <input type=    "hidden" name="Color_ID" value="1">
        <input type=    "hidden" name="op" value="u">

       <p>Select the color scheme for your site: 
       <select name="ColorScheme" id="ColorScheme">
         <option value=    "blue" selected>Blue</option>
         <option value=    "green">Green</option>
         <option value=    "orange">Orange</option>
       </select> 
       <input type=    "submit" name="Submit" value="Update Scheme"> 
       </p>
          </form>
    </body>
    </html>
  5. =========================
    The last part is the actual processing of the data, and updating of the database.

    In This Page the first thing it does is check if the "op" value exists, if it does not. it sends the user back to some specified page. In this case, page1.cfm

    If the user submited the form it will contain the FORM.op value of "u" and will continue to process the page.
    the cfupdate code will automaticly compare values with the database und update the values for Color_ID and ColorScheme

    Then It will print to the screen some sort of confirmation. In this case a thank you message with a link back to page1.cfm. Once you go back to page1.cfm you will notice the new colors scheme of the tables.

    color_maint_action.cfm
    ==========================

    <html>
      <head>
         <title>    Color Maint Action</title>
      </head>

    <CFIF NOT IsDefined ("FORM.op")>
       <CFLOCATION URL=    "page1.cfm">
    </CFIF>

    <CFIF FORM.op IS     "u">
       <CFUPDATE DATASOURCE=    "MyDSN" TABLENAME="ColorScheme" FORMFIELDS="Color_ID, ColorScheme">

       <B>THANK YOU</B><BR>
          Color Scheme Updated! To view the changes, <a href="page1.cfm">Click Here</a>. 

    <CFELSE>
       <B>Sorry</B><BR> An Error Occured.

    </CFIF> 

    </body>
    </html>
  6. =========================
    Now surf to page1.cfm and take note of the color, then go through the color changing process, and return to page1.cfm and you will new see the difference. 

    That's it.

**********************************
  TUTORIAL BY: MARK APLET 
  EMAIL: apletfx@saber.net
**********************************

About This Tutorial
Author: Mark Aplet
Skill Level: Beginner 
 
 
 
Platforms Tested: CF5
Total Views: 39,342
Submission Date: November 29, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 8
Discuss This Tutorial

  • I know this is very bad code. I wrote it many years ago for the site and have requested Pablo remove it but it has not been taken down yet. Sorry.

  • Am I suppose to save application.cfm in another directory? I have ran this code exactly and i get a time out error. It will not produce any output. What could I be doing wrong?

  • Hi I was very intencive when i see your workgroup with my wish for you to keep on this level, I am very interested in this aspects of work spesificaly on the flash and how i can create an excelent animation on my web projects, inspite of that i have a lot of decuments and resources which i look at to find a way to get start with this kind of work, so i found you and i am a preciate your help if you show me the from where can i start. Best Regards Baher Rayyan

  • That is nasty code!! Have a database hold the page name (test.cfm) and its CSS name (blue.css). Then make a CSS for each set of colour styles, then just do a check on each page against the DB and dynamically include the path to the CSS in a