The CMSB Cookbook

HELPING CLIENTS PICK PAGE BACKGROUND COLORS - Mar 18th, 2011


A client asked if I could allow their visitors to pick a background color for the page that they were viewing and
here’s what I found. I’ve also used a modified version of this to allow clients to choose the color they wanted for
page backgrounds. (Well actually <div> backgrounds that fill the whole page).

When you mouse over a color, the background changes and stays that color until another color is chosen.

You can see a sample of this effect at:

       www.thecmsbcookbook.com/colors.php

Here’s how it’s done:

First, create a multi-record section editor called "colors", with 2 fields. A “Color Hex Code” text field and a
“Color Image” upload field and make them both required fields. Set the Color Image” upload field thumbnails to
around 20 x 20 pixels

On your viewer page, add an id=“theContainer” to the Body tag.

<body id="theContainer">

Insert the following code where you want your color table to appear:

<table>
<tr><?php foreach ($colorsRecords as $record): ?>
<td ><a href="#" onmouseover="document.getElementById('theContainer').style.backgroundColor = '#<?php echo
$record['color_hex_code'] ?>'; return false;"><?php foreach ($record['color_image'] as $upload): ?>

<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php
echo $upload['thumbHeight'] ?>" alt='#<?php echo $record['color_hex_code'] ?>' />

<?php endforeach ?></a> </td><?php endforeach ?>
</tr>

</table>

You can substitute Div tags with different id names instead of the body tag and of course you can style
your color table any way you want to.

You can change the action to require clicking on a color, by changing "onmouseover" to "onclick".

The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.