This article briefs you about how you can completely white label and change the look and feel of Helical Insight as per your own requirement. Unlike other tools, we provide extensive white labeling capabilities which includes header, footer, login page, logout page, context menu, file browser, repository and any other functionality as well. With Helical Insight it is even possible to have organization specific/user, specfic/role specific white labeling which means the solution will identify who has logged in and based on that every person can have their own completely customized Helical Insight.White labelling generally involves overriding the default CSS, but in some cases, may also include changing the alignment of the pages completely.
- Overriding default CSS : This method is employed only when changes such as colors, font-type, size of elements, etc are required. This method cannot be used when we want to add or remove elements for most parts.
- Realigning Pages : This method is used when the user needs to add or remove elements from the DOM and needs to make drastic changes in the page’s look, such as adding images, complete realignment of pages, removing some options, etc.
Neither of these methods affects the working of the application, but the user must be careful of the changes being made, so as to avoid over-riding any functional aspect of the DOM, such as hiding or removing buttons or menus, etc.
Overriding the default CSSThe following steps should be followed to override the default CSS –
- Create a custom CSS file, which will override the default css.
- Save this file in path –
- Include the CSS file in the respective JSP page, in which the change needs to be reflected.
- The change can be seen in the application as follows-
The background color of the login button has changed to green.
Same loginBody.jsp file also contains the HTML tags for Logs, organization, usename , password input fields as well as the LOG IN button, Default Admin, Default User buttons etc.
- Locating the correct JSP File: The list of JSP files used, is defined in the following location –
<put-attribute>tag, the ‘name’ attribute tells which part of the page is being scripted in the JSP file that is mentioned in the ‘value’ attribute. Hence, to make any change in the body of the login page, the CSS link must be added in ‘loginBody.jsp’ located in
The following is the list of locations where the CSS files need to be added to reflect changes in different pages:
- Login Page –
- Admin Landing (All Admin Pages) –
- Users Page –
- Organizations Page –
- Roles Page –
- Adhoc Landing Page (All Adhoc Pages) –
- Metadata Create –
- Metadata Edit –
- Data Source Create –
- Data Source Edit –
- Create Report –
- Edit Report –
- Adhoc Navigation Bar (Menus) –
- Adhoc Report Menus –
- Dashboard Designer Create –
- Dashboard Designer Edit-