Components Toolbox
The Components Toolbox holds a collection of predefined skin elements including icons and Lottie animations.
Components are a group of skin elements that can be saved as a single element in the Components Toolbox. If, for instance, you have a button (or group of buttons) that you know you can use with multiple projects/skins, you can save the group to the toolbox. This makes it easier than saving different skin versions because you can categorize and tag them and even add descriptions.
Open the Toolbox from the Toolbar or from Tools > Components Toolbox.
Components Toolbox Interface
The Toolbox is sectioned into the following parts.
Content
The Toolbox holds components, icons, and Lottie files. Each has its own tab.
Use the thumbnail slider in the lower right corner to change the thumbnail size of the grid. Click on a component, icon, or animation to select it and have its information shown in the sections to the right.
Remove a component, icon, or Lottie file by selecting it and hitting the Delete key.
PNG, GIF, animated PNGs, and WebP formats are supported and will be added to the Icons tab.
Drag icons and animations to their respective tabs to add them to the toolbox or to other categories. Icons that have multiple states can be treated as a single icon. Use the file suffixes, _o or _over for mouse over states and _a or _active for the active state:
my_icon_o.svgormy_icon_overmy_icon_a.svgormy_icon_active.svg
Use the context menu to Insert the component into the skin.
Categories
Categories provide a way to organize the content. You can add (green plus) and remove (red X) categories. The default categories are marked with a star and cannot be removed.
User-defined content can be moved to other categories by dragging them into the category.
Select multiple categories by doing any of the following:
-
Control-click [win] or Command-click [macos] on the categories.
-
Click the Select All Categories button above the categories.
Filter
Filtering is helpful for finding specific components. You can use Text or Tags or both to filter.
For example, if you want to find all Orb components that have pop-ups, select all Categories, then type, pop for the Text and select Orb for the Tag. You would then see all components that include the text, pop, and are tagged Orb.
Text – Filter the components with any text string. Text added to the Information section is searchable.
Tags – Filter the components with any tags.
Reset Filter – Click to clear all filters.
Information
This section provides information about the selected content. Built-in content information cannot be changed. However, any user-defined content can have its information changed.
Title – The title of the component, icon, or animation.
Author – Give credit to the person who created the component, icon, or animation.
Copyright – Add copyright information.
Tags – Add tags. Tags added here will show up in the Tags menu in the Filter section.
Description – Add information about the component, icon, or animation you find necessary. We use it to provide instructions on how to use components, for example.
Preview
This is a preview of the selected component.
Right-click the preview to change the image in User-defined content. Or, drag in the preview image to change it.