XtGem css template variables are only used in the xtgem_template.css file and only by the Site template color adjust tool
In the main body of the stylesheet the color variables are used like this
.class_name {background:/*$var_name*/#ABCDEF/*e*/;}
The hex value is changed by the template color adjust tool
The Base and Mix area must be at the bottom of the stylesheet and wrapped in css comment tags /* ... */
- Base
The initial value variable name and title for use in the Site template color adjust tool are set in
{{base}}
Color 1 title
$var_1_name:#6 digit hex ;
Color 2 title
$var_2_name:#6 digit hex ;
{{/end}}
Base color #6080A0
Mix
Complimentary color variables are created in
{{mix}}
...
{{/end}}
- Saturate
Create a new variable color by adjusting the saturation of a existing color by a + - percentage
$new_color:saturate $base_color 25;
$new_color:saturate $base_color -15;
Saturate +25% = #4080C0Saturate -15% = #73808D
Lighten
Create a new color variable by lightening a existing color by a percentage
$new_color:lighten $base_color 20;
$new_color:lighten $base_color 10;
Lightened 20% = #A0B3C6Lightened 10% = #809AB3
Darken
Create a new color variable by darkening a existing color by a percentage
$new_color:darken $base_color 20;
$new_color:darken $base_color 10;
Darkened 20% = #3A4D60Darkened 10% = #4D6780
Color adjust
Create a new color variable by adjusting a existing colors hue saturation and lightness by given percentages
$new_color:color_adjust $base_color -10 15 10;
Color adjust -10% hue +15% saturation +10% lightness = #71B5C2
Example
.base_color,.my_class_1,.my_class_2,.my_class_3,.my_class_4,.my_class_5,.my_class_6,.my_class_7
{margin:4px;padding:4px;border:3px double #000;border-radius:3px;display:inline-block;}
.base_color {background:/*$base_color*/#6080A0/*e*/;}
.my_class_1 {background:/*$sat_1*/#4080C0/*e*/;}
.my_class_2 {background:/*$sat_2*/#73808D/*e*/;}
.my_class_3 {background:/*$light_1*/#A0B3C6/*e*/;}
.my_class_4 {background:/*$light_2*/#809AB3/*e*/;}
.my_class_5 {background:/*$dark_1*/#3A4D60/*e*/;}
.my_class_6 {background:/*$dark_2*/#4D6780/*e*/;}
.my_class_7 {background:/*$adjust_1*/#71B5C2/*e*/;}
/*
{{base}}
Base Color
$base_color:#6080A0;
{{/end}}
{{mix}}
$sat_1:saturate $base_color 25;
$sat_2:saturate $base_color -15;
$light_1:lighten $base_color 20;
$light_2:lighten $base_color 10;
$dark_1:darken $base_color 20;
$dark_2:darken $base_color 10;
$adjust_1:adjust_color $base_color -10 15 10;
{{/end}}
*/
