Customizing colors and/or logo in Webui 24.0 release

Products

• Autosys Workload Automation

Issue/Introduction

This document provides the necessary steps for customizing certain colors and text in the WebUI. This can be beneficial for allowing users to easily distinguish between production and lower environments.  

Environment

Release 24.x

Component:  Autosys WebUI (aka WCC)

Resolution

NOTES:

• All of the steps below can be performed back to back and then clear the browser cache one time - there is no need to restart the WebUI services.
• Changes are on a per instance basis. If WebUI is configured for high availability, changes are will not get propagated to other WebUI instances. The same changes will need to be performed on each individually.
• Use the HTML Color Picker to select a color of choice.
• After applying an incremental patch to the WebUI, the modified color(s) of the login and launcher page(s) WILL NOT be affected. If any additional text was added to the login and/or launcher page(s), this modification WILL be affected.
• Take a backup of every file that requires modifications.

 

Change Color of Login Page

1. Navigate to the $CA_WCC_INSTALL_LOCATION/tomcat/webapps/wcc/login/css directory [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\wcc\login\css directory].
2. Make a backup copy of the wcc-common.css file.
3. Open the original file and look for the following statements (near the beginning of file).
   login-viewport {
           background-color: #FFFFFF;
4. Change the hexadecimal value to color of choice (make sure to keep the # sign).
   login-viewport {
           background-color: #FFCCE6;
5. Save the file.
6. Click the browsers refresh button and the changes should take effect in that the login page color has changed.
   Notes:

• • If after clicking the refresh button, the changes are not seen, logout of the WebUI and clear the browser cache. Then log back into WebUI.
  • For ease of visibility, it is recommended to use a light/pastel color for the login page.
    Neither the color of the login button, nor the color of the Broadcom logo and text can be changed.

_______________________________________________________________________________________________________________________________________________________________

 

Add/Modify Text to the Login Page

1. Navigate to the $CA_WCC_INSTALL_LOCATION/tomcat/webapps/wcc/login directory [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\wcc\login directory].
2. There will be 5 JavaScript files with a filename that starts with a hexadecimal number and ends with cache.js. Make a backup copy of all 5 JavaScript files.
   
       EXAMPLE: 5CE5ADE3325A6742C7FAA2909247D567.cache.js


3. Open the JavaScript file and look for the following string: 'AutoSys Workload Automation'.
   Note: The string 'CA Workload Automation AE' appears before 'login-product'.
4. Change the string from 'CA Workload Automation AE' to 'AutoSys Workload Automation - PRODUCTION'.
5. Save the file
6. Do this for all 5 JavaScript files.
7. Click the browsers refresh button and the changes should take effect to reflect the text modifications.
   Note: If the changes that were made do not reflect after clicking the refresh button, clear the browser cache. Then access the WebUI again.

The text under the login box; where it says © 2024 CA. All rights reserved, can also be modified by completing these steps:

1. Use the same 5 JavaScript files which were used that has the added text to the login page.
2. Open the JavaScript file and look for the following string: 'All rights reserved.' It appears before 'login-copyright'.
3. Change the text or add additional text. Be sure that the text appears between the two tick marks.
4. Save the file.
5. Do this for all 5 JavaScript files.
6. Click the browsers refresh button and the changes should take effect to reflect the text modifications.
   Note: If the changes that were made do not reflect after clicking the refresh button, clear the browser cache. Then access the WebUI again.

_______________________________________________________________________________________________________________________________________________________________

 

Change Color of Launcher Header, Footer, Text Launcher Header, Footer Brand image and Brand Image Link

Take a backup of "webui" folder present in  $CA_WCC_INSTALL_LOCATION/tomcat/webapps [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps]

1. Update index.html
   • Navigate to $CA_WCC_INSTALL_LOCATION/tomcat/webapps/webui directory [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\webui directory]
   • Make a backup copy of the index.html file
   • Open the original file and look for the following statements
     Look for this:

     <link href="./static/css/main.d0364fd1.css" rel="stylesheet">
     
     Right after it, add this line:

     <link href="./static/css/custom.css" rel="stylesheet">
     
     The final code should look like this:
     
     <link href="./static/css/main.d0364fd1.css" rel="stylesheet">
<link href="./static/css/custom.css" rel="stylesheet">

2. Create custom.css
   • Create a new file named custom.css in  $CA_WCC_INSTALL_LOCATION/tomcat/webapps/webui/static/css or [%CA_WCC_INSTALL_LOCATION%\tomcat\webapps\webui\static\css]
   • Add the following CSS for the header and footer customization
     
     header {
background-color: #0000FF !important; /* Adjust to preferred color */
}
footer {
background-color: #FF0000 !important; /* Adjust to preferred color */
}
     
     
3. Update Header Text
   • Open the <number>.js (ex: main.dbbe7c69.js and size is >2 MB on linux , >5MB on windows) file found at $CA_WCC_INSTALL_LOCATION/tomcat/webapps/webui/static/js or [%CA_WCC_INSTALL_LOCATION%\tomcat\webapps\webui\static\js].
   • Search for "AutoSys Workload Automation"  (the first occurrence under  "header":"AutoSys Workload Automation").
   • Replace it with the desired custom name: AutoSys Workload Automation - PRODUCTION
     
     
4. Update Footer Image:
   • Add these CSS rules custom.css in  $CA_WCC_INSTALL_LOCATION/tomcat/webapps/webui/static/css or [%CA_WCC_INSTALL_LOCATION%\tomcat\webapps\webui\static\css] to modify the footer image:
   • Copy the brand image into  $CA_WCC_INSTALL_LOCATION/tomcat/webapps/webui/static/media or [%CA_WCC_INSTALL_LOCATION%\tomcat\webapps\webui\static\media] 
     

     footer .MuiContainer-root svg {
  visibility: hidden;
}

     footer .MuiContainer-root:nth-of-type(1) > a:first-child {
  background-image: url('path of image'); // path of the brand image (ex: background-image: url(../media/brand.png);)
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


     .MnrlFooter-items a:nth-child(1) {
   color: #FF4466; /* Privacy Policy */
}

     .MnrlFooter-items a:nth-child(2) {
    color: #FF0044; /* Terms of Use */
}

     .MnrlFooter-items a:nth-child(3) {
    color: #FF5500; /* About */
}

5.  Update Copyright Text:
   • Open the <number>.js file (e.g., main.dbbe7c69.js, size >2 MB on Linux, >5 MB on Windows) located in $CA_WCC_INSTALL_LOCATION/tomcat/webapps/webui/static/js or
     %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\webui\static\js
   • Search for "Copyright" (there should only be 1 occurrence in the file).
   • The user can then change the copyright text as needed.
     
     
6. To change the copyright text styles:
   
   • Add the following line to custom.css:
     .MnrlFooter-root .MnrlFooter-inner .MuiTypography-caption.MuiTypography-alignRight {
     color: red;
}
     
     Notes:
     • The user can modify the color codes as needed.
     • If Step 2 above was performed, then above lines comes after 'header' and 'footer' lines.
       
       
7. Update the Brand Image Link:
   Note: By default, clicking on the brand image in the bottom right corner of the WebUI page, opens https://www.broadcom.com. This can be changed to point elsewhere by following the steps outlined below.
   
   • Open the <number>.js (ex: main.dbbe7c69.js and size is >2 MB on linux , >5MB on windows) file found at $CA_WCC_INSTALL_LOCATION/tomcat/webapps/webui/static/js or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\webui\static\js.
     Search for "www.broadcom.com". The very first occurrence in the script is the one that'll need to be changed.
     
     (b_e,{href:"https://www.broadcom.com/"
   • Change the URL to point to desired location.
   • Click the browsers refresh button and the changes should take effect to reflect the text modifications.
     Note: If the changes that were made do not reflect after clicking the refresh button, clear the browser cache. Then access the WebUI again.