Skin Editor Properties
The Properties section is where you can edit each element and change the way it behaves through actions. All the properties are grouped in collapsable panels.
Depending on the element that is active, the properties will change.
Learn more about each element’s properties:
The skin settings are available when no element is selected. To deselect an element and return to these settings, click in the outer part of the canvas.
Width & Height – This will adjust the canvas’s width and height, measured in pixels. To get a better idea of how your skin will look on output, set the size to the project’s output window size.
Grid – Adjust the canvas’s grid in pixels. For example, a setting of 10, will create a grid of 10 pixel squares.
Use margins to set extra space outside of the panorama window (Top, Bottom, Left, Right) to display elements outside of it. These elements could be anything from maps, thumbnails and buttons.
Variables are powerful little tools that can help simplify automation within a skin. An example use would be to define skin themes; like changing languages, or the skin’s colors, etc. You can assign logic blocks to elements and use a single Mouse-click action to change themes.
For instance, if on a button click you wanted to show 4 elements and hide 3 others, you just need to apply a logic block to those elements, using the variable you defined.
Variables can be used as custom triggers in logic blocks.
Name – The name of the variable. This will show up in the Triggers list in a logic block and in the Set Variable Value in Skin Actions.
Type – Choose the type of variable:
Init Value – This is the variable’s base (default) value and it should be defined by the Variable type. For example, the Type is set to True/False, the Init Value should be either true or false.
Expose – Select to have the variable exposed in the HTML5 output. This allows for skins to be easily configured for the needs of each project.
Description – An optional description of the variable. If you expose the variable, this description will appear as the label in the Edit Skin Configuration dialog in the Output panel.
Embedded Stylesheet – Add CSS code to apply to the whole skin.
Add a Custom Font to a Text Box
Choose CSS from the External Files table.
Add the URL of the font in the URL column. For example,
Open the Advanced pane of a Text Box.
Add the CSS Styles to the CSS Styles Inner Element field.
font-family: 'Quicksand', sans-serif;
Check the style with Live Preview.
Change Skin Canvas Color
You can change the color of the canvas by going to the View Menu and choosing a color from the submenu, Canvas Background Color.
You can also create a custom color. Choose Custom and use the system’s color picker to define the color.
Edit an element
To edit an element, do any of the following:
Select it either in the Editor, and make changes in the Properties.
Select it in the Tree, and make changes in the Properties.
Edit multiple elements
To edit multiple elements at the same time:
Select multiple elements in either the Tree or Editor.
Edit their properties. Common properties amongst the elements will be shown.
Elements that share the same properties and have the same value, their values will be visible.
Values that mismatch will be empty
Switch to Solo Mode
To show only one panel open at a time, do one of the following:
In the menu, choose, View > Properties Solo Mode.
Use the keyboard shortcut: Control-Shift-P/Command-Shift-P
Click the panel header while pressing the Alt key.
Hover your mouse over the right edge of the panel header and click the ellipses button.
Toggle through the Panels
Use the keyboard shortcut: Control-Shift-PageUp/Down (win) or Command-Shift-PageUp/Down (macOS)
Show or Hide the Actions and Modifier panels
For the Actions Panel: Control-Shift-A/Command-Shift-A
For the Modifications Panel: Control-Shift-M/Command-Shift-M
Hitting these shortcuts again will close the panels and return the other panels to their previous state.
Create an Image Slideshow - Number Variable
Learn how to create a slideshow within a panorama using number variables.
Change the Language in Text Boxes - Text Variable
Learn how to change the language of text boxes using text variables.
Toggle between Hotspot and Thumbnail Navigation - True/False Variable
Learn how to use the true/false variables in the Skin Editor. You learn how to use them within a logic blocks added to buttons that toggle between hotspot and thumbnail navigation.