How to Modify Login Page and Launcher Page in WCC R11.3.5 and R11.3.6

How To Modify Login Page and Launcher Page in WCC r11.3.5 and r11.3.6

======

Introduction

======

These are the instruction on how to modify the color and text of the login page and launcher page for WCC r11.3.5 and r11.3.6.

NOTES

You can do all these steps back to back and then clear the browser cache one time.
If you have WCC configured for high availability, if you change the color for once instance, it WILL NOT change for any other instance.
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 backupcopy of the wcc-common.css file.

3. Open the original file and look for the following statements (near the beginning of file).

background-color: #00174A;

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

background-color: #338533;

5. Save the file.

6. 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.

======

Change Color of Launcher Header – Part I

======

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: #21076a;

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

/* ca header css */

.ca-header

{

#width:100%;

background-color: #338533;

5. Save the file.

6. 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.

Note:When changing the color of the header in WCC, the entire header doesn’t change colors. This is because the header is made up of two panes. The instructions on how to change the second header pane so that the header is all one color are located at the bottom of this document (See Change Color of Launcher Header – Part II).

======

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: #21076a;

background-image: url(../ca/images/caheader/gradient500.png);

background-repeat: no-repeat;

background-position: right;

padding: 5px;

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

.ca-footer {

background-color: #338533;

background-image: url(../ca/images/caheader/gradient500.png);

background-repeat: no-repeat;

background-position: right;

padding: 5px;

5. Save the file.

6. 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 6 HTML files with a filename that starts with a hexadecimal in it and ends with cache.html. Make a backupcopy of all 6 HTML files.

[EXAMPLE: 14C327F351FF81D415D6BED7FDDDEE7E.cache.html]

3. Open the HTML file and look for the following string 'Workload Automation'.

Note:The string 'Workload Automation' appears before 'login-product' for each file.

4. Change the string from 'Workload Automation' to 'Workload Automation - DEVELOPMENT'.

5. Save the file.

6. Do this for all 6 HTML files.

7. Click the refresh button in your Internet browser and you should see the text modifications.

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

1. Use the same 6 HTML files from when you added text to the login page.

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 6 HTML files.

6. Click the refresh button in your Internet browser and you should see the text modifications.

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

======

Add/ModifyText 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 6 HTML files with a filename that starts with a hexadecimal in it and ends with cache.html. Make a backupcopy of all 6 HTML files.

3. Open the HTML file and look for the following string 'Workload Automation'.

PAY ATTENTION!You will see 'Workload Automation' in more than one string. You want the string that ONLYhas 'Workload Automation' in it. (The string 'Workload Automation' appears after 'ca-header-logo' and before 'ca-header-product-name'. In Linux, it appears before 'X-HTTP-Method-Override'.)

4. Change the string from 'Workload Automation' to 'Workload Automation - DEVELOPMENT'.

5. Save the file.

6. Do this for all 6 HTML files.

7. 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 Workload Automation - DEVELOPMENT 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/ModifyText to the Launcher Page Footer

======

1. Use the same 6 HTML files from when you added text to the launcher page.

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 6 HTML files.

6. 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.

======

Change Color of LauncherHeader – Part II

======

Note:Using the HTML Picker and the hexadecimal value you choose as your header color for WCC, enter that value into search box and press OK. You should see thergb value for your color. Write down or remember this information.

1. Navigate to the $CA_WCC_INSTALL_LOCATION/tomcat/webapps/wcc/login/ca/images/caheader directory [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\wcc\login\ca\images\caheader directory].

2. Make a backup copy of the gradient500.png file.

3. Open the Paint application on your local machine.

a. Resize the workspace so that it is no smaller than 650 x 200px.

b. Click on ‘Edit colors’.

c. Enter the RGB values for from the HTML Picker. Then click OK.

d. Click on your color in the Paint tray (blue square), click on the Paint Bucket (green square), and paint the workspace.

e. Save this image as gradient500.png.

3. Copy the gradient500.png file into the $CA_WCC_INSTALL_LOCATION/tomcat/webapps/wcc/login/ca/images/caheader directory [or %CA_WCC_INSTALL_LOCATION%\tomcat\webapps\wcc\login\ca\images\caheader directory].

4. Restart WCC services.

Note:Refreshing the GUI in your browser will not be enough to pick up the changes. You will also need to clear your browser cache and cookies before accessing the GUI.