Customizing the logo and banner for web applications

Note: Customization of the logo and banner is not available in SoHo 4 UX.

The header area of the application contains an image that you can replace with your corporate logo. You can also customize the banner color. Make your changes by modifying the custom.css file.

  1. Navigate to your web application directory structure. Go to webapps/webappname/src/styles/default/css/.

    For example, D:\landmark\scr\hcm\modules\hr\webapps\EmployeeSelfService\src\styles\default\css\

  2. Copy the logo image to the image directory at webappname /src/styles/default/css/img
    • The image format can be any file type
    • The image works best if it has similar dimensions to the image you are replacing
    • If you place your image in the directory indicated above, then updating the url to the image is simpler
  3. Edit the custom.css to add your logo.
    • Uncomment the .css. Remove the /* and */ at the beginning and end.
    • Edit the .inforLogo class to reference the logo file. Verify that the url path is correct.
    • You can specify the height and width of them image.
    • To adjust the spacing between the logo image and the webapp name label, you can modify the .inforTopBannerLeft and .inforApplicationName classes. Performing this step moves the webapp name to the left.
  4. Optionally, edit the custom.css to change the banner background.

    In the .inforTopBanner class, you can change the color value or reference a background image. For example, an image that has a divider line or shading. Use the repeat value to tile the image. If you use an image, you can copy the file to the img directory. Verify the url path.

  5. Save the file and redeploy the application to your application server for the changes to take effect.