Matching the Desktop Look and Feel

To maintain a consistent look and feel across third-party gadgets and the desktop, you can use the CSS styles provided by the desktop. To do this, it's essential to link the finextcommonstyles.css file to the gadget as follows:

Code Snippet

Copy<link rel="stylesheet" type="text/css" href="__UP_externalServerHost__/desktop/scripts/css/finextcommonstyles.css"/>

The desktop CSS file should be added to Exclude URL list as described in the Optimizing Gadget Resource Loading section.

Use the respective styles from the CSS file.

By applying the respective styles, you can customize the UI elements to match the look and feel of elements present in desktop. For instance, if you want a button to have a blue (info) background color and white text color on it, follow this example:

Code Snippet

Copy<input type="button" class="finesse-button-default" id="button" value="Say hello" onclick="sayHelloWorld(); return false;"/>

Similarly, by applying the appropriate class such as finesse-button-default, the button inherits styles from the linked CSS file, ensuring a uniform appearance between the third-party gadget and Finesse Desktop.

For other similar styles, refer to the CSS file and apply the styles accordingly.

For more information on the CSS properties and the description on when to use them, see Finesse Desktop Common CSS Styles.