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.
- 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. - The
color: #FFFFFFrefers to your font color. - 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. - The
padding-top, padding-bottomandpadding-leftincrease the size of the background color. Depending on your personal preferences, you can reduce or increase these, as well as add apadding-rightelement. - 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).
- The
- 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.