Skip to main content

Theme

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.

Selecting a preset theme​

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.

Customizing colors​

To adjust the colors of various UI elements such as the Finsemble toolbar or the color of a button:

  1. Choose the appropriate element.
  2. Click the color block.
  3. Using the color-picker, pick a new color.

The color-picker supports colors specified in hexadecimal, RGB, or HSL.

Alternatively you can specify the hexadecimal color.

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.

Customizing text colors​

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:

  • Select Primary Font Color to alter text in the toolbar and window title bar
  • Select Secondary Font Color for menus and dialogs
  • Select Contrast Color to change drop shadows for example
  • Select Font Size. This will change the height and width of text

See Text Styles & Font for more information.

Customizing other elements​

You can customize:

  • brand colors
  • background colors
  • navigation buttons
  • highlight and mouseover colors,
  • success messages
  • reminders and warnings
  • errors.

Icons and images​

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:

  • installer
  • taskbar
  • toolbar
  • system tray
  • app
  • avatar

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.

Installer icon​

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 <your seed project>/configs/other/installer.json in the fields icon (as an .icon file for Windows), or macIcon (as an .icns file for MacOS). The default location for the installer icons is <yourseed project>/public/assets/img/installer_icon.ico and <yourseed project>/public/assets/img/installer_icon.icns.

note

Right now you can't use different icons for installers and desktops.

Taskbar icon​

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.

Toolbar icon​

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 <your seed project>/assets/img/Finsemble_Toolbar_Icon.png. You can change this location by modifying the Toolbar's template in your seed project.

System tray icon​

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 <your seed project>/assets/img/Finsemble_SystemTray_Icon.png. You can override the location by setting the config field finsemble.systemTrayIcon to point to an alternative url.

Splash screen​

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.

Installer splash screen​

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.

App icons​

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:

  • the window title bar for the app,
  • the Windows taskbar item associated with the app,
  • Favorites that are created in your smart desktop toolbar,
  • search results when the app is one of the results.

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:

"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.

Avatars​

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.

Setting the taskbar icon overlay​

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.


See also​

Introduction to Smart Desktop Designer

Build your smart desktop with me

Manage apps

Toolbar

Authentication

Preloads

Finish