Basic Customization

ColorMatic features several built in configuration options that have been designed to be easily changed with a single control. You can take advantage of these customization options by making changes in ColorMatic's "index.php" file. Here is a breakdown of the available options:

Default Color Style

With 15 exciting color styles, it can be difficult to choose just one. But you will want to choose the one that will show by default to users when they visit your site for the first time. You can designate which style you want set as the default in the following line:

$default_style = "style1";			// style1 | style2 | style3 | ..... | style15

Template Orientation

ColorMatic features the ability to display in either a left or right hand configuration. Depending on which one you prefer, you can set the default orientation in the following line:

$orientation = "right";					// left | right

Template Width

Sometimes, one size just doesn't fit all; and ColorMatic is designed to allow you to display the template in any default width you desire. All you have to do is enter the width size that is perfect for your needs, and the template will do the rest:

$template_width = "868";				// width in px | fluid

Side Column Width

Along with the template width, you can also easily customize the width of the side column (either right or left depending on the orientation) by changing the width in the following line:

$side_width = "280";						// width in px

Default Font Size

Based on your own personal preference, or the preference of your users; you can easily set the default font size of the text in your site by editing the following line:

$default_font = "default";      // smaller | default | larger

Customizing the Logo

One of the first steps of customizing your new ColorMatic template will undoubtedly be altering the logo text to reflect the name of your company / organization. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as logo blanks.

The most effective way to customize the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:

• First, open the main Source PNG file in Adobe Fireworks (colormatic_source.png). With the pointer tool, double click on the logo area in the top left of the layout. This will cause a cursor to appear, in which you can highlight the existing text and replace with your own. (The slices may be on by default, obscuring the logo area so that you can not select it. You can hide the web layer slices for now by clicking the "eye" icon to the left of "Web Layers" in the right hand "Layers" panel).
• In ColorMatic, the logo text consists of two colors, so the simplest way to keep this is to highlight only the letters in the first color and replace with the first part of your logo text, then highlight the letters in the second color and replace them with the final part of your logo text.
  
  
  
  
  
  
• Once you have replaced the text in the logo area and are happy with the result, it is time to export the slice and replace the existing logo image in the template with your new one. Turn your Web Layer slices back on (click the empty box to the left of "Web Layers" in the right hand "Layers" panel causing an eye icon to appear), this will cause all of the slices to become visible (represented by green coloured squares).
• With the pointer, click on the slice on top of the logo area so that it is selected (a crosshair will appear in the center and the name "logo: PNG" will appear when selected). Right click on the slice and select the menu option "Export Selected Slice" and save into your rt_colormatic/images/style# folder replacing the existing "logo.png" with your new "logo.png".