How to add category colors to popup headers

Do you want your popup header to match the series' color? Read how to achieve this below! 

1
In the Data tab, create a new column called Color and bind it under Info for popups .

2
In the new Color column, paste the color hex code for each of your series. Make sure that you have added the # as well. You can find the exact shade by clicking on Edit color palette under the Color settings in the editor. You can read more about Flourish color palettes here.

3
Under Popups & panels settings, select Custom under Popup content.

4
Enable the Show popup styles toggle and change the padding to 0. We're going to adjust it manually using custom HTML.

5
Under Popup custom header, copy and paste the following:
6
Let's break down the aforementioned snippet.

  1. The background-color: {{Color}} is the background color of your header, which will adopt the color you have specified in your Color column. If your column is named differently, you can replace {{Color}} with your alternative column name, but it needs to be an exact match.
  2. The color: #FFFFFF refers to your font color.
  3. The width: 97% determines the length of the colored background. Depending on the maximum height of your popup, you may have to increase the width to 100% instead.
  4. The padding-top, padding-bottom and padding-left increase the size of the background color. Depending on your personal preferences, you can reduce or increase these, as well as add a padding-right element.
  5. Last but not least, the {{Country}} determines what is your header displaying. You can replace this with any column name from your data, as long as it is bound to a setting (such as Size, Value or Info for popups).
7
If you would prefer your font color to match the series' color (as opposed to the background color), you can do this by removing the background-color: {{Color}} bit. Instead, you will need to replace the default font color with {{Color}}.
You can then adjust the way your header looks by using the Header style settings.

Related Articles