Desk02 Gradiel Drupal theme

Desk02's website got a new look (and a new engine), so the old look gets a new function, as the Desk02 Gradiel Drupal theme. And not just a theme, but a theme with color scheme functionality. This allows the administrator of a site to adjust the color-palette via the administrative interface.

What happens behind the scenes of a color scheme?

You could see it as a automatic image slicer. A chosen background-color is placed entirely or partially behind a semitransparent grayscale image. Slices are cut according to preset coordinates from this resulting image. One region can be set to have a vertical, two color gradient.
The CSS files will be adjusted as well. Here the color of all 'a' tags will be set to the value that is chosen for links. All other text color will be set to the value chosen for text.
The generated images and adjusted CSS files will be save together with any other required files in a temporary folde in the folder 'files'.

How to add a color scheme to a theme?

It all starts by adding a folder 'color' to the theme. If this folder is found, drupal adds the color scheme configuration panel to the configuration page of the theme.
Four files go into this folder: base.png, color.inc, preview.css and preview.png.

Color.inc

This file contains php code to configure the technical settings of the theme. It consists of one multidimensional array: $info.
This contains an array with the default color-palettes.

<?php
  // Pre-defined color schemes.
  'schemes' => array(
    '#8a8a8a,#0072B3,#383838,#5b5b5b,#505050' => t('Desk02 (Default)'),
    '#0072b9,#027ac6,#2385c2,#5ab5ee,#494949' => t('Blue Lagoon'),
    '#464849,#2f416f,#2a2b2d,#5d6779,#494949' => t('Ash'),
    '#55c0e2,#000000,#085360,#007e94,#696969' => t('Aquamarine'),
    '#d5b048,#6c420e,#331900,#971702,#494949' => t('Belgian Chocolate'),
    	...
  ),
?>

To this you add a first line with the base-colors of the theme. If these values have an exact match in the CSS files, they will be replaced exactly with the new value. If color values in the CSS files are not in this array, they will be adjusted relatively. This will normally result in in a color-palette that is consistent, but it can also contrast strongly.

On the right side is the default color-palette. The color of the 'Log in' button is not in the predefined color-palette. The color of the button on the left is derived relative to the changes of the base colors.
You can avoid this by using grayscale colors. This must of course fit within the design.

Next there is:

• an array with images that have to be copied without adjustments. (eg. site logo)
  

  <?php
  // Images to copy over.
  'copy' => array(
    'images/logo.png',
  ),
  ?>

• an array with CSS files that need to be included.
  

  <?php
  // CSS files (excluding @import) to rewrite with new color scheme.
  'css' => array(
    'style.css',
  ),
  ?>

  
  In these files the colors will be adjusted. If there are colors that do not have to adjusted, they can be placed below a specific comment:
  

  <?php
  /*******************************************************************
  * Color Module: Don't touch                                       *
  *******************************************************************/
  ?>

  
  Caution: If you use @import inside a file and place the 'Don't touch' comment in this file, then it will also apply to all code after the @import.

• an array setting the coordinates for the gradient region.
  

  <?php
  // Coordinates of gradient (x, y, width, height).
  'gradient' => array(800, 168, 40, 64),
  ?>

• a two-dimensional array setting the coordinates for the colored regions (x, y, width, height). Here you can set colors regions for 'base', 'top', 'bottom', 'link' and 'text'.

• a two-dimensional array setting the coordinates of the slices. The key of each array is the path and name of the image as how the CSS file refers to it.
  

  <?php
  // Coordinates of all the theme slices (x, y, width, height)
  // with their filename as used in the stylesheet.
  'slices' => array(
    'images/branding-header.png'             => array(0, 0, 880, 121),
    'images/content-bottomline.png'          => array(0, 122, 880, 45),
    'images/content-sidebar-bottomline.png'  => array(0, 168, 500, 45),
    ...
    ),
  ?>

  
  During production it can be very useful to add an extra slice 'all' that includes every image. This will help a lot when debugging the coordinates.

• a key => value pair setting a reference color. This applies to the relative color adjustments.

• a key => value pair setting the preview image.

• a key => value pair setting the preview CSS.

• a key => value pair setting the base image. This is a semitransparent image. All coordinates mentioned before have to be inside the dimensions of this image.

Base.png

This file contains all the images whose color can be adjusted. It are 'decolorized' images, only containing grayscales, black and white, in various degrees of transparency. Five colored regions and one gradient region can be placed behind this image. It is necessary to know the exact coordinates of each image (x, y, width, height).

Preview.png

A smaller, semitransparent image functioning as a preview on the color scheme configuration screen. It gives the user feedback about the selected color scheme.

Preview.css

Configures the color regions and text region for the preview. This has, unlike color.inc, only one color region and one gradient region.

Some remarks:

• It in not possible to generate color-dependent images that have a fully transparent part (eg. rounded corners).

• The images that need to be generated need to be prepared in advance. Here it can be useful to set a background layer with the default 'base' color. This makes it easier to check if the semitransparent images are correct. This image does not have to resemble the design of the website, it merely contains image that are color dependent.

• An interesting explanation on d.o.

• The result