ColdFusion Tutorials - EasyCFM.COM

Changing site color scheme

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.

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
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
============================

<CFQUERY NAME="GetPageColor" DATASOURCE="MyDSN">
    SELECT PageColor
    FROM ColorScheme
</CFQUERY>


<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>
==========================
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>
========================
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>
=========================
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>
=========================
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
**********************************

All ColdFusion Tutorials By Author: Mark Aplet

Adding an indexed Search to your site (Part 1)
It is very easy to set up and create a professional search function much like a real search engine. Use Verity Collections and the tag to create fast search forms for your web sites.
Author: Mark Aplet
Views: 36,769
Posted Date: Saturday, February 1, 2003
Adding an indexed Search to your site (Part 2)
The long overdue part two of adding a verity search function. This part demonstrates how to index the information in your database so that it becomes usefull too.
Author: Mark Aplet
Views: 23,881
Posted Date: Monday, May 5, 2003
Banning the spam
Internet spam is on the rise, and more importantly spammers are targeting your sites comment forms. They are looking for the trackback urls to fool search engines into ranking their website higher in the search results. When this started to happen to me, I wanted to sent out emails to the offenders demanding that they stop. Unfortunatly the spam is being generated by bots and programs not some pimple faced kid behind a keyboard. Banning IP addresses is not enough and rarely works since intelligent spammers hide their true identity anyway. Next approach... Banning Keywords used by the offending sites. Thats where this tutorial comes in.
Author: Mark Aplet
Views: 10,640
Posted Date: Wednesday, March 15, 2006
Changing site color scheme
Add some personalization to your pages by letting the user pick their own color scheme. It's really quite simple and the benifits are awsome. This tutorial shows you how to set up your pages to use a dynamicly included scheme. It will also show you how to create all the pages neccessary to administer the color schemes.
Author: Mark Aplet
Views: 21,303
Posted Date: Friday, November 29, 2002
Color Picker
Sometimes, you want to be able to change the color of something on your page. Be it one item, or every item on the page. Using this simple color picker, you can create admin areas that can allow you or your visitors to pick their own colors and the value is automatically inserted into a text field.
Author: Mark Aplet
Views: 15,057
Posted Date: Saturday, July 12, 2003
Dynamic Sorting with CFSWITCH
Quickly and easily sort and order records in your database using a cfswitch in your query. Great technique for admin areas of your site, or just allowing visitors to sort the fields they want.
Author: Mark Aplet
Views: 17,380
Posted Date: Sunday, August 3, 2003
Improving Application Performance
One thing I am always trying to do is speed up my applications. As my site grows in size and complexity I find that I spend a fair amount of time re-coding pages because of a new technique I just learned. I wish I had learned about these techniques long before, and thereby allowing me to create more effective code. In this tutorial I'll try to explain some problem areas that I have identified, and some of the things you can do to improve performance.
Author: Mark Aplet
Views: 22,958
Posted Date: Monday, January 12, 2004
Improving Application Performance (Part 2)
Not all queries can be saved as an application variable. For Queries that do not meet the checkpoints in my previous tutorial there is another way to improve performance. Query Caching is another way to save data and eliminate unnecessary queries. This is for queries that are more dynamic in nature.
Author: Mark Aplet
Views: 11,956
Posted Date: Monday, January 12, 2004
Slighty better search
Someone on the forum posed a question a short while ago asking how to create a more advanced search function using a + symbol as a separator. So I created this advanced search function. This search function is just slightly better than a normal search as it adds the ability to separate two keywords with a + symbol. Lets start with the search form.
Author: Mark Aplet
Views: 23,365
Posted Date: Thursday, December 4, 2003