Stacks API

Come build with us.
Stacks API v10 for Stacks 3.5


  <   Templates Variable Reference


This content is open source. You can edit it and submit a pull request on GitHub.
This page is generated from this file.


© . YourHead Software all rights reserved.

Color Values

%id=colorID%

Available: Stacks API v3

Usage

%id=<colorControlID>% 
%id=<colorControlID> <operation> n%

Description

Color Math operations can be used to modify the colors.

Color with opacity

Color values output as rgba CSS color strings including opacity if it is enabled.

Example 1: Color math used in CSS

template:

    /* lighten the color by 25/255ths */
    .lighterStuff {
      background-color: %id=userSelectedColor + 25%;
    }

    /* darken the color by 25/255ths */
    .darkerStuff {
      background-color: %id=userSelectedColor - 25%;
    }

    /* twice as light */
    .lightestStuff {
      background-color: %id=userSelectedColor * 2%;
    }

    /* twice as dark */
    .darkestStuff {
      background-color: %id=userSelectedColor * 0.5%;
    }

With THIS COLOR (rgba(255, 0, 128, 1.0)) chosen.

    /* lighten the color by 25/255ths */
    .lighterStuff {
      background-color: %id=userSelectedColor + 25%;
    }

    /* darken the color by 25/255ths */
    .darkerStuff {
      background-color: %id=userSelectedColor - 25%;
    }

    /* twice as light */
    .lightestStuff {
      background-color: %id=userSelectedColor * 2%;
    }

    /* twice as dark */
    .darkestStuff {
      background-color: %id=userSelectedColor * 0.5%;
    }

which should render like this:

Original

Lighter Stuff

Darker Stuff

Lightest Stuff

Darkest Stuff

© . YourHead Software all rights reserved.