Customizing logo and background Image by Creating/Modifying Custom CSS File

[KailaT]

Introduction

This article applies to Incorta versions 4.x.

Initializing CSS file:

1. Open the Incorta home installation folder.

2. Navigate to path ‘/IncortaNode/runtime/webapps/ROOT/css⁩’ (create ‘css’ folder if not found).

3. Open/Create ‘custom-new.css’ file (Exact name is mandatory).

Adding/Editing custom CSS properties:

• login background image:

1.   Place the image file in the css folder with this exact name: ‘login_bg.jpg’

2. Add this string to the css file:

/* To change background image on login page */

.inc-login {
    background-image: url("login_bg.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;
}

Note: If the image was small and you want to center it in the right pane:

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

Replace the ##{COLOR}## with the color of the image background.

• Header color:  Add this string to the css file (color ‘green’ is for example)

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

• Logo:

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

2. 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:

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

Replace [text] with the desired text