Global Styles

Global styles are a defined set of properties that can be applied to multiple elements at a time. A single element can also have multiple styles applied to it. Any change to a global style will automatically update all elements that haven't overwritten that property.

Global styles are managed via the "Quick Styles" tool which is located in the bottom left corner of the main application window.

When a project has global styles, all available styles will be listed in the Quick Styles tool. Any applied styles (assuming there are elements selected) will be at the top with a dark gray background. All other styles will be listed below.

Creating a Global Style

To create a global style open the Quick Styles tool and click the gray + button. The style dialog will open. Inside the style dialog you can set the style's name, see how many elements it is applied to and edit it's properties. By default all properties are toggled off and grayed out. To add properties to the style click the circle next to each property. Once toggled on, property inputs will become enabled.

Creating a Global Style from an Element

Global styles can be created from an existing element in your project. To do this, select the element on the canvas and then click the gray + button in the Quick Styles tool. When you create a style from an element the style will be pre-populated with all the visual properties of that element. Properties can still be toggled on/off.

Note: When a global style is created from an element the style will be automatically applied to the originating element.

Deleting a Global Style

To delete a global style open the Quick Styles tool and right click on the style you wish to delete and click "Delete Style". This will delete the style and break all element references it has.

Applying Styles to Elements

To add a style to an element select the elements you want to add the style to and click the + icon to the left of the style name in the Quick Styles tool.

When a style is added it will apply all of the properties that make up that style to the element. Overwriting any values that the elements have.

Removing Styles from Elements

To remove a style, select the elements you want to remove the style from and click the styles corresponding × button. This will break the link between the style and elements.

Note: When a style is removed from an element only the reference between the style and the element is removed. The element's visual properties will stay exactly the same.

Modifying Styles

To modify a style open the Quick Styles Tool and double click on the style you wish to update. The style dialog will open and you will be able to make changes to that style.

All changes to a style will be reflected on all elements it is applied as long as the element's property value matches what was in the style before the change.

Syncing Styles with Elements

Sometimes a global style and an element may fall out of sync. This occurs when the style's properties do not match the elements properties one-to-one. Out of sync styles are displayed in the Quick Styles tool with the words "(modified)" next to them when you have elements selected.

In the event you want to fully re-apply a global style's properties onto an element you can hit the refresh button (circular arrow) next to the style's name. This will apply all the style properties to the selected elements overwriting the values on the elements.