Creating a Color Changing Variable (Tempo)

Modified on Tue, 17 Dec at 2:37 PM

Color changing variables allow your end users to change the color of a design element from a pre-set list of color options. This functionality is useful when you would like to allow your end users to change the background color, the color of a button, or the overall color scheme of the design.


TABLE OF CONTENTS


Creating Your Color Swatches

When creating a color changing variable, ensure you have a “Default” color swatch defined. If you did not create this color swatch in InDesign, you can create it in the CHILI Back Office Editor in the Styles panel.


The “Default” color swatch does not have to be a color that you plan to use in your design, as your end user will never see this color. To effectively change the color of your elements, CHILI will fully replace the swatch you’re pushing the new color to. By creating and assigning the “Default” color swatch to the design element you want to change, you are allowing the system to fully replace the “Default” color without impacting any of your other brand colors.


Once you have created your “Default” color swatch, you can add any other brand colors, if needed. You would add these swatches if you have additional colors you want to use that were not part of the original converted file.



If you call your default color swatch “00 Default” it will show at the top of your swatch list. Making it easier to find when you start to build your action logic.



Create Your Color List Variable

Now that you have defined your color swatches, you will need to add them to a list variable. This is where you’ll list all the color options you want to give your end user. Your end user will see this list presented as a drop-down variable, so be sure to use color names they will recognize.



You will use these color names in your action logic and they need to be word-perfect. A good best practice is to copy them into a word document or sticky note to ensure there are no typos in your action logic.




Writing Your Color Changing Action Logic

CHILI uses “action logic” to tell your artwork what you want to change. In this case, you will use action logic to tell CHILI which colors you want to assign to replace your “Default” color swatch.

Here are the steps you’ll take to add action logic to your color changing list variable:

  1. With your color changing list variable selected, navigate to the Actions tab in Variable Settings
  2. Click Edit next to On Change:
    • The window you will see once you complete step two is where you will assign your action logic. This action logic is essentially an “if-then” statement. You will use the drop-downs in this window to write a code telling CHILI when to change your colors.
  3. Click the + (plus sign) button on the top left to create your first line
  4. Write your “if” statement using the following drop-downs:
    • If > variable > [Your Variable Name] > displayValue > [leave this drop-down blank] > is > string > [Your First Color] > [leave this drop-down blank]
      • This line of code is telling CHILI if your end user selects a color from your color changing list variable, then a change needs to happen. This is where your color name needs to be word-perfect.
  5. Use the + (plus sign) button in the top left to add a second line
  6. Write your “then” statement using the following drop-downs:
    • Set > color > [Default Color] > applyFromColor > = > color > [Your First Color] > id
      • This line of code is telling CHILI what you want changed. It’s saying if your end user selects the color from step one, you want it to push that swatch color to the default color.
      • You want to make sure to replace the default color, because it is being fully replaced by that new color and you want to make sure you are not replacing an active color swatch. 
  7. Use the + (plus sign) button in the top left to add a third line
    • Once this line is added, you’ll notice it is still indented. This means it is still referencing line one.
  8. When writing your “if” statement for subsequent colors, you will want to start the action logic with “else if”. This tells CHILI you want to start a new action that is unrelated to the action we started in line one.
  9. Continue adding all of your color options
  10. Click Apply to complete your action logic



Once your action logic is complete, you will notice your default color is still applied to your background. This is expected behavior. Navigate to the “Variables” tab on the right toolbar. From here, you can use the color changing list variable to choose your colors from the drop-down. As you do this, your default color will be replaced and you will only see the color variables you assigned in your action logic.


Save your file and you are now ready to create your Smart Template in Tempo.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article