15 January 2012

Becoming friends with the Drupal Color module — Part 2

Profile picture for user sampo.turve

This is a sequel for the post Becoming friends with the Drupal Color module — Part 1. Here we'll check out the advanced (and the coolest) parts of the Color module. If you are not already familiar with Color module, I suggest you take a look at Part 1 since I'm not going to cover the basics in this posts.

Mild suggestion: Have a long and nice good night's sleep and lots of caffeine before jumping into this. This might seem pretty confusing but it's actually very simple when you chew it a little by yourself.

Part 2: Advanced Color module settings

How does the Color module work?

Color creates new directory under your file system every time you update your theme settings (I have right now sites/default/files/color/ss_advanced-57e070ce). After that it replaces the colors from your CSS file, fills the base image with given colors and gradients and slices it. Then it just puts all the new stuff into the directory it has created.

The settings

You might want to download the archive at the bottom of the post when you're reading through this. That might help to clarify what we're really doing in here.

As said above, I'm not going to get into the basics. So let's jump right into the action. I have a theme that looks like this:

Default theme

Step 1. If you don't have a custom theme, create one. It's easy. I will be using my custom theme called ss_advanced in this tutorial.

Step 2. Create a directory called color into your custom theme directory (I have: sites/all/themes/ss_advanced/color).

Step 3. Add file called color.inc to the color folder (I have: sites/all/themes/ss_advanced/color/color.inc).

Step 4. Add the Color module replacement patterns, color schemes and Color CSS definitions (Good note by Kristi: Use should use only lowercase letters on the hex codes, otherwise Color won't pick up your colors correctly):



/**
* PART 2. Advanced Color module settings
*/

 
$info = array();
 
// Define the possible replaceable items and their labels.
$info['fields'] = array(
'bg' => t('Main background'),
'link' => t('Link color'),
'text' => t('Text color'),
'titles' => t('Titles'),
'menu_item_color' => t('Menu item link color'),
'menu_item_a_bg' => t('Menu active item background color'),
'menu_item_a_color' => t('Menu active item link color'),
'header_top' => t('Header gradient top color'),
'header_bottom' => t('Header gradient bottom color'),
);
 
// Color schemes for the site.
$info['schemes'] = array(
// Define the default scheme.
'default' => array(
// Scheme title.
'title' => t('Our site default colors'),
// Scheme colors (Keys are coming from $info['fields']).
'colors' => array(
'bg' => '#ffffff',
'link' => '#ff7f00',
'text' => '#777777',
'titles' => '#333333',
'menu_item_color' => '#666666',
'menu_item_a_bg' => '#eeeeee',
'menu_item_a_color' => '#000000',
'header_top' => '#f1f1f1',
'header_bottom' => '#f2f2f2',
),
),
);
 
// Define the CSS file(s) that we want the Color module to use as a base.
$info['css'] = array(
'styles/colors.css',
);

Step 4.1. Add the stylesheet that we defined above (I have sites/all/themes/ss_advanced/styles/colors.css).

Step 4.2. Your theme should also be aware that there's a new stylesheet. Add this into your theme's .info file (I have sites/all/themes/ss_advanced/ss_advanced.info).



; Add our stylesheet for the Color module to override.
stylesheets[all][] = styles/colors.css

Step 4.3. Add the CSS styles. Just simple text color and background definitions, nothing very fancy here. Only images in my example theme are:

  • Background on the top header
  • Active menu item left background on the
  • elements on menus
  • Active menu item right background on the elements on menus
  • Druplicon image on the
     
    div.

The default images are looking like this (the Druplicon isn't listed here since it's just a Druplicon):

That being said, you must slice these images by yourself so you have some defaults when you enable your theme. These images are used before you have submitted your theme's admin page and Color module has been doing its own image slicing magic.

The CSS to the colors.css:

Note: The Hex color codes are the same than the ones we defined in the previous step's default scheme.



/* Site background color */
body { background-color: #ffffff; color: #777777; }
 
ul,
li,
ul li.collapsed,
ul li.expanded,
ul li.leaf {
color: #777777;
}
 
/* Site titles */
h1, h2 { color: #333333; }
 
/* Header */
#header {
background: url('../images/header.png') repeat-x 0 0;
}
 
/* Main content area links */
#main-content a:link,
#main-content a:visited,
#main-content a:hover,
#main-content a:focus,
#main-content a:active { color: #ff7f00; }
 
/* Main menu links */
#site-menu ul li a { color: #666666; }
 
/* Main menu active links */
#site-menu ul li.active-trail,
#site-menu ul li.active { background: url(../images/menu-item-active-left.png) no-repeat 0 0 transparent; }
 
#site-menu ul li.active-trail a,
#site-menu ul li a.active { background: url(../images/menu-item-active-right.png) no-repeat 100% 0 transparent; color: #000000; }
 
/* The Druplicon image is copied with Color module. */
#druplicon {
background: url(../images/druplicon.png) no-repeat 0 0;
height: 120px;
padding: 38px 0 0 125px;
width: 120px;
}

Step 5. Add the Color module altering scripts into your template.php file (I have sites/all/themes/ss_advanced/template.php). If you don't have this file, you should create it. Replace the YOURTHEMENAME occurrences with the name of your theme.




 
/**
* Implements template_process_html().
*
* Override or insert variables into the page template for HTML output.
*/

function YOURTHEMENAME_process_html(&$variables) {
// Hook into color.module.
if (module_exists('color')) {
_color_html_alter($variables);
}
}
 
/*
* Implements template_process_page().
*/

function YOURTHEMENAME_process_page(&$variables, $hook) {
// Hook into color.module.
if (module_exists('color')) {
_color_page_alter($variables);
}
}

Step 6. The best part, advanced settings. All stuff listed here should go into your color.inc file.

File copying

  • Copy - Files to copy for the Color to use. If you would like to provide some additional files that are coming along with the color module styles (such as some images), you should define them here (If don't want to copy any files, define an empty array).


/** Copying **/
 
// Files we want to copy along with the CSS files.
$info['copy'] = array(
'images/druplicon.png'
);

Preview window

The theme settings page has its own preview for the changes you are doing, these are the things that are building that window.

  • Preview HTML - HTML file with the markup for preview to use.


// HTML file to be used in the preview window.
$info['preview_html'] = 'color/preview.html';

So now we must define the HTML markup for the color/preview.html to use:




 
 

   

Site name here


 

 
 

   
 

 
 

   

     

Lorem ipsum dolor


     

       

          Sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat. Maecenas id porttitor Ut enim ad minim veniam, quis nostr udfelis.
       

     

   

 

 



  • Preview CSS - CSS styles for the preview to use.


// CSS file to be used in the preview window.
$info['preview_css'] = 'color/preview.css';

Define the CSS styles to the color/preview.css that handle how the layout is going to look in the preview:



/* ---------- Color form ----------- */
#color_scheme_form #palette .form-item {
width: 28em;
}
#color_scheme_form #palette .form-item label {
width: 20em;
}
 
/* ---------- Preview Styles ----------- */
 
html.js #preview {
clear: both;
float: none !important;
}
 
/* Overall */
#preview {
font: 300 20px/1.5 "Helvetica Neue", Arial, 'Liberation Sans', FreeSans, sans-serif;
color: #333;
margin: 30px 0 50px 0;
padding: 0;
width: 100%;
}
 
/* Header */
#preview-header {
height: 100px;
padding: 0 1em 40px;
}
#preview-header h1 {
float: left;
margin: 0.25em 0 0;
}
 
/* Main menu */
#preview-main-menu {
padding: 1.5em 0;
}
#preview-main-menu ul {
margin: 0;
}
#preview-main-menu ul li a {
padding: 0.5em 1em;
}
 
/* Main content */
#preview-main {
padding: 0.5em;
}
#preview h1,
#preview h2 {
color: #333333;
font-weight: 300;
line-height: 1em;
}
#preview h1 {
font-size: 3em;
}

  • Previews JS - Javascript files for the preview to use.



// Javascript file to use in the preview window.
// This is the one that handles the color changes on the preview form when you're
// clicking on the color picker.
$info['preview_js'] = 'color/preview.js';

This is the one that handles the color changes on the preview form when you are clicking on the color picker. Here's the code for the color/preview.js.



// Handle the color changes and update the preview window.
(function ($) {
Drupal.color = {
logoChanged: false,
callback: function(context, settings, form, farb, height, width) {
// Background
$('#preview', form).css('backgroundColor', $('#palette input[name="palette[bg]"]', form).val());
 
// Text
$('#preview #preview-main h2, #preview .preview-content', form).css('color', $('#palette input[name="palette[text]"]', form).val());
 
// Links
$('#preview #preview-content a', form).css('color', $('#palette input[name="palette[link]"]', form).val());
 
// Titles
$('#preview h1, #preview h2', form).css('color', $('#palette input[name="palette[titles]"]', form).val());
 
// Menu item link color
$('#preview #preview-main-menu-links li a', form).css('color', $('#palette input[name="palette[menu_item_color]"]', form).val());
 
// Menu item active link bg
$('#preview #preview-main-menu-links li a.active', form).css('backgroundColor', $('#palette input[name="palette[menu_item_a_bg]"]', form).val());
 
// Menu item active link color
$('#preview #preview-main-menu-links li a.active', form).css('color', $('#palette input[name="palette[menu_item_a_color]"]', form).val());
 
// CSS3 Gradients.
var gradient_start = $('#palette input[name="palette[header_top]"]', form).val();
var gradient_end = $('#palette input[name="palette[header_bottom]"]', form).val();
 
$('#preview #preview-header', form).attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
}
};
})(jQuery);

Now we are done with the preview! If you now check out your theme settings page, you'll see that there's the preview window we just created.

 

Image handling

Color module is capable of making gradients, color fills and slices of your images. All of these actions are performed on the Base image that is defined.



/** Image colors, gradients, slices. **/
 
// Base file for image generation.
$info['base_image'] = 'color/base.png';

This is how we're using the base.png in this tutorial:

 

  • Blend target - Reference color used for blending. Matches the base.png's colors.


// Reference color used for blending. Matches the base.png's colors.
$info['blend_target'] = '#ffffff';

Next up, gradients, fills and slices for the base.png. Most confusing and the most awesome part of the Color module. There's an image after each of the code piece explaining that what the heck we're really doing here. (Sorry about the horrible coloring in the images)

Gradients

  • Color module is capable of making gradients to your base image above.
  • Dimensions: Where we should apply the gradient and how big it should be. See the attached image for more info
  • Direction: Set 'vertical' or 'horizontal' depending your needs.
  • Colors: The color 'keys' that were defined at the beginning of Step 4's $info['fields'].


// Gradients.
$info['gradients'] = array(
array(
// Where to apply and with what dimension. (x, y, width, height).
'dimension' => array(0, 0, 760, 100),
// Direction of gradient ('vertical' or 'horizontal').
'direction' => 'vertical',
// Keys of colors to use for the gradient.
'colors' => array('header_top', 'header_bottom'),
),
);

Fills

  • Which areas to fill and with what color. Fill uses the same keys that you have defined at the $info['schemes']['default']['colors'].


// Color areas to fill (x, y, width, height).
$info['fill'] = array(
'bg' => array(0, 0, 760, 321),
'menu_item_a_bg' => array(100, 250, 476, 42),
);

Fills are working the same way than the gradients above. These are just filling the image with selected color. Here we have defined two fill colors (the keys are coming from the $info['schemes']['default']['colors'] that we defined at the beginning):

  • Key 'bg': Fill the whole image (760 x 321 pixels) with the color defined with a key of 'bg'.

  • Key 'menu_a_item_bg': Fill the Menu item link background (476 x 42 pixels at the coordinates of: left: 100px, top: 250px) with the key of 'menu_a_item_bg'.

 

Slices

  • This is very cool. If you take a look the Garland theme's implementation of the base.png, you will see that it's created using a nice CSS sprite with all theme images in it. Slice takes the image x-position + y-position + width + height that it's going to crop from the image. Exactly same way as the gradients and fills did before. In the image below, I have demonstrated the two first slices that are defined here. The third one (menu-item-active-right.png) would be defined just the same way.


// Coordinates of all the theme slices (x, y, width, height)
// with their filename as used in the stylesheet.
$info['slices'] = array(
'images/header.png' => array(40, 0, 40, 125),
'images/menu-item-active-left.png' => array(100, 250, 428, 42),
'images/menu-item-active-right.png' => array(530, 250, 47, 42),
);

This sure seems a bit confusing. It really isn't. Download the attached archive at the bottom and see for yourself.

That's about the most important "advanced" things on Color module. I'm pretty sure you have something to ask or you have something that's tingling on your mind. Feel free to open up!