The Color Tool, found in the Skin Editor, allows us to quickly change the colors of a skin or selected elements. We can change an entire skin's color scheme, or change multiple elements at once. It also enables us to **expose colors** for quick edits in the output panel. This allows us to modify colors without opening the Skin Editor. The tool can also be used to change colors in SVG graphics.

In this page we will cover the following topics.

Fixed Buttons - Rectangles
- Rectangles
- Rectangles Exposed Colors
Fixed Buttons - Symbols
- Single
- Multiple
- Exposed Colors
Languages
Edit Skin Configuration - Skin Colors
Fixed Buttons Color Combinations
Popups
- Rectangle Container
- Button Symbols
- Symbol Containers
- Information
- Floorplan Markers
- Maps
- Adding Popup Skin Colors
Popups Color Combinations
Menus
- Buttons - Expanding, Single, Sub-Category
- Node Titles - Expanding, Sub-Category with Image Option
- Mobile Menu
Menus Color Combinations
Thumbnails
- Global
- Mobile
- Desktop
Thumbnails Color Combinations
Hotspot Templates
Responsive Popups
- Gallery
- Information
- Web
- Video
- 360 Video

Coming: Hotspot Templates, Splash Screen, Pin Points, Node Titles, CSS Filters

Fixed Buttons

Fixed buttons are made up of two skin elements;

Rectangles
SVG files

The exception are the individual language selection buttons that are made from Rectangles, Cloner and Text elements.

Fixed Buttons Rectangles ⇑

Each button is contained within a rectangle. The rectangles have four colours assigned to them, some via logic blocks, in the Properties > Rectangle section;

Background: Color = #a6a6a6
Background Logic Mouse Over Color = #6c6c6c
Boder: Color = #ffffff
Border Logic Mouse Over Color = #000000

Note: all colors are HTML and have an Alpha of 255

Rectangles Exposed Colors

In order to change the colors they need to be exposed. Once they are exposed they will appear in the Edit Skin Configuration window.

The colours are exposed using the Color Tool and given a specific name and/or Alpha option.

In the case of the Fixed Button rectangles the result is as follows with the Exposed name, Color and the Action.

Border Mo (#000000): color when the mouse is over the rectangle
Backgroun Mo (#6c6c6c): color when the mouse is over the rectangle
Background (#a6a6a6): default color
Border (#ffffff): default color

Symbols ⇑

Single

Some of the symbols are a single SVG element added as a child of the rectangle. Each SVG has two states Normal and Mouse Over (Facebook button shown below).

The example below shows a single SVG element, the ‘Facebook’ button in the Properties > SVG Image section.

Other single SVG element buttons are:

Whatsapp
Ambient On
Ambient Off
Social Media (Facebook, X, Instagram, Pinterest, LinkedIn, Bluesky)
Sharing Media
Info
Goggle Maps
Language

Multiple

Single symbols have a single state i.e open a poupup window, toggle new buttons. Multiple symbols have alternate states such as Hide UI, Open a Map, Toggle Fullscreen.

The image below shows the two single symbols used in the ‘hide’ button.

The individual SVG elements have the same three colours assigned to them, via the SVG image section.

Exposed Colors

Languages ⇑

The language button is unique in that it has additional specific language buttons that are shown/hidden by Mouse Click on the ‘Language' button or when a language button is selected.

The unique aspect of this type is that the buttons are cloned and as such they are text elements not SVG.

When exposing the Text buttons some entries are unique and some use colors that are already exposed. The image below shows the exposed colors of the Language text buttons.

Red = existing exposed colors | Yellow = exposed colors for text buttons

Edit Skin Configuration - Skin Colors ⇑

Once the colors are exposed and the skin saved the Edit Skin Configuration window will show the Assigned names, the Default colors and the Modified colors as shown below.

Color Combinations ⇑

Now we can create our own unique color combinations using new colors and alpha values. In this example I want to do the following:

Set the Rectangle Background to White (#ffffff) and the Alpha to 175
Set the color of the Rectangle Background to Red (#e63a29) on Mouse Over
Set the color of the Rectangle Background to Dark Red (#7d1f17) for the ‘Active’ state on the Language buttons
Rectangle Border remains White (#ffffff)
Change the Rectangle Border to White (#ffffff) on Mouse Over
Set the color of the Symbol to the red color in the ‘three finger salute’ icon (#e63a29)
Hide the Symbol background by setting the Alpha to 1*
Set the colors of the Symbol to white (#ffffff) on Mouse Over
Set the Text in the Language buttons to Red (#e63a29)
Set the Text in the Language buttons to White (#ffffff) on Mouse Over
Tooltip remains White (#ffffff)

*Note: in #7 we set the Alpha to 1. There is a bug in the software that shows the background if the Alpha is set to 0.

After making the changes to the Edit Skin Configuration file and republishing the change can be seen in the new interface colors below.

Popups ⇑

Several of the Fixed Buttons have actions that open popup windows. Those buttons are; WhatsApp, Maps/Floorplans, Info and Google Maps.

Just like the fixed buttons the popups, with the exception of What’sApp, can been assigned colors that can be exposed and changed in the Edit Skin Configuration.

Note: WhatsApp opens a new tab so we cannot control the UI in that new tab.

For the popup windows we will be using some of the Exposed Colors from the buttons.

Rectangle Container

cnt_floorplan
cnt_google_map
cnt_info

Button Symbols

svg_floorplan_min,
svg_floorplan_max
svg_floorplan_map_close
svg_floorplan_mobile_close
svg_google_map_close
svg_info_popup_close

Symbol Containers

The symbol containers used in the Popups have the same exposed colors as those symbol containers in the Fixed Buttons.

The symbol containers are as follows;

rct_floorplan_resize
rct_floorplan_close
rct_google_map_close
rct_info_popup_close

Information

txt_info_created_by
txt_info_contact
txt_info_url

Floorplan Markers

marker_center

marker_bg

marker_tooltip

Maps

map
floorplan

map_no_radar
floorplan_no_radar

Popup Color Combinations ⇑

Now that we have added additional elements related to popups we can build on the initial exposed colors incorporating the new colors and alpha values. In this example I want to do the following:

12. Set the color of the Map Header to Red (#e63a29)
13. Set the Map Marker color to Dark Red (#7d1f17) when ‘Active’
14. Set the Map Marker Center color to Red (#e63a29)
15. Leave the Map Tooltip color the same (#ffffff)
16. Set the Map Radar to Dark Red (#7d1f17)
17. Leave the Popup Border color the same (#ffffff)
18. Set the Popup Background to transparent (Alpha 175)
19. Set the Popup Button to Red (#e63a29)
20. Set the Popup Button to White (#ffffff) on Mouse Over
21. Leave the Popup Text as White (#ffffff)

After making the changes to the Edit Skin Configuration file and republishing the change can be seen in the new interface colors below.

MENUS ⇑

Menus require some additional color variations to manage the use of images within the menu structure.

Buttons - Expanding, Single, Sub-Category

category
single_menu_node
main_menu_cat

Node Titles - Expanding, Sub-Category with Image Option

node_title
main_menu_node_title

Mobile Menu

mobile_category_single_title
mobile_category_title
mobile_subnode_title

Menu Color Combinations ⇑

Now that we have added additional elements related to the Menus we can build on the initial exposed colors incorporating the new colors and alpha values.

The menus use a number of the exposed colors (red outline) already so in this example I only have to set three colors (green outline):

22. Set the color of the Menu Image Mouse Over to Red (#e63a29)

23. Leave the Menu Image Text color the default color (#ffffff)

24. Set the Menu Image Overlay to transparent (Alpha 1)

Main menu showing with applied colors. Active color on the current category.

Main menu showing sub-category nodes. Mouse Over color on the Category button, Active color on the current node.

Main menu showing sub-category nodes. Active color on the current node and Mouse Over color on the ‘Worm’ node button,

Mobile Menu showing Active colors.

Thumbnails ⇑

Location: IND_LOCATION_THUMBS

Global:

thumbnail_show_hide

Mobile

thumbnail_scroller_phone

checkmark_tick

thumbnail_node_title_phone

Desktop

thumbnail_menu

thumbnail active

checkmark_tick

checkmark_tick_active

thumbnail_title

Thumbnail Color Combinations ⇑

Now that we have added additional elements related to the Thumbnails we can build on the initial exposed colors incorporating the new colors and alpha values.

The thumbnails use a number of the exposed colors (red outline) already so in this example I only have to set six colors (green outline):

25. Set the Border Active to to Red (#e03928)

26. Leave the Thumbnail Background color the default color (#000000)

27. Leave the Thumbnail Checkmark Active color the default color (#ffffff)

28. Set the the Thumbnail Checkmark Visited color to Dark Red (#7d1f17)

29. Set the Thumbnail Scrollbar Background color to White (#000000) and Alpha (125)

30. Set the Thumbnail Scrollbar Foreground to Red (#e03928)

31. Leave the Thumbnail Text to White (#000000)

Thumbs Desktop showing current node checkmark and mouse over title and show/hide button.