Chromatophore has a spectacular new feature, the mootools controlled color chooser. With this feature, you can change almost everything in the template, in respects to its color within seconds. You have the ability to choose from preset color combinations and background overlays or you can create your own custom combinations. Just click the Color Chooser dropdown at the top and experiment with the options. You can enter the hex values manually or via the "color picker", as you do so you will see a live preview of how the scheme will appear. Press the Apply Colors button on the right of the panel for the color scheme to fade into place LIVE!.
There are 6 variables you can choose from the color chooser's dropdown. These are Primary color, Primary text, Secondary color, Secondary text, Tertiary color and Tertiary text. For each of these fields, you would need to insert a HEX value such as #ffcc00 which would be gold. The information of what each variable actually changes are listed below:-
- Primary color: This setting controls the color of the main background, the menu bar and the hilite1 module's header.
- Primary text: This setting controls the text color of the menu bar and the hilite1 module's header.
- Secondary color: This setting controls the header background color of the module class suffix hilite5 as well as the default module styling.
- Secondary text: This setting controls the text color of the module class suffix hilite5's header as well as the default module's header.
- Tertiary color: This setting controls the header background color of the module class suffix hilite4.
- Tertiary text: This setting controls the text color of the module class suffix hilite4's header.
See the exciting new Color Chooser in action and learn about its great new features and functionality with the following video tutorial!
Creating your own presets
With Chromatophore, we provide a series of preset configurations for the color chooser which you and your visitors can select from. However, if you wish to set or change these yourself, the process is extremely simple.
- Open the file mooRainbow.js which is located within the /templates/rt_chromatophore_j15/js/ directory.
- Locate the following code block on line 20.
var themes = new Hash({
"Warm Vintage": ["overlay-stripes-vert", "#342f29", "#dbd6c5",
"#8f4721", "#ebd8c7", "#587265", "#dff0e9"],
"Cherry Cheesecake": ["overlay-spirals", "#4c1b1b", "#ebdad8",
"#bf9971", "#3d1814", "#b9121b", "#f0c9c9"],
... skipped ...
"Sahara": ["overlay-cracked", "#574d2f", "#e8deca",
"#b0a174", "#2e2b18", "#b0922e", "#ffffff"]
});
- You will notice that each line block has a name, such as 'Warm Vintage':. You can change this theme name to anything you like, something more suiting to your color styles perhaps.
- You will notice 7 values between the [] brackets. The first references the background overlay image that is to be used. The last 6 values, the ones which appear in the HEX format are the ones which are user controllable on the frontend of your site. These are the values you will wish to change. They are in sequence, i.e. Primary color, Primary text, Secondary color, Secondary text, Tertiary color and Tertiary text.
- Edit these values to your personal preferences.
- Save, and upload the file to your site.
Chromatophore also has a feature that makes creating new themes totally trivial.
- Ensure you have Mozilla Firefox and install the Firebug Extension.
- Open the file mooRainbow.js which is located within the /templates/rt_chromatophore_j15/js/ directory.
- Set the themeDebugger variable to true on line 56
- Load your site in Firefox and open the Color Chooser dropdown in the Chromatophore template
- Create your new custom theme by selecting the colors and overlay you want to use
- Click the Apply Colors button
- Notice in the Firebug Console window, some output is produced that contains the strings you need to add to the themes preset in mooRainbow.js and also the $default_style variable in the template's index.php
Change Any Color You Want
While the dynamic color chooser allows you to easily change the main colors of the template, Chromatophore was designed from the ground up to allow every section of the main template to be completely CSS color controlled. You can change the background of the sidebars, main content, modules, everything by simply changing the CSS values. No need to open your image editor at all.
To customise every color, open the /css/template_colors.php file. Here you will find the classes for all of the main elements of the template with their assigned colors. Change all of the color values you wish to give your site's colors a compete overhaul. Want to match your company's colors or maybe make a dark version? With Chromatophore, your new color scheme could be up and running in minutes. It has never been easier!
|
