Pre-made web templates provide you with a quick way of
producing a professional looking web site, however, the
template isn't always available in the color scheme you
want. The FrontLook Chameleon is a totally unique and wonderfully simple
tool that allows you to transform an existing template to the
color scheme you need, with no graphics and theme editing knowledge
required!
For this example, we will change my Fantastic Blue web
template into Fantastic Red web site. A web template, like Fantastic Blue, is made
up of a special FrontPage theme and extra graphics that are contained in
tables to create the wrap-around look. So lets get started:
Step 1 - Back up your work
Back up your work before you start!! This is
very important as using wrap-around web templates can be difficult to fix
once they become corrupted.
Step 2 - Bring up the Web
Bring up the web you wish to colorize in
FrontPage. Here is the Fantastic Blue theme as it
appears in the FrontPage Editor.
Fantastic Blue 2000 in the FrontPage Editor
Step 3 - Change the color of the Theme
Now go to the "Format" Menu and select
the "Theme Chameleon..." item to bring up the Theme Chameleon. You will see
the FrontPage theme graphics that make up the dynamic part of the
Fantastic Blue template.
Theme Chameleon Window and the Fantastic Blue Theme
FIRST, before you adjust any sliders, select the theme graphics in the
list on the left that you would like to colorize (you may wish to leave out the background image for instance).
For this example, we will leave all the theme graphics selected.
Now use the sliders to modify the brightness, saturation
and hue (color) of the theme graphics to your liking.
In this example the Hue slider is set to 108 degrees. We could have changed the
Brightness and Saturation sliders if desired. Now record the values of the Hue, Saturation and Brightness
sliders for use later.
Note: if you would like to match a standard color,
please see Matching Colors using
FrontLook Chameleon tip.
It is important to set the brightness, saturation and
hue of the theme without changing the graphics list so that you can use the same settings in the Image Chameleon for the other graphics in the template.
If you make a change to the hue, saturation and brightness sliders and
then change the graphics set in anyway, you have accumulated color changes
which will be difficult to reproduce in the Image Chameleon.
The Fantastic Blue Theme after moving the Hue to the 108
degree Mark.
Now press "Save As..." button to save the theme under a new
name. Also check the "Apply to Web" button.
I highly recommend that you do not save the theme under the same name as
the old theme, this could change the color of other
Fantastic Blue web sites inadvertently.
Renaming the Fantastic Blue Theme to the Fantastic Red
Theme.
Here I named the theme "Fantastic Red2000". After
pressing the "Save" button, the FrontPage editor window looks like the image
below:
The Theme is now red, but other graphics that make
up
the wrap-around theme need to be changed.
Step 4 - Make a list of the Extra Graphics
You will note that only the graphics associated with the
theme have been colorized. Now we must locate the extra graphics that make up
the theme, bring them up in the Image Chameleon and apply the same Hue, Saturation and Brightness setting
to them.
In the case of the Fantastic Blue theme, all the extra
graphics are in the "images" folder of the web. It is useful to determine the files
names of these graphics for the next step. You can do this by selecting a
template graphic and then pressing the "Alt-Enter" key sequence to bring up its
property dialog. You can then note the name of the file.
If the image appears to be un-selectable, then it is
likely a table cell's background image. To discover the file name of the cell's
background image, right click in the area of the background image and then
when the popup menu appears, select the "Cell Properties..." item. The
dialog below will appear.
Cell Properties Dialog
Then note the text edit field just below the
"Use background picture" check box. This should be the name of the image
that needs to be colorized.
For web templates that use FrontPage Page Includes, it will be a little
more tricky to list the names of the extra graphics. In this case bring up
the page that has been included on the page as a shared border and inspect the names of the
extra graphics using the methods outlined above.
For the Fantastic Blue template, here are
the list of extra graphics:
List of Extra Graphics in the Fantastic Blue Theme
Step 5 - Colorize the Extra Graphics
Now we will need to bring each extra graphic up in the Image
Chameleon and set to the brightness, saturation and hue values as recorded
previously. In this example, we will set the hue to 108 degrees as recorded above. We'll start with
the corner graphics called "fbbannerleft2000.gif".
Go to the "Format" menu and
select the "Image Chameleon..." item to bring up the Image
Chameleon window. Then
press the "Open" button and go to the images folder and select the
"fbbannerleft2000.gif" file and press the "Open" button. You should see the dialog
like the one illustrated below:
The next step is to colorize each graphic that makes up
the wrap-around theme.
Now move the Hue slider to exactly 108. You can click on
the slider rule to move the slider knob in one-click increments. You should now
see a red graphic as illustrated below:
Here the wrap-around image's Hue is rotated 108 degrees.
Now press the "Save" button to save the
graphic. Since the extra graphics are particular to this web only, there
is no reason to use the Save As... button. As you save each new graphic,
you should see each graphic updated to it's new color in the FrontPage editor
window.
Now do this for every extra graphic in the list
above. After you have finished, the FrontPage editor window should look
like the one illustrated below.
The Fantastic Red Theme after all the graphics have been
transformed.
Now save your page and press the "Preview in the
Browser" button to see your newly colorized theme.
And that's it!
Now you can enjoy your new theme! A simple task when you
have the right tools for the job, the FrontLook Theme and Image Chameleon.
