Legacy version 6 documentation. View current documentation.Legacy version 6 documentation. View current documentation.
Finsemble provides a default look which you can keep as is, or you can change it. Your desktop design is highly customizable.
You can use the Theme tab to customize your desktop project's UI to match your organization's brand guidelines and UX requirements. You can customize most of the elements, including colors, text sizes, images, and icons.
Finsemble provides two preset themes, Dark theme and Light theme. The dark theme offers black background and white text, while the light theme displays black letters on the white background. To see the differences, open any app and then toggle between these themes. The app will switch between these two themes.
You can use these themes as is, and they also provide you with a starting point for your customizations.
After you choose a preset theme as a starting point, continue to customize the projects UI by customizing appropriate colors.
Note: If you have chosen a preset theme and made a number of color customizations, you can revert your changes to the preset theme's original state by re-selecting the preset theme. Finsemble will ask you to confirm your request to restore the default theme. This is helpful if you need to start over, but keep in mind that this operation can't be undone.
To adjust the colors of various UI elements such as the Finsemble toolbar or the color of a button:
The color-picker supports colors specified in Hexadecimal, RGB, or HSL.
Note: When adjusting colors, we recommend that you launch an existing app, such as Take a Tour, to see the color changes to various elements.
| Color option | Elements affected |
|---|---|
| Brand color | The primary color of buttons, icons, and favorites |
| Background color | Background color of desktop components such as the toolbar and window title bar |
| Default navigation | Background color for most buttons used for navigation |
| Highlights and mouseover colors | Colors highlighting particular elements seen when a user mouses over selected elements |
| Success | Color of success messages and affirmations |
| Reminders and warnings | Color of non-critical alerts |
| Errors | Color of critical errors and information |
In the font settings area you can specify the text size and color.
To chance the text size, pick the appropriate size from the dropdown. The default size is large.
To change text colors and sizes in the toolbar, menu, and other elements of the user interface:
Primary Font Color to alter text in the toolbar and window title barSecondary Font Color for menus and dialogsContrast Color to change drop shadows for exampleFont Size. This will change the height and width of textSee Text Styles & Font for more information.
| Style option | Element affected |
|---|---|
| Primary text | The font type, color, weight, and size of text in the Finsemble Toolbar and window title bar |
| Buttons | The font size and color of text in buttons and icons |
| Search | The font colors of text that appears in the search menu. These settings cover the search text being entered by a user, and the results displayed |
Finsemble comes with standard built-in icons, but you can customize them to match your business needs or esthetics. To fully brand your desktop project, you can change the icons and images that users see during launch and use.
Icons are widely used because finding an icon on a screen is easier for a human than finding an app by reading a name in a long list of character strings. For this reason, you will want to use icons in your smart desktop.
Finsemble places multiple icons on a user's screen:
You can also customize the splash screen displayed while launching and the installer splash screen displayed during Finsemble installation. For any of these icons and splash screens, you can use any image you want, as long as it is in the PNG format and the image size works for you.
Note: If you don't have an ICO format image for your icon, there are numerous online services that convert PNG or other formats to ICO or ICNS format. We don't recommend one service over another, but a quick search will bring you to the right places.
Icons for different purposes can differ from one another. You can have icons of different sizes, even though the image they show might be the same. You have a lot of control over the icons, so you can set them exactly the way you want them. Or you can do nothing at all with the icons. If you don't want to configure the icons, Finsemble will choose one for you.
The easiest way to configure all icons is by using the Smart Desktop Designer (SDD) when you create your project. In SDD your icons are set in Images under Theme.
You can change any of your icons later, but it might not be possible to reopen your project in SDD. Instead, you will need to edit the appropriate JSON config file.
You might be wondering whether you need so many different icons. No, there is no requirement for them to be different. It's perfectly fine to use the same image file everywhere, and for simplicity you might choose to do exactly that.
Note: Except where noted, icons are always automatically scaled up or down to fit your screen.
To get started working with icons and images, click the Images tab in the Theme menu.
Before you begin, we recommend that you prepare images and icons ahead of time to make sure the experience you're building is of high quality. While it is possible to make changes to these images and icons later, it's much easier to get it right the first time.
As you customize your desktop project with new images and icons, you will see your changes almost immediately.
The installer icon appears on your screen while you install a smart desktop. It also displays in the start menu (for Windows) or in the finder (on a Mac). On MacOS, this image also appears in the dock. Finally, the same image is also used as the desktop icon for the installer itself.
Note: If you don't specify a desktop icon, Finsemble uses the standard Finsemble icon.
It's best to follow the vendor recommendation and set the size for installer icon to 64 by 64 pixels or greater for Windows and 512 by 512 pixels for MacOS.
The location of your installer icon is
Note: Right now you can't use different icons for installers and desktops.
The taskbar icon appears in the Windows taskbar when your smart desktop is running.
Note: On the Mac, there are no taskbar icons for multi-window apps. Instead, the Mac dock displays just the desktop icon.
Note: If you don't set a taskbar icon, Finsemble uses the desktop icon instead.
The taskbar icon also appears in several other places in the smart desktop, both on Windows and MacOS. It appears in system toasts (system level messages but not business notifications). It is the default icon that Finsemble uses whenever one of the specialized icons listed in this topic has not been specified.
We recommend that you set the taskbar icon be a PNG of size 32 by 32 pixels or larger, with a transparent background.
The location of the taskbar icon is specified in your manifest's config at startup_app.applicationIcon. The default location is <your seed project>/assets/img/Finsemble_Taskbar_Icon.png.
The toolbar icon appears in the top left corner of your smart desktop's toolbar.
We recommend that you set the toolbar icon to be a PNG of size 64 by 64 pixels with a transparent background. you can also reuse a 64 by 64 pixel image you specify elsewhere.
The toolbar icon is not specified in Finsemble's config but is instead directly referenced at
The system tray icon appears in your operating systems tray. On Windows, the tray is typically in the bottom-right corner of the screen. On MacOS, the tray is in the top-right corner of the screen. If you don't specify a system tray icon, Finsemble reuses the toolbar icon.
We recommend that you set the tray icon to be 16 by16 pixels or larger, in the PNG format with a transparent background.
The default location for the system tray icon in your project is finsemble.systemTrayIcon to point to an alternative url.
The splash screen image appears while your smart desktop is launching. The splash screen must be 600 by 400 pixels in the PNG, JPG, or SVG format.
The default location for the splash screen image is <your project>/public/assets/img/FinsembleSplash.png. You can overrrde he location of the splash screen image in your smart desktop manifest by setting the splashScreenImage field.
The installer splash screen image appears while your smart desktop is being installed on a user's desktop. There are separate images for Windows and MacOS.
Note: Currently you can't set the installer splash screen images in SDD.
In your project, the installer splash screen images are located in *<your project>/public/assets/img/installer-image-windows.gif* and *<your project>/public/assets/img/installer-image-mac.png*. Windows accepts only the GIF format and MacOS accepts only a PNG format. Currently you can't override these locations.
Note: We recommend that you use the default Mac installer image we provide because most MacOS apps use a similar image to direct users how to install their app by dragging.
Each app that is integrated into your smart desktop can specify its own icon. The icon associated with the app is displayed in these areas of the smart desktop:
Favorites that are created in your smart desktop toolbar,Generally, app icons work best as PNG images of size 64 by 64 pixels with transparent backgrounds. You can also use the JPG and GIF formats.
Note: SVG is supported but will only display in the window title bar and toolbar. The desktop icon will be displayed in the taskbar for apps with an SVG icon. Similarly, ICO format is not supported in the browser or MacOS and so will not display in the toolbar or title bar. We recommend not using these formats.
In the Smart Desktop Designer, you can enter the url of your app's icon iwhen you edit the app configuration.
Within your project, icon urls are specified in the icons array within each app's AppD entry (in appd.json).
This example is the minimum required configuration:
json"appd" :
{ "MyComponent" :
{ "name" : "MyComponent",
"icons" :
[
{
"src" : "$applicationRoot/MyComponent/icon.png"
}
]
}
}
Note: you can optionally set the size and type properties for each icon. See the FDC3 appD specification for details.
If multiple icons are specified, Finsemble will choose the most appropriate icon for each situation based on the size that is specified, otherwise the icon will be scaled to the situation. For simplicity we recommend that you provide a single png icon of size 64 by 64 pixels.
Every app needs some kind of visual representation. Usually that's an icon, but sometimes there are apps with no associated icons. If Finsemble finds no icon for an app, it must display something else. In that case, it displays an avatar.
An avatars is a circle filled with one color that shows two letters from the app's name. Finsemble picks the first letter from the first two significant words in the app's name. Significant words are those over 3 characters long. If there’s only a single significant word (or no significant words), Finsemble uses the first two letters of the first word. For example, if you had an app called My Awesome Charts and if you didn't have an icon for it, its avatar would be AC.
Note: This feature was added as experimental in Finsemble 6.6. It might change substantially over time or it might not be supported in the future. Use at your own risk.
Windows supports an icon overlay, which is a 16 by 16 pixel image that can be superimposed on the taskbar to provide additional information about the app associated with the icon. For example you can use an overlay to indicate activity in that app. Your apps can call Finsemble's API to set or remove the icon overlay. The overlay icon must be a PNG file.
Icon overlay images must be 16 by 16 pixels.
Note: MS Windows doesn't scale overlay images. Instead, it simply doesn't display an image of the incorrect size.
To specify an overlay, use:
FSBL.Clients.WindowClient.setTaskbarIconOverlay("http://yoursite.com/path/icon.png");
Pass null to remove the overlay icon.
Introduction to Smart Desktop Designer