.png "Employee"){kind=icon}
Introduction
Starting with version 2025.7, Incorta introduces a modernized user experience with some changes that impact the look and feel of the application. The most notable change is a shift in the placement of the menu from the top to the left side. If you have branded Incorta for your company using a Cascading Style Sheet (CSS), you will need to make some adjustments to your CSS file for the new look.
Applies To
This article applies to Incorta versions 2025.7.1 and above and is primarily aimed at on-premises customers. It is possible to brand Incorta Cloud instances as well, but the process is a bit more tedious as you must work with Incorta Support via a ticket to do so. If you are interested in applying CSS to an earlier version of Incorta, see this article.
What you should know before reading this article
- Be familiar with the operating system that your instance of Incorta is running on
- Knowledge of CSS or willingness to learn
- Familiarity with Incorta's documentation on customizing the look and feel of Incorta
Let's Go
Incorta Docs does a good job of explaining the branding options available to you with CSS. This article will focus on what is new with 2025.7 and recommendations for how to take advantage of it.
It is preferable that you have direct backend access to be able to edit the CSS file directly as well as place logos and images that you will use. The process becomes more tedious if you do not, as you will be dependent on someone else (like Incorta Support) to move files for you. As a reminder, any changes that you make to look and feel will affect all of the tenants on your Incorta cluster.
Edit or Create Incorta CSS file
If you do not already have a CSS file that you have been using to brand your Incorta Cluster, you should create the file..
- 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
Some of the editing options carry forward from previous versions while some are new.
Login Page
The CSS for your sign in page has not changed. If you are happy with what you already have, there is nothing new for you to do. That said, is it time freshen up the look?
Navigation Bar
In 2025.7 and above the navigation bar / menu has moved from the top to the left side of the screen and is now collapsible. The CSS you used for the top navigation bar/banner color will no longer work and you now have the option of using two different logos as well as alternative text.
Background Color
The new CSS for navigation bar background color is as follows. This snippet will set the color to gray.
/* Navigation Bar Background Color */
.inc-nav, .inc-main-nav, .inc-sec-nav {
background-color: #808080 !important;
}Logo
This snippet sets the logo at top of the default navigation bar. In this case the logo file name is standard_logo.svg. As a reminder, image files can referenced as a URL from a publicly available website or can be placed in the /IncortaNode/runtime/webapps/ROOT/css along with the custom-new.css file.
/* Navigation Bar logo */
#incorta-logo .logo-wrapper {
content: url(standard_logo.svg) !important;
width: auto !important;
height: 40px !important;
margin-left: auto !important;
margin-right: auto !important;
}Here is how it looks with an Incorta logo:
Note that you can control the height, width and margins if you wish, but these settings are not required.
Collapsed Logo
It is now possible to collapse the navigation bar to the left and the collapsed version of the navigation bar has its own logo. In this example, the collapsed logo file is placed in the css directory and is called collapsed_logo.svg
/* Navigation Bar Collapsed logo */
.ant5-layout-sider-collapsed #incorta-logo .logo-wrapper {
content: url(collapsed_logo.svg) !important;
width: auto !important;
height: 40px !important;
margin-left: auto !important;
margin-right: auto !important;
} Here is how it looks with an Incorta i logo:
Again, it is not necessary to set the width, height or margins but it is possible and may be desirable. The advantage of setting the height is that if you set the same height for both the logo and collapsed logo, you can prevent the menu items from shifting up or down when you collapse and uncollapse the navigation bar. In the samples above, the margins are set to center the logos in the visible space.
Custom Text
Custom text next to your logos can make it convenient to differentiate one environment from another (e.g. Dev from Prod). In this example, the word "Dev" is added to the right of the logo in green.
/* Custom Text */
#incorta-logo .logo-wrapper:after {
content: "Dev" !important;
color: green !important;
}Here is how it looks:
Menu Items
There are two components to each menu item and three modes that you can control color of in the navigation bar.
The two components are:
- The text, e.g. "Content", "Scheduler" etc...
- The icons that go with each menu item
The three modes are
- Unselected item - this refers to menu items and corresponding icons that are not selected and on which the mouse is not hovering
- Active item - this refers to a menu item and corresponding icon on which the mouse is hovering that has not been selected
- Selected item - this refers to the menu item and corresponding icon that has been selected by clicking on it (or defaulting to it at login)
It is possible to select the colors for all three of these modes if you so choose. Additionally, you can control the background color of Selected and Active items. Here is a snippet where the Selected menu item and icon are displayed in white with a charcoal background, an Active menu item and icon are displayed in green with a white background, and the Unselected menu items and icons are displayed in blue.
/* Navigation Bar Menu Items */
/* Unselected item text */
.inc-nav .ant5-menu-item {
color: blue;
}
/ *Unselected item icon */
.inc-nav .ant5-menu-item svg {
fill: blue;
}
/* Active item text */
.inc-nav .ant5-menu-item-active {
color: green !important;
}
/* Active item icon */
.inc-nav .ant5-menu-item-active .ant5-menu-item-icon svg {
fill: green !important;
}
/* Selected item text */
.inc-nav .ant5-menu-item-selected {
color: #FFFFFF !important;
}
/* Selected item icon */
.inc-nav .ant5-menu-item-selected .ant5-menu-item-icon svg {
fill: #FFFFFF !important;
}
/* Selected item background */
.inc-nav .ant5-menu-item-selected {
background-color: #36454F !important;
}This is what it looks like with the default navigation bar:
And this is what it looks like when the navigation bar is collapsed:
Menu Collapse Trigger Button
At the bottom of the navigation bar (bottom left corner of screen) is a button used to collapse and uncollapse the menu. You can color this button and the chevron arrow with the following CSS.
/* Navigation Bar Button */
/* Background Color */
#menu-trigger-btn {
background-color: #36454F !important
}
/* Arrow */
#menu-trigger-btn {
color: #FFFFFF !important
}
In this case the button has been set to charcoal and the chevron is set to white:
Page Header
In 2025.7, there is a page header on the Content page which you can control the color of. In this example, the color has been set to gray.
/* Page Header Background Color */
.new-page-details {
background-color: #808080 !important;
}In future releases, it is expected that other pages will also include page headers.
Sub-menu Items
Once you have selected a menu item, the selected page will often present you with a sub-menu. You can set the color of the selected sub-menu item with the following CSS. In this example the selected sub-menu item is set to green.
/* Selected sub-menu item color */
.ant-tabs-tab-active .ant-tabs-tab-btn {
color: green !important;
}
/* Selected sub-menu item underbar color */
.ant-tabs-tab-active::after {
background-color: green !important;
} This is what it looks like:
Buttons
There are many buttons in Incorta. By default, they are blue, but you may want to set them to one of your organization's colors. You will find guidance on the Menu Collapse Trigger button above. For other buttons, the following CSS sets the button color and border to green:
/* Sign In page buttons */
.inc-login__pane-container-form .ant-btn-primary {
background-color: green !important;
border-color: green !important;
}
.inc-login__pane-container-form .ant-btn-primary [disabled] {
background-color: green !important;
color: green !important;
}
/* + New buttons */
.page-details-new-button {
background-color: green !important;
border-color: green !important;
}
.inc-datasources-header__create-button {
background-color: green !important;
border-color: green !important;
}
.add_btn.newButton {
background-color: green !important;
border-color: green !important;
}
/* Homepage Connect to Data button */
.connect-to-data-button
{
background-color: green !important;
border-color: green !important;
}Dark Theme
It is possible for any user to change their Incorta instance to display Dark Theme from the Appearance sub-tab under the Account menu item. Incorta will automatically apply its own modifications to the defined "light" theme colors that are active, whether they are the default colors or colors you have selected via CSS, but you can also choose the colors and logo images that are displayed when Dark Theme is enabled by adding ".dark" before any selector. As an example this snippet sets the navigation bar background color to blue when Dark Theme is active.
/* Navigation Bar Background Color - Dark Theme */
.dark .inc-nav {
background-color: blue !important;
}
.dark .inc-main-nav {
background-color: blue !important;
}
.dark .inc-sec-nav {
background-color: blue !important;
}
Recommendations
Most of what has been covered so far has been concerned with how to do things. This section provides guidance on the best practices that will help you come up with a good looking result.
| Recommendation | Comments |
| Work in an environment that is private first |
To avoid possibly confusing your incorta users with a changing UI, perfect the CSS that you are developing in an instance of Incorta that has few to no other users using it. Once you feel it is ready, have it reviewed for feedback. Only once it is fully signed off should it be pushed to the instances that are used by many users. Because the menu placement has changed in Incorta 2025.7, you may want to consider sending out a video that shows how the new navigation works when you roll out the upgrade. |
| Work with Marketing | Your Marketing team can supply you with the exact hex codes for your corporate colors as well as approved logo and image files. Make sure image files have sufficient resolution such that they are not blurry. |
| Consider light or neutral colors for Navigation Bar | Dark background colors can make it hard to read the navigation bar options. It is always a safe option to choose a neutral color or stick with the default color. |
| Coordinate the Page Header color with the Navigation Bar | Making sure that the color of the Page Header and the Navigation Bar are compatible makes a good impression. Making them the same color is the easiest way to do this. |
| Check how it looks in dark theme |
Some of your users will choose to use Dark Theme in Incorta. Make sure that you account for how your CSS changes look when Dark Theme is enabled. Your testers should look at Dark Theme as well before signing off. If needed, use the .dark option to set the colors specifically for when Dark Theme is enabled. |
| Use custom text to differentiate your Incorta instances | Confusion when all of your Incorta instances look exactly the same can sometimes result in someone making changes where they shouldn't. To make this less likely to happen, you can make it more obvious to users which instance of Incorta they are in with CSS. It is, of course, possible to change the color scheme, but a simple way to differentiate is to use the Custom Text feature to label your non-production instances. |
| Button borders | It is possible to set the color of the border that surrounds the buttons in Incorta. Generally speaking, it looks best to make the button boarder the same color as the button. |
Related Material
