2

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

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

3replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • Hi Moataz-Bellah Mishrif

    I have added the Logo using the custom-new.css files.

    It works for me and I see the logo in the left hand top corner.

    However I wanted to know, can I change the size of the logo?

    I tried searching on google and I added parameters such as height and width in the custom css, but that did not change the logo size.

    Request your help.

     

    Thank you.

    Yogesh Bhave

    Like
  • Hello, I've tried these modifications, but the only one that works is the changing of the banner color.  Changing the logo or adding text hasn't worked.

    Is there anything else that needs to happen to make the changes effective?  I've made sure the permissions and owner of the logo.png file matched the custom-new.css file.  Do any services need to be restarted?

    Like
    • Mike Mascitti 

      Nevermind - clearing my cache fixed it!

      Like
Like2 Follow
  • 2 Likes
  • 4 mths agoLast active
  • 3Replies
  • 259Views
  • 3 Following

Product Announcement

Incorta 4.9 is now Generally Available (GA)!!!