1. Start
  2. Item Overview
  3. Installing a Palette
  4. How a Palette Works
  5. Adding a New Color Set
  6. Editing Live Preview Layout
  7. Extending a Palette
  8. Purchaser’s Support
  9. Additional Information
  10. Sources and Credits

Palette - 4 in 1 Drupal Theme Color Switcher


Item Overview


Palette is an amazing Drupal 7 extension you can install on your own themes to make their colors editable and easily change them using a group of Base Color Sets, a Color Picker and a Live Preview.

Most Relevant Features

If you like it, I would really appreciate you rate it in your "Downloads" section.

Four Items in One Package

Palette contains 4 items in one package. Each one is a single separated item with independent files. Package contains:

The Items/StarterKits

Getting a little straighter, each Palette is a working plugin you can use as it is after you integrate it with your theme or just use it as a StarterKit for creating your own palette. That's why we'll call them from now on as StarterKit. As this item is a set of StarterKits you can install on your Drupal theme for making its colors editable, you need to be capable of choosing one or just extending one to fit your needs.

VERY IMPORTANT: You can select and install one of them, but you can also extend it if, i.e. you're creating a 20 colors theme. In that case, you should use the Palette 4 - "10+ Colors + Live Preview" and read the "Creating a Custom Palette" Section. On the other hand, if you don't want to make any extension, you can leave it as it is and only integrate it with your theme. For more info, read the "Installing a Palette" section.

Palette 1 - "5 Colors Palette"

Palette 2 - "5 Colors Live Preview"

Palette 3 - "5 Colors Palette + Live Preview"

Palette 4 - "10+ Colors + Live Preview"

What will you get if you purchase this item?

Installing a Palette


Installing a Palette is a 4 steps careful process. If you jump any step, It won't work properly, so please, read carefully each one and follow it as closes to the line as possible. Before starting, please be sure that "Color Module" is enabled on your site "Modules" section.

1 - Selecting and extracting a StarterKit

Once you select the StarterKit you want, you just extract it on your theme root folder.

2 - Let your theme know he's a Color Theme

On your theme root folder, open the "template.php" file with a text editor and at the bottom of it, add the following lines of code:

function STARTERKIT_process_page(&$vars) {
  // Hook into color.module
  if (module_exists('color')) {
    _color_page_alter($vars);
  }
}
function STARTERKIT_process_html(&$variables) {
  // Hook into color.module.
  if (module_exists('color')) {
    _color_html_alter($variables);
  }
}

You have to replace the name STARTERKIT with your theme's name. Just copy your theme ".info" filename. i.e. If it is "omega.info", replace "omega" for "STARTERKIT".

3 - Link your theme Styles with the Colors Stylesheet

Open your theme ".info" file and add following line before your print CSS link:

stylesheets[all][] = color/color.css
4 - Set your theme CSS selectors on the Colors Stylesheet

Replace sample selectors and place your owns for your theme. DON'T TOUCH any color value, just leave them as they're.

/* Color 1 */
.REPLACE_THIS_SELECTOR_WITH_YOURS_FOR_COLOR_1{	
	background-color: #dddddd;	
	color: #dddddd;	
}

/* Color 2 */
.REPLACE_THIS_SELECTOR_WITH_YOURS_FOR_COLOR_2{	
	background-color: #aaaaaa;	
	color: #aaaaaa;	
}
/* Color 1 */
#region-content, article header {	
	background-color: #dddddd;	
}

/* Color 2 */
body{		
	color: #aaaaaa;	
}}
5 - It's done!!!

Go to your Theme Settings page and start playing with your Palette.

How a Palette Works


This is a VERY IMPORTANT READ. Before you get crazy trying to understand how this item works, you should read this section. It will get all things more clear.

Palette extends the Color Module

Color Module behaves different to most Drupal Modules. Usually, we place them under the "sites/all/modules" folder, but as this is a Theme Specific feature, each theme should include it's Color Module implementation. And this is what this item is. A set of StarterKits you can place in your own themes to create color customizable themes your clients will love and enjoy getting flexible color sets.

How Color Module Works?

In Drupal 7, Color Module core functions are included on Drupal standard modules (the ones that come along with the Drupal 7 core package). The included front-end themes, Bartik and Garland, have their own Color Module implementation you can preview on theme settings page. There are many elements, such as color fields, a color picker, colors set and a live preview area. So, how does it really works?

Color Module essentially replaces all color matches between "color/color.css" file on your theme folder and "color/color.inc" default color "scheme/set" with the one you're selecting from the Color Set. It could be a preset scheme/set or a custom one. This means that if your theme Default colors are:

Then your "color/color.css" styles should be (assuming we will only change background colors):

#color1_theme_selector {
    background: #111111    
}
#color2_theme_selector {
    background: #222222    
}
#color3_theme_selector {
    background: #333333    
}
#color4_theme_selector {
    background: #444444    
}
#color5_theme_selector {
    background: #555555    
}

And our "color/color.inc" file on - Line 21 - :

'default' => array(
  'title' => t('Base Palette(Default Base)'),
  'colors' => array(
	'color1' => '#111111',
	'color2' => '#222222',
	'color3' => '#333333',
	'color4' => '#444444',
	'color5' => '#555555',        
  ),
),

Each item you "Save" a new Color Set, Color Module will generate a new color.css file with the new values on "sites/default/files/color" and there it will be. So, if you make any change on your original "color/color.css" file, Save Theme Settings again to get it updated.

This is the base of Color Module, and Palette allows you to build your own theme Palette based on one of the 4 StarterKits that will allow you to work really fast. Palette will save you hours and maybe days on building your own.

As you're digging on an advanced Drupal Theming subject, we'll now touch a little bit of concepts you need to know before getting into customizing a StarterKit on your own theme.

Color field and Color Picker

A color field is a text input element where you can copy/paste HEX color codes. They are associated to a color picker once you click them, so you can use a "Photoshop Style" color picker that automatically generates the HEX color code for the input element. Each color field, is later associated to a specific color on your CSS file.

Color set

A color set is a "Style" with a name which includes a specific color for each color field. I'll make it a little bit easier. Let's suppose you want to create a theme with 2 color sets: "Clean Edition" and "Dark Edition". Then, there you should define a color set for each "Edition" and they will have different values for each color field, so "Clean Edition", will have light gray and white colors and the Dark one, will be set with a few back/dark gray values at the color fields. It will allow your clients to select one of them as the default color scheme or use them as a starting point for creating a custom color set they can apply to the theme.

Live preview

The live preview is a visual element where you can preview the behavior of the current color set. It's basically an iframe containing the HTML code that represents your theme. It can be the same, similar or just a sample layout that contains the colorable elements.

And finally... Palette

Palette integrates all these elements on 4 StarterKits. Each one can be installed on a theme or in multiples themes, but never 2 on the same theme. You can extend it, or even integrate some of one with other, but each Drupal Theme can only have one Color Module implementation.

Adding a New Color Set


When you want to add a New color set to your current theme, you have to follow these steps (we'll assume you're using Palette 1, Palette 2 or Palette 3):

1. Open the "color.inc" file located under "/sites/your_theme/color" folder.

2. Select and duplicate any color group or just copy these lines:

'YOUR_PALETTE_SHORT_NAME' => array(
  'title' => t('YOUR_PALETTE_LONG_NAME'),
  'colors' => array(
	'color1' => 'HEX_COLOR_VALUE',
	'color2' => 'HEX_COLOR_VALUE',
	'color3' => 'HEX_COLOR_VALUE',
	'color4' => 'HEX_COLOR_VALUE',
	'color5' => 'HEX_COLOR_VALUE',       
  ),
),	

3. Your new Palette would stay like this assuming we've created a new one called "Gray Night"

'graynight' => array(
  'title' => t('Gray Night'),
  'colors' => array(
	'color1' => '#111111',
	'color2' => '#222222',
	'color3' => '#333333',
	'color4' => '#444444',
	'color5' => '#555555',       
  ),
),	

4. Refresh your theme settings page so Palette gets updated with the new color set. It's done.

Editing Live Preview Layout


Palette 2, 3 and 4 includes a live preview you can replace or just update to fit yours. All three of them include a sample HTML + CSS layout you can edit/replace to make it more realistic.

For creating your own layout, you need to edit 3 files (both are located under "/sites/your_theme/color" folder):

Following Section is a sample on how to Edit the Live preview Layout and how to add New Colors to the current Color Set

Extending a Palette (Custom Live Preview + New Colors)


As 4 StarterKits are, in fact, Starterkits, you can extend the one you want. Anyway, is strongly recommended to do it with Palette 4. Palettes 1, 2 & 3 are mainly focused on the "5 colors palette" that is widely used along the world and has 25 pre included color sets you can use as a start point. If you want to, you can do it with any of them.

Following is a sample which integrates Creating a New color and editing the Live Preview Layout on a StarterKit:

Custom Live Preview + New Colors

Let's suppose we need to add a Search Box to Palette 4 which currently seems as follows (default layout for Palette 4):

1. Add HTML box to simulate the search box on "preview.html" file.

Lateral Block

Donec accumsan massa sit amet ante sagittis quis egestas sem ullamcorper. Fusce nec volutpat ante.

Lateral Block

Donec accumsan massa sit amet ante sagittis quis egestas sem ullamcorper. Fusce nec volutpat ante.

2. Add CSS styles for the layout at the bottom of "preview.css" file. These sample styles will do it.

#preview-search-box {
    background: none repeat scroll 0 0 #DDDDDD;
    float: none;
    height: 35px;
    margin-bottom: 20px;
    width: 100%;
}

3. Create a new color Field on the Color Sets you should do it on each color set you already have. That's why, Palette 4 only includes 2, the default one and another one.

	// Available colors and color labels used in theme.
  'fields' => array(
    'color1' => t('Base Color 1'),
	'color2' => t('Base Color 2'),
	'color3' => t('Base Color 3'),
	'color4' => t('Base Color 4'),
	'color5' => t('Base Color 5'),
	'color6' => t('Base Color 6'),
	'color7' => t('Base Color 7'),
	'color8' => t('Base Color 8'),
	'color9' => t('Base Color 9'),
	'color10' => t('Base Color 10'),
	// ------- YOU NEED TO ADD THE NEW COLOR HERE, JUST COPY AND PASTE A PREVIOUS ONE --------------	
  ),
  // Pre-defined color schemes.
  'schemes' => array(
    'default' => array(
      'title' => t('Blue Night(Default Base)'),
      'colors' => array(
        'color1' => '#e6e6e6',
		'color2' => '#193157',
		'color3' => '#000000',
		'color4' => '#797979',
		'color5' => '#313131',
        'color6' => '#8a8a8a',
		'color7' => '#eeeeee',
		'color8' => '#275092',
        'color9' => '#010101',
		'color10' => '#a4a4a4',
		// ----- ALSO YOU NEED TO ADD THE NEW COLOR HERE, JUST COPY AND PASTE A PREVIOUS ONE -------		
      ),
    ),
	'clean' => array(
      'title' => t('Clean View'),
      'colors' => array(
        'color1' => '#ffffff',
		'color2' => '#ffffff',
		'color3' => '#ffffff',
		'color4' => '#bdbdbd',
		'color5' => '#313131',
        'color6' => '#8a8a8a',
		'color7' => '#3e3e3e',
		'color8' => '#275092',
        'color9' => '#5a5a5a',
		'color10' => '#ffffff',	
		// ----- ALSO YOU NEED TO ADD THE NEW COLOR HERE, JUST COPY AND PASTE A PREVIOUS ONE -------			
      ),
    ),	
  ),
	// Available colors and color labels used in theme.
  'fields' => array(
    'color1' => t('Base Color 1'),
	'color2' => t('Base Color 2'),
	'color3' => t('Base Color 3'),
	'color4' => t('Base Color 4'),
	'color5' => t('Base Color 5'),
	'color6' => t('Base Color 6'),
	'color7' => t('Base Color 7'),
	'color8' => t('Base Color 8'),
	'color9' => t('Base Color 9'),
	'color10' => t('Base Color 10'),
	'color11' => t('Base Color For the Search Box'),	
  ),
  // Pre-defined color schemes.
  'schemes' => array(
    'default' => array(
      'title' => t('Blue Night(Default Base)'),
      'colors' => array(
        'color1' => '#e6e6e6',
		'color2' => '#193157',
		'color3' => '#000000',
		'color4' => '#797979',
		'color5' => '#313131',
        'color6' => '#8a8a8a',
		'color7' => '#eeeeee',
		'color8' => '#275092',
        'color9' => '#010101',
		'color10' => '#a4a4a4',
		'color11' => '#aaaaaa',
      ),
    ),
	'clean' => array(
      'title' => t('Clean View'),
      'colors' => array(
        'color1' => '#ffffff',
		'color2' => '#ffffff',
		'color3' => '#ffffff',
		'color4' => '#bdbdbd',
		'color5' => '#313131',
        'color6' => '#8a8a8a',
		'color7' => '#3e3e3e',
		'color8' => '#275092',
        'color9' => '#5a5a5a',
		'color10' => '#ffffff',	
		'color11' => '#aaaaaa',		
      ),
    ),	
  ),

4. Refresh your theme settings page for changes to further effect. Once you do it, you'll have your new Color Field just right on the Color Module.

5. Add the color HEX value to your "color/color.css" file so your theme gets a linkage to the new color value.

/* Let's assume you're building on top of a theme called alpha with a real search box input with attribute id="find" */
#find {
    background: #aaaaaa; /* This value is the exact same you place on the "default" scheme/set on "color.inc" for Color 11 */    
}

6. And the last step do a jQuery linkage for live preview update on "preview.js". Just do it adding following JS code on any line within the callback function.

// Color 11 - Search Box
$('#preview-search-box', form).css('background-color', $('#palette input[name="palette[color11]"]', form).val());

Be sure to follow these directives:

// Color 11 - Search Box
$('LIVE_PREVIEW_SELECTOR', form).css('background-color', $('#palette input[name="palette[COLOR.INC_FILE_DEFAULT_COLOR_KEY]"]', form).val());

It's done. Seems hard?? Seems Great!!!! Your theme is "color infinite"!!!

Purchaser’s Support

I provide support for any theme/item related question or doubt. I’m currently working on GMT -5 so please, be patient for my response. I usually don't take more than 24h to respond due to production reasons.

I strongly recommend searching/browsing support forums before asking your doubt. You can place your questions there if you’re a verified purchaser. For getting an account, please mail me via the contact form titled “Email jagutierrez” at the bottom of the right sidebar of my profile page.

Additional Information


Palette has been tested in all the following browsers:

Sources and Credits


I've used the following resources for demo and sample purposes:


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. We'll do our best to assist.

jagutierrez