Before we start this tutorial on creating your theme there are some guidelines you should follow. First of all no theme JPG or SWF background should be bigger then 40Kb. The smaller the better for loading purposes. The second thing is that you can not use a progressive JPG image. These will not work in Flash. You can add as many themes to FlashChat as you wish, and you can even use SWF backgrounds instead of JPG backgrounds to create some interesting background effects for your chat - for example, a "starry night" background would be possible by using a SWF background image.
If you are using Photoshop to create your backgrounds (recommended), this means that the "Progressive" checkbox should be UNCHECKED when exporting for the Web, and you should use a very low "Quality" setting, like 40 or less. Consider that the JPG is only a background image; it is not what the primary focus of users will be on, so it should be ok if the image quality is low (even preferable, so that the image details do not interfere with the chat text!).
Go to your chat folder and look for the /inc/themes folder - the "themes" folder within the "inc" folder. Here you will find all of the PHP theme files that have been created for your chat. Now lets open up the tropical.php file with a plain text editor like notepad. To create our new theme, we'll start with this existing theme file.
NOTE: You should use an advanced text editor to edit the theme files, like Textpad. Microsoft Word, and most other Windows text editors, will not work correctly, since they may add a lot of additional information to the file which cannot be correctly ready by PHP. Now if you have your file open lets edit a few lines to setup your theme. The lines we are looking for are at the top, and look like this:
$GLOBALS['config']['themes']['tropical'] = array(
'name' => 'tropical',
'dialogBackgroundImage' => 'images/tropical.jpg',
'backgroundImage' => 'images/tropical.jpg',
Let's name our new theme midnight. To do this, change all instances of the word "tropical" to "midnight". I've highlighted in red the places where the text was edited. We'll probably use a different JPG image, too, like "midnight.jpg", since our new theme will have a different background image.
$GLOBALS['config']['themes']['midnight'] = array(
'name' => 'midnight',
'dialogBackgroundImage' => 'images/midnight.jpg',
'backgroundImage' => 'images/midnight.jpg',
Now let's look down farther on this file to see what else you may want to change for your theme. Nearly every color of the chat can be customized for your new theme. If you're not familiar with hexidecimal color codes, here's how it works:
Suppose that we have the color code "0x009CA0". The first two characters, "0x", should not be changed. The next two characters indicate the amount of red, the middle two indicate the amount of green, and the final two indicate the amount of blue. Red/Green/Blue... RGB... sound familiar? Without getting into all the details of why "9C" is more green than "FA", the easiest thing for new users to do is use a color picker like the one found in Photoshop. There are also a lot of free color pickers on the web, in case you do not own Photoshop. The value circled in red below is the RGB value that you should use. I recommend that you use only Web colors.
Now rename "tropical.php" to "midnight.php" by choosing the "Save As" option in your Text Editor. This will keep your current tropical theme, but also create a new theme file for the Midnight theme. Here's a bit of help to guide you in choose your theme colors. Most of the colors are self-explanatory, like "minimizeButtonBorder", but some may not be. For illustrative purposes, I've created a theme called "rainbow".
Now that we have some nice colors for our new Midnight theme, and hopefully a background JPG image or SWF to go with it. It's time to link the theme to FlashChat. Open the /inc/config.php file using a good text editor like Textpad (not Microsoft Word!). I can choose make Midnight the default theme by changing the "defaultTheme" value.
'themes' => array(),
'defaultTheme' => 'midnight',
This is the name you gave our PHP file when you saved it, and it should match the name provided in the $GLOBALS line of the theme file:
I saved it the theme files as "midnight.php" so this name should appear in "defaultTheme" and in the $GLOBALS line. Ok were almost done, but there is one more step. Within /inc/config.php, scroll down until you find this line that has been commented out:
THEMES: To disable a color theme, comment or delete the appropriate line
You should add the "midnight" theme to this list:
include_once(INC_DIR . 'themes/midnight.php');
include_once(INC_DIR . 'themes/xp.php');
include_once(INC_DIR . 'themes/macintosh.php');
include_once(INC_DIR . 'themes/gradient.php');
include_once(INC_DIR . 'themes/navy.php');
include_once(INC_DIR . 'themes/metallic.php');
include_once(INC_DIR . 'themes/tropical.php');
include_once(INC_DIR . 'themes/aqua.php');
include_once(INC_DIR . 'themes/olive.php');
include_once(INC_DIR . 'themes/pink.php');
include_once(INC_DIR . 'themes/oak.php');
include_once(INC_DIR . 'themes/black.php');
include_once(INC_DIR . 'themes/your_theme_name.php');
That's all! You've added a new theme to FlashChat. But what if it doesn't work? Some things that you can check include:
FlashChat remembers your most recent theme settings locally, as Flash "shared objects". You can think of these as cookies, but they are not stored in your web browser cache or cookie folder. Rather, they are stored in the Macromedia Flash Player folder. On Windows, this location is:
C:\Documents and Settings\[USER]\Application Data\Macromedia\Flash Player\#SharedObjects
You can also clear your Flash cookies (shared objects) by using this online tool, provided by Macromedia. This tool will allow you to clear the Flash cookies from your system, and it's a lot faster and safer than mucking around in your system trying to figure out what to delete and not to delete:
After clearing your cookies, try loading FlashChat and see the result! You can read more about Shared Objects in the forum:
Special thanks go out to Veronica for posting this helpful resource!