Customize the Look and Feel of Incorta with CSS

KailaT · ‎04-20-2022

Introduction

It is possible to update the look and feel of Incorta to emulate your own company's branding by modifying the text and images your users see when they log into Incorta. Many customers choose to use their own logo and colors or even to brand Incorta with a unique name of their choosing (🦦 - On Time Transaction and Analytics Reporting anyone?). This adds some splash to the user experience and makes it clear that this instance of Incorta is all your own.

Applies To

This article applies to Incorta versions 4.x, but many of the concepts apply to later versions as well.

What you should know before reading this article

Be familiar with the operating system that your instance of Incorta is running on

Let's Go

Note that you will need backend access to be able to make modifications and that any changes you make to look and feel will affect all of the tenants on your Incorta cluster. With that in mind, here are the steps to customize Incorta with CSS.

Initialize CSS file

The first thing you need to do is create the file that will allow you to manipulate the CSS.

Open the Incorta home installation folder.
Navigate to path ‘/IncortaNode/runtime/webapps/ROOT/css⁩’ (create ‘css’ folder if not found).
Open/Create ‘custom-new.css’ file (Exact name is mandatory).

Adding/Editing custom CSS properties

There are a number of places where you can make changes to affect the experience for your users.

Login background image

Place the image file in the css folder with this exact name: ‘login_image.jpg’
Add this string to the css file:

/* To change background image on login page */

.inc-login {
    background-image: url("login_image.jpg") !important;
}

/* To change login dialog image */
.inc-login__container-header * {
    display: none;
}

.inc-login__container-header {
    height: 100px;
    background: url(login_logo.jpg);
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center;
}

If the image is small and you want to center it in the right pane, use this code.

background-size: 50%;
background-position: center;
background-color: ##{COLOR}## !important;

Replace ##{COLOR}## with the color you choose for the image background. Your Marketing department can give you the specific hex color code to use for an approved color.

Banner color

Add this string to the css file to change the color of the banner at the top of the Incorta screen. You will probably want to get the hex color code for one of your company's primary colors and use it here (#000000 [black] is just an example here).

header.header-nav{
   background-color: #000000 !important;
}

Logo

Update the logo on the left side of the header banner.

Place the image file in the css folder with this exact name: ‘logo.png’.
Add this string to the css file:

.header-nav .header-logo span {
       content:url(logo.png);
}

Custom text beside logo

Add this string to the css file if you would like custom text next to the logo:

.header-nav .header-logo {
       display: flex;
}
.header-nav .header-logo:after {
   content:‘[text]’ !important;
       padding-top: 15px;
       color: white;
}

Replace [text] above with the desired text.

Buttons

Update button color in the UI. You probably want your button color to match the banner color.

.page-details-new-button {
  background-color: #000000 !important;
  border-color: green !important;
}
.inc-datasources-header__create-button {
  background-color: #000000 !important;
  border-color: green !important;
}
.add_btn.newButton {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

As a starting place, you can use the attached sample file and make modifications to it to customize the look and feel of your own instance of Incorta. Start in your dev environment, perfect it there, and then make a splash in Prod!