Custom-Style Plugin

[intapiuser]

Download: Custom Style

Introduction

As a web-based extensible platform, Sisense's web look and feel can be customized using CSS. This plugin provides a framework for letting customers apply custom styles to the Sisense web application.

For more information about CSS, please see Mozilla's developer guide: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference.

For more information about Sisense's JavaScript API, please see https://sisense.dev/guides/customJs/jsApiRef/.

What's Included

This plugin contains Roboto, a custom font from Google Fonts (https://fonts.google.com/) and the CSS needed to use it in the web application. You can use it as a framework to apply other fonts.

It also includes an example of modifying the last build time's font color to green.

For information about customizing the indicator, please see https://sisense.dev/guides/customJs/jsApiRef/widgetClass/indicator.html.

How To Customize

CSS relies on pairs of selectors (web elements to modify) and properties (how to modify the elements). To learn about general selector syntax, see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors.

To learn about general available properties, see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference.

To see the actual elements Sisense uses in order to use them in your selectors, use your web browser's Developer Tools console to inspect the elements.

Advanced Editing

There are some restrictions on what elements this plugin (and the Sisense plugin framework) can modify. To make customized modifications to other elements, Sisense's source CSS files are located at C:\Program Files\Sisense\PrismWeb\client\styles. Please note that you make all changes to Sisense source styles at your own risk. In addition, any modifications you make to these files will be overwritten with each upgrade, reinstallation, or repair.

Steps To Implement

Step 1: Download the plugin

Download and extract it to the following location: C:\Program Files\Sisense\PrismWeb\plugins.

If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. 

If your version of Sisense is 6.6.1 or lower, restart IIS (run 'iisreset' in the Windows Command Prompt as an administrator)

Step 2: Edit the stylesheet

Open "custom.css" file which is located in C:\Program Files\Sisense\PrismWeb\plugins\customStyle\styles. Edit the CSS file as desired and save the file afterwards. Refresh the dashboard page - it may take a minute for the plugin update to come through.

Disclaimer

This plugin has been written and tested in Sisense 7.1. Please note that the elements vary from Sisense version to version. Always ensure you have the license rights to use custom fonts. This plugin is not supported or reviewed with each updated version of Sisense; you use it at your own risk. For troubleshooting questions, please use the comments below or refer to general web CSS documentation.

Update on March 23, 2018 - Updated elements for Sisense 7.x. Added font example and more information about CSS.