Advertising sustains the DA. Ads are hidden for members. Join today

On this page

Filling

Last updated on
30 April 2025

Image filling takes a transparent image, fills the BG.

You are providing a FOREGROUND image and a BACKGROUND color. This foreground image can have variable transparencies, gradients, scanlines, waves, swirls, blankness to generate a colorful, effective image.

Solids

  'fill' = array(
     array(
              'type' => 'solid',
              'x' => X,
              'y' => Y, 
              'width' => WIDTH,
              'height' => HEIGHT,
              'colors' => array(COLOR),
             ),
     array(
              'type' => 'solid',
              'x' => X,
              'y' => Y, 
              'width' => WIDTH,
              'height' => HEIGHT,
              'colors' => array(COLOR),
             ),
  );

Gradients

Currently, the stock gradient is a simple, top-down (vertical) fashion. Currently, this is a 'y-gradient'

  'fill' = array(
     array(
              'type' => 'y-gradient',
              'x' => X,
              'y' => Y, 
              'width' => WIDTH,
              'height' => HEIGHT,
              'colors' => array(TOPCOLOR, BOTTOMCOLOR),
             ),
     array(
              'type' => 'y-gradient',
              'x' => X,
              'y' => Y, 
              'width' => WIDTH,
              'height' => HEIGHT,
              'colors' => array(TOPCOLOR, BOTTOMCOLOR),
             ),
  );

In both examples, the color is fieldname corresponding to the color in the scheme.

Here is how color.module handles "Fills" (Which can be gradients or solids, or anything else someone extends it to be)

Examples

Friends Electric example
fill type gradient
theme Friends Electric
before images/header-mid-blank.png
Only local images are allowed.
(2x114)
Transparent PNG (blank)
after Only local images are allowed. | Only local images are allowed.
(2x114) | widened
image code 
 	$color['images']['header'] = array(
	  /**
	   *  'file' (Required)
	   *  Path to your source image in terms of theme's root.
	   */
	  'file' => 'images/header-mid-blank.png',

	  /**
	   *  'fill' (Optional)
	   *  Solid: x-coordinate, y-coordinate, width, height, fill color
	   *  Gradient: x-coordinate, y-coordinate, width, height, top color, bottom color
	   *  You can list as many solid/gradient fills as you want
	   */
	  'fill' => array(
	    // x coord start, y coord start, width, height, top fieldname, bottom fieldname
	    array('type' => 'y-gradient',
                  'x' => 0,
                  'y' => 0,
                  'width' => 2,
                  'height' => 114,
                  'colors' => array('top', 'bottom'),
                  ),
	  ),

	  /**
	   *  'slices' (Required)
	   *  Slice your image up to file destination.
	   *  If your slice output file matches a CSS image BG it will be replaced
	   *  automatically for you per scheme. :)
	   *  file-path according theme root  => x-coordinate, y-coordinate, width, height
	   */
	  'slices' => array(
	    'images/header-mid.png' => array(
                                             'x' => 0,
                                             'y' => 0,
                                             'width' => 2,
                                             'height' => 114
                                             ),
	  ),
	);
bottom color #f46715
top color #9a5707

Nista example
fill type gradient
theme Nista
before color/bg-header.png:
Only local images are allowed. | Only local images are allowed.
(1 x 180) | Widened version
Horizontal scanlines. Scanlines have 50% transparency. Transparent PNG.
after images/background-header.png:
Only local images are allowed. | Only local images are allowed.
(1 x 180) | widened
image code 
 	/**
	 *  $img['images'][imgname] (Required)
	 *  Transparent images you wish to fill the BG's of.
	 *  And/or slice. List as many as you want, keep the imgname unique.
	 */
	$color['images']['header'] = array(
	  /**
	   *  'file' (Required)
	   *  Path to your source image in terms of theme's root.
	   */
	  'file' => 'color/bg-header.png',

	  /**
	   *  'fill' (Optional)
	   *  Solid: x-coordinate, y-coordinate, width, height, fill color
	   *  Gradient: x-coordinate, y-coordinate, width, height, top color,
	   *  bottom color
	   *  You can list as many solid/gradient fills as you want
	   */
	  'fill' => array(
	    array('type' => 'y-gradient',
                  'x' => 0,
                  'y' => 0,
                  'width' => 1,
                  'height' => 180,
                  'colors' => array('top', 'bottom'),
                  ),
	  ),

	  /**
	   *  'slices' (Required)
	   *  Slice your image up to file destination.
	   *  If your slice output file matches a CSS image BG it will be
	   *  replaced
	   *  automatically for you per scheme. :)
	   *  file-path according theme root  => x-coordinate, y-coordinate,
	   *  width, height
	   */
	  'slices' => array(
	    'images/background-header.png' => array(
                                                    'x' => 0,
                                                    'y' => 0,
                                                    'width' => 1,
                                                    'height' => 180
                                                    ),
	  )
	);
	;
bottom color #f028ab
top color #5f009e

Help improve this page

Page status: Not set

You can: