How to Modify the UWCC Color Scheme

Document ID : KB000044401
Last Modified Date : 14/02/2018
Show Technical Document Details

Introduction/Summary: 

 

 

The following steps will cover how to modify specific color aspects for the UWCC login panel with additional post-login changes. 

 

Background:  

Environments containing multiple Workload Control Center servers, it can be difficult to distinguish between production, development, and test instances. One method to help identify one server from another is to modify the login page color in addition to the post-login header and footer color bars.   

 

Environment:  

This customization is applicable to UWCC r11.3.5 and r11.3.6 

 

Instructions: 

WCC Login Page Color – Configuration/Modification

  1.    Locate and backup the file, CA_WCC_INSTALL_LOCATION\tomcat\webapps\wcc\login\css\wcc-common.css 

  2.    Open the wcc-common.css file for editing

  3.    Locate the following section text:

.login-viewport {

     background-color: #00174A;

}

 

a.    #00174A is the 11.3.5 blue value for the login page.

 

4.    Modify this hexadecimal value for the color of choice.

5.    Save and close the file.

6.    Open a new browser session to UWCC. 

7.    Observe the color change.

 

WCC Post-Login Header & Footer Color – Configuration/Modification

NOTES:

11.3.5: the upper blue color bar is split between a hexadecimal color setting for the left side and a gradient image file for the right side. The lower color bar is a style sheet setting and no image file is used.

11.3.6 the upper and lower blue color bars are split between a hexadecimal color setting for the left sides and a shared gradient image file for the right sides.

 

11.3.5 / 11.3.6 Upper left color bar

1.    CA_WCC_INSTALL_LOCATION\tomcat\webapps\wcc\launcher\ca\css\ca-all.css

 

/* ca header css */

.ca-header

{

      background-color: #21076a;

 

11.3.5 Upper right color bar (gradient image file)

 

1.    CA_WCC_INSTALL_LOCATION\tomcat\webapps\wcc\launcher\ca\images\caheader\gradient500.png 

2.    Open this image file in any editing software and modify.

 

11.3.5 Lower color bar

 

1.    CA_WCC_INSTALL_LOCATION\tomcat\webapps\wcc\launcher\css\wcc-common.css

.ca-footer

{

     background-color: #21076a

 

 

11.3.6 Lower left color bar

 

1.    CA_WCC_INSTALL_LOCATION\tomcat\webapps\wcc\launcher\css\wcc-common.css

.ca-footer

{

     background-color: #21076a;

 

11.3.6 Upper & Lower right color bar (shared/single gradient image file)

 

1.    CA_WCC_INSTALL_LOCATION\tomcat\webapps\wcc\launcher\ca\images\caheader\gradient500.png   

2.    Open this image file in any editing software and modify.

 

Additional Information:

 

a.    Changes are applicable to the #alphanumeric values of choice.

b.    The values presented in this document may be different from those encountered in a specific environment. For example, #00174A and #21076a for the CA blue color can be found in the files listed in this document.

c.    No service restarts required, only a new browser session with cleared cache.