Overview: How To Customize Colors On The Zephyr Design

This article will go over how to change the colors on the Zephyr design as well as some pre-made customization references to popular brokerage colors.

Before making any major changes to your designs, click on  duplicate and rename your new design. This way, you will always have the original to revert back to.

To do this, click on  designs then duplicate.

Give your design a new title, then click  duplicate.

Customizing Colors on Zephyr

Background Color - This color is the tour player's overall default background color.

In this example, the background color is yellow.

Tour Font Color - This will be the main font color on the tour.

In this example, the tour font color is yellow.

Header Btn Font Color - This changes the header button font/border color. 

In the example below, the Header Button Font Color is set to yellow.

Media Info Font Color - This color is shown as the font color for name/description of media assets in the player.

In the example below, the Media Info Font Color is set to yellow.

Footer Icon Color - The Footer Icon Color changes the icon/font color for controls in the footer. 

In the example below, the Footer Icon Color is yellow.

Progress Bar Color - This changes the inside color of the progress bar.

In the example below, the Progress Bar Color is yellow.

Progress Bar Icon Background Color - This changes the color of the progress bar icon background's color. 

In the example below, the Progress Bar Icon Background Color is yellow.

More Info Background Color - This changes the background color of the more info section. 

In the example below, the More Info Background Color is yellow.

More Info Font Color - This changes the font color of the More Info section. 

In the example below, the More Info Font Color is yellow.

Highlight Color - This changes the color of the current page title in More Info menu. Also sets the color of links. 

In the example below, the Highlight Color is yellow.

Agent Overlay Background Color - This changes the color of the agent overlay background color if the Agent Branding design option is set to 'Show', sets background color of agent branding overlay and contact tab.

In the example below, the Agent Overlay Background Color is yellow.

Agent Overlay Font Color - This changes the color of the agent overlay font color if the Agent Branding design option is set to 'Show', sets font color of agent branding overlay and contact tab.

In the example below, the Agent Overlay Font Color is yellow.