Sunday, September 14, 2008

Changing site color scheme in coldfusion

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
============================
<!--- 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"; </b>
// 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.

No comments: