Overview: How To Customize Colors On The Twilight Design

This article will go over how to change the colors on the Twilight design.

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.

duplicate_twilight.png

Give your design a new title, then click  duplicate.

copy_tour_design.png

Customizing Colors on Twilight

In the examples below, we are using a bright pink color to better point out what each settings defines.

Primary Background Color - controls the background color in the footer as well as the background of each page (overview, contact, gallery, video, etc.)

primary_background_color.png

Primary Font Color - controls the font color for the social media buttons, slideshow navigation buttons, as well as contact, descriptions, and school font. 


primary_font_color.png

Header Background Color - controls the color of the Audio settings in the bottom left of the page

header_background_color.png

Header Font Color - controls the font color of the Audio settings in the bottom left of the page

header_font_color.png

Nav Background Color - controls the color of the lefthand side navigation menu background, as well as the background of the Contact fly-out tab on the right

nav_background_color.png

Nav Font Color - controls the color of the font in the lefthand side navigation menu background, as well as the font color of the Contact fly-out tab on the right

nav_font_color.png

Nav Active Color - controls the background color of the currently active/viewed menu tab

nav_active_color.png

Nav Hover Color - controls the color indicator when hovering over a navigation menu option

nav_hover_color.png

Button Background Color - controls the button background color for buttons in the overview, contact info, and gallery pages.

button_background_color.png

Button Font Color - controls the button font color for buttons in the overview, contact info, and gallery pages.

button_font_color.png

Floorplan Overlay Color - controls the color of the outline of an image on a floor plan; when that image is clicked, this also controls the color of the background of the floor plan pop up that appears in the bottom left of the slideshow

floor_plan_overlay_color.pngfloor_plan_overlay_color_2.png

Highlight Reel Background Color - controls the background color of the highlight reel destination button (view gallery or view slideshow), as well as the interstitial page at the end of the highlight reel

highlight_reel_background_color.png

Highlight Reel Font Color - controls the font color of the highlight reel destination button (view gallery or view slideshow), as well as the font/buttons on the interstitial page at the end of the highlight reel 

highlight_reel_font_color.png

Highlight Reel Progress Indicator Color - controls the color of the progress indicator buttons in the highlight reel

progress_indicator_color.png

Highlight Reel Active Indicator Color - controls the color of the currently active indicator button

active_indicator_color.png

Secondary Background Color - controls the background color of the right-hand side agent contact fly out, as well as the background of the inline contact form

agent_contact_background.pngagent_contact_background_2.png

Secondary Font Color - controls the font color of the right-hand side agent contact fly out, as well as the font of the inline contact form

secondary_font_color_1.pngsecondary_font_color_2.png

Property Status Background Color - controls the background color of the property status banner

property_status_background_color.png

Property Status Font Color - controls the font color in the property status banner 

property_status_font_color.png

Open House Background Color - controls the background color of the open house banner

open_house_background_color.png

Open House Font Color - controls the font color in the open house banner 

open_house_font_color.png

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.