Tourbuzz Support Site

Everything you need to know to create virtual tours with Tourbuzz

Follow

Overview: How to customize colors on the Crisp & Sidebar Designs

This article will go over how to change the colors on the Crisp & Sidebar designs as well as some pre-made customization references to popular brokerage colors.

Customizing colors on:

Customizing designs for a specific brokerage

 

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 Crisp

Primary Color - This color is the tour’s overall default color. Changing this color will effect Heading 1, Heading 2, audio icons, footer background and all buttons. The hover state of buttons and links are a lighter version of this color.

Tips - You should always avoid using a light primary color. The hover state of buttons and links are a lighter version of this color. Lighter primary colors will result in a lighter/white hover color. Darker primary colors will result in a darker hover color.

In this example, the primary color is red

Tour Font Color - This will be the main font color on the tour. This color effects the description, and text you will find in the different tabs on the Crisp design. 

Tips - Avoid using white as your Tour Font Color as the background color on most of your tabs is also white

In this example, the tour font color is blue.

Tour Headline Background Color - This changes the background color of the header area if you have something entered in Heading 1 and Heading 2. This also will change the color of the font in the footer, and the color of the social media icons in the footer. 

In the example below, the Tour Headline Background Color is set to blue.

Navigation Menu Background Color - Navigation Menu Background Color is the second most used color on the tour. This color is shown as the navigation background color, agent summary tab, and controls the color of the active page indicator.

Tips - In the example below, the Navigation Menu Background color is yellow and the active page indicator color has calculated to gray. You are not currently able to change the active page indicator color. 

In the example below, the Navigation Menu Background Color is set to red.

Navigation Menu Font & Icon Color - The Navigation Font & Icon Color changes the color in your navigation, where the tabs to other media assets are located. You may also refer to this as the tour menu. 

In the example below, the Navigation Menu Font & Icon Color is blue

Highlight Reel Title & Button Color - This changes the font color of heading 3, the content color of the highlight reel button and the color for the button hover state. 

In the example below, the Highlight Reel Title & Button Color is yellow

Button Font & Icon Color - This changes the color and text inside of buttons. 

In the example below, the Button Font & Icon Color is Red

 


Customizing Colors on Sidebar

Primary Color - This color is the tour’s overall default color. Changing this color will effect Heading 1, Heading 2, audio icons, footer background and all buttons. The hover state of buttons and links are a lighter version of this color.

Tips - You should always avoid using a light primary color. The hover state of buttons and links are a lighter version of this color. Lighter primary colors will result in a lighter/white hover color. Darker primary colors will result in a darker hover color.

In this example, the primary color is blue

Tour Font Color - This will be the main font color on the tour. This color effects the description, and text you will find on the different tabs on the Sidebar design. 

Tips - Avoid using white as your Tour Font Color as the background color on most of your tabs is also white. 

In the example below, the Navigation Menu Background Color is set to blue.

Navigation Menu Background Color - Navigation Menu Background Color is the second most used color on the tour. This color is shown as the navigation background color, agent summary tab, and controls the color of the active page indicator.

Tips - In the example below, the Navigation Menu Background color is yellow and the active page indicator color has calculated to gray. You are not currently able to change the active page indicator color. 

In the example below, the Navigation Menu Background Color is set to red.

Tour Headline Background Color - This changes the background color of the header area if you have something entered in Heading 1 and Heading 2. This also will change the color of the font in the footer, and the color of the social media icons in the footer. 

In the example below, the Tour Headline Background Color is set to blue.

Navigation Menu Background Color - Navigation Menu Background Color is the second most used color on the tour. This color is shown as the navigation background color, agent summary tab, and controls the color of the active page indicator.

Tips - In the example below, the Navigation Menu Background color is yellow and the active page indicator color has calculated to gray. You are not currently able to change the active page indicator color. 

In the example below, the Navigation Menu Background Color is set to red.

Navigation Menu Font & Icon Color - The Navigation Font & Icon Color changes the color in your navigation, where the tabs to other media assets are located. You may also refer to this as the tour menu. 

In the example below, the Navigation Menu Font & Icon Color is blue

Highlight Reel Title & Button Color - This changes the font color of heading 3, the content color of the highlight reel button and the color for the button hover state. 

In the example below, the Highlight Reel Title & Button Color is blue.

Button Font & Icon Color - This changes the color and text inside of buttons. 

In the example below, the Button Font & Icon Color is Red


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk