• 28 Jun 12
  

  nicholas_rance
  • Community Documentation
     
      
     
    <!-- /#page-tools --> 
    <!-- /#page-title-tools -->  
     
    • Community Docs Home
     
    • Installation Guide
     
    • Administration Guide
     
    <!-- /#nav-content -->     
    Integrating color module
         
    <!-- /#page-heading -->  
          

       

            

     

    Last updated April 14, 2012. Created by skiquel on January 11, 2007.
    Edited by shamio, montyd, jhodgdon, arianek. Log in to edit this page.

     

    Color.module allows the admin to change the color scheme of a theme. By selecting a palette of colors (either from a set or by hand), you can change the colors of an entire theme.

     
  • Color.module allows the admin to change the color scheme of a theme. By selecting a palette of colors (either from a set or by hand), you can change the colors of an entire theme.

  • The module can alter the stylesheet and re-render images. However, the theme must provide specific hooks to allow this, and the design must be created specifically to accommodate this.

     

    This document explains the basics of making a colorizable theme.
  • We take a transparent image of the design (the base), which includes everything except the background.
  • We also process the stylesheet and change all the colors based on the ones you defined. The module smoothly changes the colors using the palette as a reference
  • So, the photoshop mockup of the design should consist of a layered file that has one or more colored layers at the bottom of the layer stack, with everything else blended on top.
  • base.png

     

    This contains the base design of the theme, which is composed and sliced into the images.
  • color.inc

     

    This file contains all the necessary parameters to color the theme.
  • preview.css

     

    This stylesheet is used to generate the preview on the color changer.

     

    preview.png

     

    This image is used to generate the preview on the color changer.
  • The presence of color/color.inc makes the color picker appear on the theme's settings. It is a regular PHP file which contains an $info array with the following values:
  • Each entry must have 5 colors (which, in order, are base color, link color, top header, bottom header, and text color) formatted as above, and a title.
  • The first scheme is used as a reference and must match the colors used in the theme's default images and stylesheet closely. Otherwise, the final colors might not be what the user intended. See the 'stylesheets' section for more information about how the colors are calculated.
  • You can specify regions for each of the palette colors.

  • Image slices

     

    Next, you need to define the areas of the base image to slice out for each of the images. Again, you specify coordinates as (x, y, width, height) along with the filename of the image, as used in the stylesheet. The logo and screenshot slices are special and always take the same filename. The screenshot will be resized to 150x90 pixels.

  • Files

     

    Finally you need to specify the location of the files for your theme. You need an image and a stylesheet for the preview, as well as the base image*:

  • Stylesheets (CSS)

     

    The color.module will read in a theme's specified style.css file(s) as well as any other styles that are imported with @import statements and create a new style.css file. It will change the colors in the CSS. It uses (in Drupal 7, the 'default' scheme's colors) one of the chosen palette colors as a reference. This depends on context:

     
    • Links: the 'link' color is used, for rules that apply to a elements.
     
    • Text: the 'text' color is used, for rules that appear in color: styles.
     
    • Base: the 'base' color is used for everything else.

  14 more annotations...

• 14 Feb 12
  

  Alessandro Mascherpa

  drupal color theme theming drupal-dev web-dev drupal-modules color-module colorpicker farbastick

• 31 Oct 11
  

  Antonio Perea
  • Color.module allows the admin to change the color scheme of a theme completely.
• 05 May 10
  

  revagomes

  drupal color

• 05 Jan 10
  

  Ben Mearns

  drupal

• 28 Jun 09
  

  Ian Scott

  drupal color theme css modules howto Design code

• 21 May 09
  

  Nightowl Nightowl

  drupal color theme css modules color.module

• 27 Jan 09
  

  david johnson

  colormodule themes design drupal theme color

• 19 Jun 08
  

  Michael Cole

  design drupal color

• 15 Jun 08
  

  So, the pho

  drupal

• 24 Apr 08
  

  Sara Ziemendorf

  changing colors on some templates in drupal is easier with color.module

  drupal delicious

• 19 Feb 08
  

  pepa garcía

  color dupal teleperra themes

• 01 Aug 07
  

  Chrys R

  color modules drupal

• 31 Jul 07
  

  Boris Mann

  Steven's write up on how to implement color.module support in your theme

  drupal colormodule code php css drupaldocs template theme

• 25 Jun 07
  

  Matt Vance
• 12 Mar 07
  

  Tony solserpiente

  imported Bookmarks drupal themes color css modules howto code

• 29 Jan 07
  

  Michael Samuelson

  drupal theme color modules for:ejhildreth

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.