WCC: How to customize colors and/or logo?

book

Article ID: 242015

calendar_today

Updated On:

Products

CA Workload Automation AE

Issue/Introduction

We want to change the colors associated with WCC (green=dev, blue=test, etc)  and include our corporate logo.

Please direct me to the documentation for customizing user presentation of WCC.

 

$ /opt/CA/WorkloadAutomationAE/wcc/uejmver.sh
Product Name:        AutoSys Web UI
Copyright:           Copyright (c) 2020 Broadcom All rights reserved.
Release:             12.0
Service Pack:        01
Maintenance Level:   00
Build Number:        1142
Volume Label:        ae-webui-12.0.01-11-29
Platform:            Linux
Currently Applied Patches
=========================
99111386

Environment

Release : 12.0

Component : WCC

Resolution

=======================

 Introduction

=======================

These are the instruction on how to modify the color and text of the login page and launcher page for WCC r12.x.

 

NOTES

  • You can do all these steps back to back and then clear the browser cache one time - there is no need to restart WCC services.
  • If you have WCC configured for high availability and you change the color or text of one instance, it WILL NOT change any of the other WCC instances.
  • Not sure what color you want to use? Use the HTML Color Picker.
  • After applying an incremental patch to WCC, the modified color(s) of the login and launcher page(s) WILL NOT be affected. If you added any text to the login and/or launcher page(s), this modification WILL be affected.

 

=======================

 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;

 

  1. Change the hexadecimal value to color of your choice (make sure you keep the # sign).

 

             login-viewport {

           background-color: #ffcce6;

                          

  1. Save the file.
  2. Click the refresh button in your Internet browser and you should see that the login page color has changed.

Note: If you don’t see the color change after clicking the refresh button, clear your browser cache. Then access the WCC GUI.

Note: It is recommended to use a light/pastel color for the login page. You cannot change the color of the login button and you cannot change the color of the CA logo and text, so a light color would be best so you can still see these components.

 

 

=======================

 Change Color of Launcher Header

=======================

 

  1. Navigate to the $CA_WCC_INSTALL_LOCATION/tomcat/webapps/wcc/launcher/ca/css directory [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\wcc\launcher\ca\css directory].
  2. Make a backup copy of the ca-all.css file.
  3. Open the original file and look for the following statements:

 

           /* ca header css */

            .ca-header

            {

                           #width:100%;

                           background-color: #20465f;

 

 

  1. Change the hexadecimal value to color of your choice (make sure you keep the # sign).

 

           /* ca header css */

            .ca-header

            {

                           #width:100%;

                           background-color: #e60000;

 

 

  1. Save the file.
  2. If you are currently logged in to WCC, click the refresh button in your Internet browser. If not, log in to WCC. You should see the color change at the top of the Launcher page.

Note: If you don’t see the color change after clicking the refresh button, log out of WCC (if you are logged in). Clear your browser cache and then log in to WCC.

 

 

=======================

 Change Color of Launcher Footer

=======================

 

  1. Navigate to the $CA_WCC_INSTALL_LOCATION/tomcat/webapps/wcc/launcher/css directory [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\wcc\launcher\css directory].
  2. Make a backup copy of the wcc-common.css file.
  3. Open the original file and look for the following statements (toward the bottom of file).

 

.ca-footer {

    background-color: #ffffff;

    padding: 5px;

}

 

.ca-footer-copyright,.ca-footer-link {

    font-family: Arial;

    font-size: 12px;

    color: #58666C;

}

 

  1. Change the hexadecimal value to color of your choice (make sure you keep the # sign).

.ca-footer {

            background-color: # e60000;

            padding: 5px;

}

 

  1. To ensure you can still the text on the footer, change the color of the text to white. (make sure you keep the # sign).

 

.ca-footer-copyright,.ca-footer-link {

    font-family: Arial;

    font-size: 12px;

    color: #ffffff;

}

 

  1. Save the file.
  2. If you are currently logged in to WCC, click the refresh button in your Internet browser. If not, log in to WCC. You should see the color change at the bottom of the Launcher page.

Note: If you don’t see the color change after clicking the refresh button, log out of WCC (if you are logged in). Clear your browser cache and then log in to WCC.

 

 

 

 

=======================

 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]

  1. Open the JavaScript file and look for the following string: 'CA Workload Automation AE'.

Note: The string 'CA Workload Automation AE' appears before 'login-product'.

  1. Change the string from 'CA Workload Automation AE' to 'CA Workload Automation AE - PRODUCTION'.
  2. Save the file.
  3. Do this for all 5 JavaScript files.
  4. Click the refresh button in your Internet browser and you should see the text modifications.

Note: If you don’t see CA Workload Automation – PRODUCTION after clicking the refresh button, clear your browser cache. Then access the WCC GUI.

 

 

You can add or modify the text under the login box (where it says © 2016 CA. All rights reserved.) by completing these steps:

 

  1. Use the same 5 JavaScript files from when you added text to the login page.
  2. r12: Open the JavaScript file and look for the following string: 'Copyright \\xA9 2016 CA. All rights reserved.' It appears before 'login-copyright'.

    r12: Open the JavaScript file and look for the following string: '\\xA9 2017 CA. All rights reserved.' It appears before 'login-copyright'.

  1. Change the text or add additional text. Be sure that the text appears between the two tick marks.
  2. Save the file.
  3. Do this for all 5 JavaScript files.
  4. Click the refresh button in your Internet browser and you should see the text modifications.

Note: If you don’t see the text modifications after clicking the refresh button, clear your browser cache. Then access the WCC GUI.

 

 

 

 

 

 

 

 

 

 

 

=======================

 Add/Modify Text to the Launcher Page Header

=======================

 

  1. Navigate to the $CA_WCC_INSTALL_LOCATION/tomcat/webapps/wcc/launcher directory [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\wcc\launcher directory].
  2. There will be 5 JavaScript files with a filename that starts with a hexadecimal in it and ends with cache.js. Make a backup copy of all 5 JavaScript files.
  3. Open the JavaScript file and look for the following string 'CA Workload Automation AE'.

PAY ATTENTION! You will see 'CA Workload Automation AE' in more than one string. You want the string that ONLY has 'CA Workload Automation AE' in it. (The string 'CA Workload Automation AE' appears after 'ca-header-logo' and before 'ca-header-product-name'.)

  1. Change the string from 'CA Workload Automation AE' to 'CA Workload Automation AE - PRODUCTION'.
  2. Save the file.
  3. Do this for all 5 JavaScript files.
  4. If you are currently logged in to WCC, click the refresh button in your Internet browser. If not, log in to WCC. You should see the text modifications at the top of the Launcher page.

Note: If you don’t see CA Workload Automation AE – PRODUCTION after clicking the refresh button, log out of WCC (if you are logged in). Clear your browser cache and then log in to WCC.

 

 

 

 

 

 

 

 

 

=======================

 Add/Modify Text to the Launcher Page Footer

=======================

 

You can add or modify the text in the footer (where it says © 2016 CA. All rights reserved.) by completing these steps:

 

  1. Use the same 5 JavaScript files from when you added text to the launcher page header.
  2. r12: Open the JavaScript file and look for the following string: 'Copyright \\xA9 2016 CA. All rights reserved.' It appears before 'ca-footer-copyright'.

    r12: Open the JavaScript file and look for the following string: '\\xA9 2017 CA. All rights reserved.' It appears before 'ca-footer-copyright'.

  1. Change the text or add additional text. Be sure that the text appears between the two tick marks.
  2. Save the file.
  3. Do this for all 5 JavaScript files.
  4. If you are currently logged in to WCC, click the refresh button in your Internet browser. If not, log in to WCC. You should see the text modifications at the bottom of the Launcher page.

Note: If you don’t see the text modifications after clicking the refresh button, log out of WCC (if you are logged in). Clear your browser cache and then log in to WCC.

 

Powered by Wolken Software